import ModalDeleteItem from "@/components/dashboard/userAccount/components/modal/ModalDeleteItem";
import TextLoading from "@/app/component/loading/Text";
import { TableCell, TableRow } from "@mui/material";
import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
import Content from "./modal/Content";
import { useEffect, useState } from "react";

function ItemRelatives({ row, idx, changeData }) {
  const contentData = {
    name: row.name,
    relation: row.relation,
    phone: row.contact.phone,
    address: row.contact.address,
  };

  const [data, setData] = useState(row);
  const resetData = () => setData(row);

  useEffect(() => {
    setData(row);
  }, [row]);

  return (
    <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}>
          {row.relation}
        </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.contact.phone?.replace("+", "")}+`}
        </TextLoading>
      </TableCell>
      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
        {row.contact.address}
      </TableCell>
      <TableCell
        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
        align="right"
      >
        <div className="flex items-center justify-center gap-[4px]">
          <ModalDeleteItem id={idx} name="relatives" changeData={changeData} />
          <ModalEditItem
            id={idx}
            data={data}
            name="relatives"
            title="داروی مصرفی"
            resetData={resetData}
            changeData={changeData}
          >
            <Content data={data} setData={setData} />
          </ModalEditItem>
        </div>
      </TableCell>
    </TableRow>
  );
}

export default ItemRelatives;