import { Typography } from "@mui/material";
import React from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { formatJustDate } from "../../../../utils/formatTime";
import { PropTypes } from "prop-types";
import { SPACING } from "../../../../data/spacing";
import { TimelineOppositeContent } from "@mui/lab";
import { format } from "date-fns-jalali";

export const FileComplaint = ({ item }) => {
  return (
    <>
      <Grid container>
        <Grid>
          <TimelineOppositeContent
            variant="body1"
            fontWeight="bold"
            color="secondary"
          >
            بررسی شکایت
          </TimelineOppositeContent>
        </Grid>
      </Grid>

      <Grid container>
        <SimpleTable
          name={`تلفات برای این بار در تاریخ ${formatJustDate(
            item.complaint?.createDate
          )} ثبت شده.`}
          columns={[
            "عنوان",
            "توضیحات",
            "تاریخ ثبت",
            "وضعیت",
            "درصد تلفات",
            "تلفات عرف",
            "وزن واقعی",
            "وزن با احتساب تلفات",
            "پیوست تصویر",
          ]}
          data={[
            [
              item.complaint?.title,
              item.complaint?.description
                ? item.complaint?.description
                : "بدون توضیحات",
              format(new Date(item.complaint?.createDate), "yyyy/MM/dd"),
              item.complaint?.state === "pending"
                ? "در حال بررسی"
                : item.complaint?.state === "accepted"
                ? "تایید شده"
                : "رد شده",
              item.complaint?.percent,
              item.complaint?.percentageLosses,
              item.complaint?.realWeight,
              item.complaint?.lossesWeight !== 0
                ? item.complaint?.lossesWeight
                : "تلفات بررسی نشده است",
              item.complaint?.image?.length
                ? item.complaint?.image?.map((item, i) => {
                    return [
                      <Grid
                        display="inline-flex"
                        key={`SlaughterPaymentFactorImage${i}`}
                      >
                        <a href={item} alt="دانلود">
                          <img
                            src={item}
                            width="80"
                            height="80"
                            alt="دانلود"
                            style={{
                              marginRight: "10px",
                              borderRadius: "5px",
                            }}
                          />
                        </a>
                      </Grid>,
                    ];
                  })
                : "بدون پیوست",
            ],
          ]}
        />
        {item?.complaint?.reviewer && (
          <Typography
            mt={SPACING.TINY}
            variant="body2"
            color={(prop) => prop.palette.grey["A700"]}
          >
            {`تلفات در تاریخ ${formatJustDate(
              item?.complaint?.reviewer?.createDate
            )} توسط ${item?.complaint?.reviewer?.operatorname} `}
            {item?.complaint?.reviewer?.state === "accepted" ? "تایید " : "رد "}
            شده است.
          </Typography>
        )}
      </Grid>
    </>
  );
};

FileComplaint.propTypes = {
  item: PropTypes.object,
};