import { Button } from "@mui/material";
// import moment from "moment";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { Grid } from "../../../../components/grid/Grid";
// import { Timer } from "../../../../components/timer/Timer";
import { SPACING } from "../../../../data/spacing";
import { ROUTE_SLAUGHTER_FILE } from "../../../../routes/routes";
import { formatTime } from "../../../../utils/formatTime";
import { auctionSlaughterRequests } from "../../services/auction-slaughter-requests";

export const AuctionsBids = () => {
  const [tableRows, setTableRows] = useState([]);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { auctionSlaughterRequestsData } = useSelector(
    (state) => state.auctionSlice
  );

  useEffect(() => {
    dispatch(auctionSlaughterRequests());
  }, []);

  useEffect(() => {
    if (
      !auctionSlaughterRequestsData ||
      !Array.isArray(auctionSlaughterRequestsData)
    ) {
      setTableRows([]);
      return;
    }

    setTableRows(
      auctionSlaughterRequestsData.map((item) => {
        // const auctionFinishDate = moment(new Date(item.date));
        // const currentDate = moment();
        // const diff = auctionFinishDate.diff(currentDate);
        // let auctionRemainedSeconds = moment.duration(diff).asSeconds();
        const auctionState =
          item?.state === "accepted"
            ? "برنده شده اید!"
            : item?.state === "pending"
            ? "در حال انجام مزایده"
            : "درخواست شما پذیرفته نشد.";
        return [
          item?.poultryRequest?.id || "",
          item?.poultryRequest?.orderCode || "",
          (item?.fee || 0) + " ﷼",
          (item?.poultryRequest?.quantity || 0) + " قطعه",
          item?.poultryRequest?.hatching?.date || "",
          (item?.poultryRequest?.chickenBreed || "") +
            (item?.poultryRequest?.chickenBreed &&
            item?.poultryRequest?.process?.poultry?.age
              ? " - "
              : "") +
            (item?.poultryRequest?.process?.poultry?.age || ""),
          (item?.poultryRequest?.IndexWeight || 0) + " کیلوگرم",
          item?.poultryRequest?.poultry?.address?.province?.name || "",
          item?.poultryRequest?.poultry?.address?.city?.name || "",
          item?.date ? formatTime(item.date) : "",
          auctionState === "برنده شده اید!" ? (
            <Grid container alignItems="center" justifyContent="center">
              {auctionState}
              <Button
                onClick={() => {
                  navigate(
                    ROUTE_SLAUGHTER_FILE + (item?.poultryRequest?.id || "")
                  );
                }}
              >
                ادامه خرید
              </Button>
            </Grid>
          ) : (
            auctionState
          ),
        ];
      })
    );
  }, [auctionSlaughterRequestsData]);

  return (
    <>
      {auctionSlaughterRequestsData &&
        Array.isArray(auctionSlaughterRequestsData) &&
        auctionSlaughterRequestsData.length > 0 && (
          <Grid container gap={SPACING.SMALL} p={SPACING.SMALL} width="100%">
            <AdvancedTable
              name="مزایده های شما"
              columns={[
                "شماره مزایده",
                "کدسفارش",
                "قیمت پیشنهادی شما",
                "تعداد",
                "تاریخ جوجه ریزی",
                "نژاد و سن به روز",
                "وزن",
                "استان",
                "شهرستان",
                "تاریخ ثبت پیشنهاد",
                "وضعیت",
              ]}
              data={tableRows}
            />
          </Grid>
        )}
    </>
  );
};