"use client";

import { useState } from "react";
import Hours from "./Hours";
import Tabs from "../../Tabs";
import { Button } from "@mui/material";
import ArrowLeftB from "@/components/icons/ArrowLeftB";

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

function DateTime({ doctor, setStep, setIsError, locateVisit }) {
  const [value, setValue] = useState(0);
  const [hour, setHour] = useState(0);

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

  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
        hour={hour}
        value={value}
        doctor={doctor}
        setHour={setHour}
        nameHours={nameHours}
      />
      <div className="w-full flex justify-end">
        <Button
          className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
          onClick={() => {
            if (locateVisit) {
              localStorage.setItem("doctor-id", doctor?.id);
              setStep((prev) => prev + 1);
            } else {
              setIsError(true);
            }
          }}
          variant="contained"
        >
          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
          <ArrowLeftB />
        </Button>
      </div>
    </div>
  );
}

export default DateTime;