"use client";

import { useState } from "react";

// Tabs
import ListMenu from "./listMenu";
import Turns from "./listMenu/turns";
import SpecialDays from "./listMenu/specialDays";
import WorkingDays from "./listMenu/workingDays";
import OfficeInformation from "./listMenu/officeInformation";
import GeneralInformation from "./listMenu/generalInformation";
import ArrowRightPH from "@/components/icons/ArrowRightPH";
import { Button } from "@mui/material";

const listTab = [
  "اطلاعات عمومی",
  "اطلاعات مطب",
  "نوبت ها",
  "روزهای کاری",
  "روزهای خاص",
];

function AddDoctorPage() {
  const [value, setValue] = useState(3);
  const [open, setOpen] = useState(false);

  const handleChange = (event, newValue) => setValue(newValue);

  const components = [
    <GeneralInformation />,
    <OfficeInformation />,
    <Turns />,
    <WorkingDays />,
    <SpecialDays />,
  ];

  return (
    <div className="opacity-page">
      <p className="text-[#525252] text-[20px] font-bold hidden md:flex">
        پروفایل من
      </p>
      <Button
        onClick={() => setOpen(true)}
        className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
      >
        <ArrowRightPH />
        <p className="text-[#525252] text-[14px] font-bold">{listTab[value]}</p>
      </Button>
      <div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
        <ListMenu
          open={open}
          value={value}
          listTab={listTab}
          setOpen={setOpen}
          handleChange={handleChange}
        />
        <div
          className={`mt-[24px] ${
            value !== 4 ? "mx-0 md:-[14px] lg:mx-[26px] xl:mx-[56px]" : "mx-0"
          }`}
        >
          {components[value]}
        </div>
      </div>
    </div>
  );
}

export default AddDoctorPage;