import {
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  Typography,
} from "@mui/material";
import React from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { PropTypes } from "prop-types";

import img1 from "../../../../assets/images/document.jpg";
import img2 from "../../../../assets/images/chicken.svg";
import img3 from "../../../../assets/images/users.jpg";
import img4 from "../../../../assets/images/price.jpg";

export default function AdminStaticInfoInBox({ infoData }) {
  return (
    <Grid xs={12} sm={8} md={8} lg={12}>
      <Grid
        container
        mt={SPACING.MEDIUM}
        gap={SPACING.SMALL}
        justifyContent="space-around"
      >
        <Card>
          <CardActionArea>
            <CardMedia
              component="img"
              height="240"
              image={img1}
              alt="green iguana"
            />
            <CardContent>
              <Typography gutterBottom variant="body1">
                پرونده ها
              </Typography>
              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  فعال:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.numberOfActiveFiles}
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  رد شده:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.numberOfRejectedFiles}
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  بایگانی شده:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.numberOfArchiveFiles}
                </Typography>
              </Grid>
            </CardContent>
          </CardActionArea>
        </Card>
        <Card>
          <CardActionArea>
            <CardMedia
              component="img"
              height="240"
              image={img2}
              alt="green iguana"
            />
            <CardContent>
              <Typography gutterBottom variant="body1">
                جوجه ریزی
              </Typography>
              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  جوجه ریزی:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.realHatching}
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  تلفات:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.totalLossess}
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  مجموع:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.totalHatching}
                </Typography>
              </Grid>
            </CardContent>
          </CardActionArea>
        </Card>
        <Card>
          <CardActionArea>
            <CardMedia
              component="img"
              height="240"
              image={img3}
              alt="green iguana"
            />
            <CardContent>
              <Typography gutterBottom variant="body1">
                کاربران
              </Typography>
              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  کل:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.totalUsers}
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  کاربر:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.numberOfUsers}
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  اپراتور:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.numberOfOperators}
                </Typography>
              </Grid>
            </CardContent>
          </CardActionArea>
        </Card>

        <Card>
          <CardActionArea>
            <CardMedia
              component="img"
              height="240"
              image={img4}
              alt="green iguana"
            />
            <CardContent>
              <Typography gutterBottom variant="body1">
                نرخ مرغ
              </Typography>
              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  قیمت روز:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.price} ریال
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  کف قیمت:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.floorPrice} ریال
                </Typography>
              </Grid>

              <Grid display="flex">
                <Typography
                  variant="body1"
                  mr={SPACING.TINY}
                  color={(prop) => prop.palette.grey["A700"]}
                >
                  سقف قیمت:
                </Typography>
                <Typography mr={SPACING.TINY} fontWeight="bold">
                  {infoData?.cellingPrice} ریال
                </Typography>
              </Grid>
            </CardContent>
          </CardActionArea>
        </Card>
      </Grid>
    </Grid>
  );
}

AdminStaticInfoInBox.propTypes = {
  infoData: PropTypes.any,
};
