"use client";

import { useEffect, useState } from "react";

import ArrowRightD from "@/components/icons/ArrowRightD";
import { Button } from "@mui/material";
import DownloadD from "@/components/icons/DownloadD";
import Disease from "../tabs/disease";
import Allergies from "../tabs/allergies";
import Medications from "../tabs/medications";
import Surgeries from "../tabs/surgeries";
import FamilyHistory from "../tabs/familyHistory";
import Relatives from "../tabs/relatives";
import HeadTab from "./HeadTab";

import profileData from "@/data/profile_other.json";

const listTab = [
  "بیماری‌ها",
  "آلرژی‌ها",
  "داروهای مصرفی",
  "جراحی‌ها",
  "سابقه خانوادگی بیماری",
  "بستگان",
];

function ContentTabs({
  user,
  value,
  isTurnsDetails,
  setIsTurnsDetails,
  setValue,
  setIsOpenSide,
}) {
  const [tab, setTab] = useState(0);
  const [data, setData] = useState(profileData[0]);

  const handleChange = (_, newValue) => setTab(newValue);
  const changeData = (action, name, id, payload) => {
    const newData = {
      ...data,
      [name]: [...data[name]],
    };

    switch (action) {
      case "update":
        newData[name][id] = payload;
        break;

      case "add":
        newData[name].push(payload);
        break;

      case "delete":
        newData[name].splice(id, 1);
        break;

      default:
        console.warn(`Unknown action: ${action}`);
        return;
    }
    console.log(newData);

    setData(newData);
  };

  const components = [
    <Disease data={data} changeData={changeData} />,
    <Allergies data={data} changeData={changeData} />,
    <Medications data={data} changeData={changeData} />,
    <Surgeries data={data} changeData={changeData} />,
    <FamilyHistory data={data} changeData={changeData} />,
    <Relatives data={data} changeData={changeData} />,
  ];

  return (
    <div
      className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px] 
      shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
      bg-transparent md:bg-[#FFF]"
    >
      <div className="w-full flex items-center justify-between">
        <Button
          className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
          onClick={() =>
            isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
          }
          variant="text"
        >
          <ArrowRightD />
          <p className="text-[#525252] text-[14px] font-bold">
            {isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
          </p>
        </Button>
        {value === 1 && isTurnsDetails ? (
          <Button
            className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
            variant="text"
          >
            <DownloadD />
            دانلود اطلاعات نوبت
          </Button>
        ) : undefined}
      </div>
      <HeadTab
        tab={tab}
        user={user}
        listTab={listTab}
        components={components}
        handleChange={handleChange}
        isTurnsDetails={isTurnsDetails}
        setIsTurnsDetails={setIsTurnsDetails}
      />
    </div>
  );
}

export default ContentTabs;