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

const FileAuctionStatus = ({ file }) => {
  const { ceilingPrice, floorPrice, date, fee, index, totalIndex } =
    file.auctionsList[0];
  const { fee: highestBid } = file?.killHouseAuctionsList
    ? file.killHouseAuctionsList[0]
    : { fee: "پیشنهادی وجود ندارد" };
  const totalBids = file.killHouseAuctionsList?.length;

  const auctionFinishDate = moment(new Date(date));
  const currentDate = moment();
  const diff = auctionFinishDate.diff(currentDate);
  let auctionRemainedSeconds = moment.duration(diff).asSeconds();
  return (
    <>
      <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
        <TimelineSeparator>
          <TimelineDot color="secondary" />
          <TimelineConnector />
        </TimelineSeparator>
        <Grid container direction="column" flexWrap="nowrap" flex="1">
          <Grid container>
            <Grid>
              <TimelineOppositeContent
                variant="body1"
                fontWeight="bold"
                color="secondary"
              >
                در حال مزایده
              </TimelineOppositeContent>
            </Grid>
            <Grid>
              <TimelineContent color="textSecondary">
                <Typography variant="body2">
                  درخواست درحال مزایده می باشد.
                </Typography>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid>
            <SimpleTable
              columns={[
                "اولویت مرغدار",
                "کف قیمت",
                "سقف قیمت",
                "قیمت درخواستی مرغدار",
                "مدت زمان باقی مانده",
                "قیمت بالاترین پیشنهاد",
                "تعداد کل پیشنهادات",
                // "فروشنده",
              ]}
              data={[
                [
                  `اولویت ${index} از ${totalIndex}`,
                  `${floorPrice} ﷼`,
                  `${ceilingPrice} ﷼`,
                  `${fee} ﷼`,
                  <Timer
                    key={"FileAuctionStatus"}
                    seconds={auctionRemainedSeconds}
                  />,
                  highestBid === "پیشنهادی وجود ندارد"
                    ? highestBid
                    : `${highestBid} ﷼`,
                  totalBids ? totalBids : "پیشنهادی وجود ندارد",
                  // file.provinceRequestAuctionList ? "استان" : "مرغدار",
                ],
              ]}
            />
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};

FileAuctionStatus.propTypes = {
  file: PropTypes.object,
};

export default FileAuctionStatus;
