import { useState } from "react";
import ModalAddTime from "./modal/ModalAddTime";
import {
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from "@mui/material";
import ContentModal from "./modal";
import EditOrangeAD from "@/components/icons/EditOrangeAD";

function List({ parent, data, setData }) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const [dataChange, setDataChange] = useState({
    is_morgen: false,
    idx: undefined,
  });

  return (
    <div className="w-full flex justify-center table-profile-page">
      <TableContainer
        className="!mt-[40px] md:!mt-[36px] lg:!mt-[32px] !w-fit"
        sx={{
          "&.MuiTableContainer-root": {
            boxShadow: "none !important",
            border: "none !important",
          },
        }}
      >
        <Table>
          <TableHead className="!py-2">
            <TableRow className="!bg-[#EFEFEF] !py-2 dark:!bg-[#343645]">
              <TableCell
                className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
                align="left"
              >
                روز های هفته
              </TableCell>
              <TableCell
                className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
                align="left"
              >
                تایم صبح
              </TableCell>
              <TableCell
                className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
                align="left"
              >
                تایم عصر
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((row, idx) => (
              <TableRow
                key={row.name}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell
                  className="!border-[1px] !border-[#DBDBDB] dark:!text-[#A1A1A1]"
                  component="th"
                  scope="row"
                >
                  {row.name}
                </TableCell>
                <TableCell
                  className="!border-[1px] !text-[#616161] dark:!text-[#D7D8ED] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
                  align="right"
                >
                  {row.morning_time[0] || row.morning_time[1] ? (
                    <Button
                      onClick={() => {
                        handleOpen();
                        setDataChange({
                          is_morgen: true,
                          idx,
                        });
                      }}
                      className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
                    >
                      {row.morning_time[0] === "تعطیل"
                        ? row.morning_time[0]
                        : `${row.morning_time[0]} - ${row.morning_time[1]}`}
                      <EditOrangeAD />
                    </Button>
                  ) : (
                    <ModalAddTime
                      setDataChange={setDataChange}
                      handleOpen={handleOpen}
                      setData={setData}
                      isMorgen={true}
                      idx={idx}
                    />
                  )}
                </TableCell>
                <TableCell
                  className="!border-[1px] !text-[#616161] dark:!text-[#D7D8ED] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
                  align="right"
                >
                  {row.evening_time[0] || row.evening_time[1] ? (
                    <Button
                      onClick={() => {
                        handleOpen();
                        setDataChange({
                          is_morgen: false,
                          idx,
                        });
                      }}
                      className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
                    >
                      {row.morning_time[0] === "تعطیل"
                        ? row.morning_time[0]
                        : `${row.evening_time[0]} - ${row.evening_time[1]}`}
                      <EditOrangeAD />
                    </Button>
                  ) : (
                    <ModalAddTime
                      setDataChange={setDataChange}
                      handleOpen={handleOpen}
                      setData={setData}
                      isMorgen={false}
                      idx={idx}
                    />
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <ContentModal
        open={open}
        data={data}
        parent={parent}
        setOpen={setOpen}
        setData={setData}
        dataChange={dataChange}
        handleClose={handleClose}
      />
    </div>
  );
}

export default List;
