import CustomTable from "@/app/component/CustomTable";
import ArrowLeftBlueD from "@/components/icons/ArrowLeftBlueD";
import { Button, TableCell, TableRow } from "@mui/material";
import Image from "next/image";
import Card from "./Card";
import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";
import Pagination from "@/app/component/Pagination";
import { convertTimestampToJalali, convertTimestampToTime } from "@/helper";

function List({ user, loading, setIsTurnsDetails, page, totalPages, onPageChange }) {
  const tableHead = [
    "ردیف",
    "نام پزشک",
    "تخصص",
    "تاریخ",
    "ساعت",
    "عملیات",
  ];
  const centerTable = [0, 4];

  return (
    <div className="!mt-[24px]">
      <div className="hidden lg:block">
        <CustomTable tableHead={tableHead} centerTable={centerTable}>
          {user.map((row, idx) => (
            <TableRow
              key={idx}
              className="!border-0 !border-b !border-[#DBDBDB]"
            >
              <TableCell className="!pr-[18px] !text-nowrap" align="center">
                <TextLoading width={15} height={18} loading={loading}>
                  {(page - 1) * 10 + idx + 1}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!pr-[18px] !text-nowrap"
                component="th"
                scope="row"
              >
                <TextLoading width={120} height={18} loading={loading}>
                  {row.doctor?.name || "--"}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={100} height={18} loading={loading}>
                  {row.doctor?.specialty?.name || "--"}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={80} height={18} loading={loading}>
                  {convertTimestampToJalali(row.start_time)}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.slot?.time || convertTimestampToTime(row.start_time)}
                </TextLoading>
              </TableCell>
              <TableCell className="!pr-[18px] !text-nowrap" align="right">
                <CustomLoading width={80} height={22} loading={loading}>
                  <Button
                    className="!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]"
                    onClick={() => setIsTurnsDetails(row)}
                    variant="text"
                  >
                    مشاهده جزئیات
                    <ArrowLeftBlueD />
                  </Button>
                </CustomLoading>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
      <ul className="flex flex-col lg:hidden gap-[24px]">
        {user.map((item, idx) => (
          <Card
            key={idx}
            data={item}
            loading={loading}
            setIsTurnsDetails={setIsTurnsDetails}
          />
        ))}
      </ul>
      {totalPages > 1 && (
        <div className="flex justify-center mt-[32px] w-full">
          <Pagination
            page={page}
            totalPages={totalPages}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </div>
  );
}

export default List;