"use client";

import { useEffect, useState } from "react";
import Hours from "./hours";
import Tabs from "../../Tabs";
import { request } from "@/services/response";
import SendAppo from "./SendAppo";

const listTab = ["صبح", "بعد از ظهر"];
const nameHours = ["hours_morning", "hours_afternoon"];

function DateTime({ date, doctor, setStep, setSelectedSlot, setSelectedDate }) {
  const [value, setValue] = useState(0);
  const [hour, setHour] = useState();
  const [appo, setAppo] = useState("تاریخ مورد نظرتان را انتخاب کنید.");
  const [locationAddress, setLocationAddress] = useState(null);

  const handleChange = (event, newValue) => {
    setHour();
    setValue(newValue);
  };

  // دریافت آدرس بر اساس location_id وقتی ساعت انتخاب می‌شود
  useEffect(() => {
    if (hour && hour.location_id) {
      request
        .getDoctorAddress(hour.location_id)
        .then((res) => {
          setLocationAddress(res.address);
        })
        .catch((err) => {
          console.error("Error fetching address:", err);
          setLocationAddress(null);
        });
    } else {
      setLocationAddress(null);
    }
  }, [hour]);

  useEffect(() => {
    if (date && doctor?.id) {
      setAppo("loading");
      setHour();
      request
        .getAppointment(doctor.id, date)
        .then((res) => {
          setAppo(res);

          // بررسی وجود اسلات‌های available در صبح و عصر
          const hasAvailableMorning = res.morning?.some(slot => slot.status === "available");
          const hasAvailableEvening = res.evening?.some(slot => slot.status === "available");

          // اگر هر دو صبح و عصر اسلات available داشته باشند، صبح را نمایش بده
          if (hasAvailableMorning && hasAvailableEvening) {
            setValue(0);
          }
          // اگر فقط صبح اسلات available داشته باشد
          else if (hasAvailableMorning && !hasAvailableEvening) {
            setValue(0);
          }
          // اگر فقط عصر اسلات available داشته باشد یا هیچ کدام available نداشته باشند، عصر را نمایش بده
          else {
            setValue(1);
          }
        })
        .catch((err) => {
          setAppo("در حال حاضر، نوبتی برای ساعت‌های صبح موجود نمی‌باشد.");
          // در صورت خطا هم عصر را نمایش بده
          setValue(1);
        });
    }
  }, [date, doctor?.id]);

  return (
    <div className="w-full">
      <Tabs
        isSm={true}
        style={{
          ".MuiTabs-indicator": {
            height: "4px",
            borderRadius: "8px",
            background: "#F17732",
          },
          "& .MuiTabs-flexContainer": {
            borderBottom: "2px solid #EFEFEF",
            marginBottom: "1px",
          },
          "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
            color: "#F17732 !important",
          },
          "& .MuiButtonBase-root.Mui-selected": {
            color: "#F17732 !important",
          },
        }}
        value={value}
        listTab={listTab}
        handleChange={handleChange}
      />
      <Hours
        appo={appo}
        hour={hour}
        value={value}
        doctor={doctor}
        setHour={setHour}
        nameHours={nameHours}
        locationAddress={locationAddress}
      />
      <SendAppo
        hour={hour}
        setStep={setStep}
        setSelectedSlot={setSelectedSlot}
        date={date}
        setSelectedDate={setSelectedDate}
      />
    </div>
  );
}

export default DateTime;