import { Grid } from "../../../../components/grid/Grid";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { PropTypes } from "prop-types";
import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Typography } from "@mui/material";
import { format } from "date-fns-jalali";

export const ProvinceAllocationInformation = ({ item, i }) => {
  let columns = [];
  let data = [];
  let state;
  state =
    item.provinceKillRequestState === "pending"
      ? "در انتظار تایید کشتارگاه"
      : state;
  state = item.provinceKillRequestState === "accepted" ? "تایید شده" : state;
  state = item.provinceKillRequestState === "rejected" ? "رد شده" : state;
  if (item.provinceKillRequestMessage) {
    columns = [
      "نام کشتارگاه",
      "مالک کشتارگاه",
      "تعداد تخصیص داده شده",
      "تاریخ تخصیص",
      "نحوه خرید",
      "نوع تخصیص",
      "وضعیت درخواست",
      "دلیل رد",
    ];
    data = [
      item.killHouseName,
      item.killHouseUserName,
      item.mainQuantity + " قطعه",
      format(new Date(item.date), "yyyy/MM/dd"),
      item.paymentType,
      item.automaticState ? "اتوماتیک" : "دستی",
      state,
      item.provinceKillRequestMessage,
    ];
  } else {
    columns = [
      "نام کشتارگاه",
      "مالک کشتارگاه",
      "تعداد تخصیص داده شده",
      "تاریخ تخصیص",
      "نوع تخصیص",
      "وضعیت درخواست",
    ];
    data = [
      item.killHouseName,
      item.killHouseUserName,
      item.mainQuantity + " قطعه",
      format(new Date(item.date), "yyyy/MM/dd"),
      item.automaticState ? "اتوماتیک" : "دستی",
      state,
    ];
  }

  return (
    <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
      <TimelineSeparator>
        <TimelineDot />
        <TimelineConnector />
      </TimelineSeparator>
      <Grid container direction="column" flexWrap="nowrap" flex="1">
        <Grid container>
          <Grid>
            <TimelineOppositeContent variant="body1" fontWeight="bold">
              تخصیصات استان به کشتارگاه
            </TimelineOppositeContent>
          </Grid>
          <Grid>
            <TimelineContent color="textSecondary">
              <Typography variant="body2">
                در این قسمت جزییات تخصیصات را مشاهده می کنید.
              </Typography>
            </TimelineContent>
          </Grid>
        </Grid>
        <Grid>
          <Grid key={"ProvinceAllocationInformation" + i}>
            <Grid>
              <SimpleTable
                // name={`اطلاعات تخصیص شماره ${i + 1}`}
                columns={columns}
                data={[data]}
              />
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </TimelineItem>
  );
};

ProvinceAllocationInformation.propTypes = {
  item: PropTypes.object,
  i: PropTypes.any,
};
