import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Typography } from "@mui/material";
import React from "react";
import { Grid } from "../../../../components/grid/Grid";
import { PropTypes } from "prop-types";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { SPACING } from "../../../../data/spacing";
import { formatTime } from "../../../../utils/formatTime";

const SlaughterPaymentFactor = ({ data, barCode }) => {
  return (
    <>
      <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <Grid container direction="column" flexWrap="nowrap" flex="1">
          <Grid container>
            <Grid>
              <TimelineOppositeContent>
                <Typography variant="body1" fontWeight="bold">
                  اطلاعات پرداختی کشتارگاه
                </Typography>
              </TimelineOppositeContent>
            </Grid>
            <Grid>
              <TimelineContent color="textSecondary">
                <Grid container gap={SPACING.SMALL}>
                  <Typography
                    variant="body2"
                    display="flex"
                    gap={SPACING.SMALL}
                  >
                    اطلاعات پرداختی کشتارگاه در این قسمت نمایش داده میشود.
                  </Typography>
                </Grid>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid container>
            <Grid xs={12}>
              <SimpleTable
                columns={[
                  "کد بار",
                  "کشتارگاه",
                  "تاریخ ثبت شناسه",
                  "شناسه پرداخت",
                  "مبلغ",
                  "وضعیت",
                  "پیوست",
                ]}
                data={[
                  [
                    barCode,
                    `${data?.killHouseName} (${data?.killHouseUserProvince}/${data?.killHouseUserCity})`,
                    formatTime(data.time),
                    Number(data.paymentCode),
                    `${data.totalMoney} ﷼`,
                    data.factorState === "accepted"
                      ? "تایید شده"
                      : data.factorState === "pending"
                      ? "در انتظار تایید"
                      : "رد شده",
                    <a
                      key={`SlaughterPaymentFactorImage`}
                      href={data.factorImage}
                    >
                      <img
                        src={data.factorImage}
                        alt="Slaughter Payment Factor"
                        width="50"
                        height="50"
                        className="images-file"
                      />
                    </a>,
                  ],
                ]}
              />
            </Grid>
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};
SlaughterPaymentFactor.propTypes = {
  data: PropTypes.any,
  barCode: PropTypes.any,
};

export default SlaughterPaymentFactor;
