import CustomTable from "@/app/component/CustomTable";
import TextLoading from "@/app/component/loading/Text";
import { Switch, TableCell, TableRow } from "@mui/material";
import Head from "@/components/dashboard/userAccount/components/Head";
import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";

function Disease({ data, setData, updateData, loading }) {
  const disease = data && data.other && data.other.disease;
  const tableHead = ["ردیف", "اسم", "وضعیت", ""];
  const centerTable = [0];

  const changeData = (id, payload) => {
    const newDisease = data.other.disease?.map((item, index) =>
      index === id ? { ...item, status: payload } : item
    );

    const newData = {
      ...data,
      other: {
        ...data.other,
        disease: newDisease,
      },
    };

    setData(newData);
  };

  return (
    <div className="opacity-page">
      <Head text="لیست بیماری ها" add={false}>
        <UpdateBtn updateData={updateData} loading={loading} />
      </Head>
      <CustomTable
        zeroRadius={true}
        tableHead={tableHead}
        centerTable={centerTable}
      >
        {disease?.map((row, idx) => (
          <TableRow
            key={idx}
            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
          >
            <TableCell
              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
              align="center"
            >
              <TextLoading width={15} height={18} loading={false}>
                {idx + 1}
              </TextLoading>
            </TableCell>
            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
              <TextLoading width={15} height={18} loading={false}>
                {row.name}
              </TextLoading>
            </TableCell>
            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
              <TextLoading width={15} height={18} loading={false}>
                <Switch
                  checked={row.status === "true" || row.status === true}
                  onChange={(e) => {
                    changeData(idx, JSON.stringify(e.target.checked));
                  }}
                />
              </TextLoading>
            </TableCell>
          </TableRow>
        ))}
      </CustomTable>
    </div>
  );
}

export default Disease;
