"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: "", placeholder: "", isEdit: true },
      medical_system_number: {
        value: "",
        placeholder: 1741025645,
        isEdit: true,
      },
      expertise: { value: "", placeholder: "دندان پزشکی", isEdit: true },
      description: { value: "", isEdit: true },
      skills: { value: "", isEdit: true },
      time_work: { value: "", isEdit: true },
      degree: { value: "", isEdit: true },
    },
    office: {
      address: { value: "مپ", isEdit: true },
      phone: { value: "", placeholder: 1741025645, isEdit: true },
      office_number1: { value: "", isEdit: true },
      office_number2: { value: "", isEdit: true },
      state: { value: "", isEdit: true },
      city: { value: "", isEdit: true },
    },
    work_day: [
      {
        name: "شنبه",
        number_turns: { value: 1, isEdit: true },
        turn_time: "",
        workplace: "",
        morning_time: ["", ""],
        evening_time: ["", ""],
      },
      {
        name: "یکشنبه",
        number_turns: { value: 1, isEdit: true },
        turn_time: "",
        workplace: "",
        morning_time: ["", ""],
        evening_time: ["", ""],
      },
      {
        name: "دوشنبه",
        number_turns: { value: 1, isEdit: true },
        turn_time: "",
        workplace: "",
        morning_time: ["", ""],
        evening_time: ["", ""],
      },
      {
        name: "سه شنبه",
        number_turns: { value: 1, isEdit: true },
        turn_time: "",
        workplace: "",
        morning_time: ["", ""],
        evening_time: ["", ""],
      },
      {
        name: "چهار شنبه",
        number_turns: { value: 1, isEdit: true },
        turn_time: "",
        workplace: "",
        morning_time: ["", ""],
        evening_time: ["", ""],
      },
      {
        name: "پنج شنبه",
        number_turns: { value: 1, isEdit: true },
        turn_time: "",
        workplace: "",
        morning_time: ["", ""],
        evening_time: ["", ""],
      },
    ],
  });

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

  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-[24px] md:mt-[28px] lg:mt-[32px]">
          {components[value]}
        </div>
      </div>
    </div>
  );
}

export default AddDoctorPage;