"use client";

import { useState } from "react";

// Tabs
import WorkingDays from "./listMenu/workingDays";
import OfficeInformation from "./listMenu/officeInformation";
import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step";

function AddDoctorPage() {
  const [value, setValue] = useState(0);
  const [data, setData] = useState({
    general: {
      name: { value: "احسان احمدی", isEdit: false },
      medical_system_number: { value: 1741025645, isEdit: false },
      expertise: { value: "دندان پزشکی", isEdit: false },
      description: { value: "", isEdit: false },
      skills: { value: "", isEdit: false },
      time_work: { value: "", isEdit: false },
      degree: { value: "", isEdit: false },
    },
    office: {
      address: { value: "", isEdit: false },
      phone: { value: 1741025645, isEdit: false },
      office_number1: { value: "", isEdit: false },
      office_number2: { value: "", isEdit: false },
    },
    work_day: [
      { name: "شنبه", morning_time: ["", ""], evening_time: ["", ""] },
      { name: "یکشنبه", morning_time: ["", ""], evening_time: ["", ""] },
      { name: "دوشنبه", morning_time: ["", ""], evening_time: ["", ""] },
      { name: "سه شنبه", morning_time: ["", ""], evening_time: ["", ""] },
      { name: "چهار شنبه", morning_time: ["", ""], evening_time: ["", ""] },
      { name: "پنج شنبه", morning_time: ["", ""], evening_time: ["", ""] },
    ],
  });

  const components = [
    <GeneralInformation
      parent="general"
      data={data}
      setData={setData}
      setValue={setValue}
    />,
    <OfficeInformation data={data} setData={setData} setValue={setValue} />,
    <WorkingDays data={data} setData={setData} setValue={setValue} />,
  ];

  console.log(data);

  return (
    <div className="opacity-page">
      <p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
        پروفایل من
      </p>
      <div
        className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] 
        md:dark:bg-[#222433] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-none pt-0 
        md:pt-[30px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]"
      >
        <Step value={value} />
        <div className="mt-[32px] px-[56px]">{components[value]}</div>
      </div>
    </div>
  );
}

export default AddDoctorPage;