import { useState } from "react";
import Hour from "./hour";
import Time from "./Time";

function Date({
  doctor,
  setStep,
  disabledDates,
  setSelectedSlot,
  setSelectedDate,
  serviceMode = false,
  selectedServiceUuids = [],
  onChangeService,
}) {
  const [locateVisit, setLocateVisit] = useState(true);
  const [date, setDate] = useState();

  return (
    <div className="w-full lg:w-[61%]">
      <div
        className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]"
      >
        {serviceMode && onChangeService && (
          <button
            type="button"
            onClick={onChangeService}
            className="mb-3 text-[13px] text-[#5559CE] hover:underline"
          >
            ← تغییر سرویس
          </button>
        )}
        <Time
          setDate={setDate}
          locateVisit={locateVisit}
          isStep={doctor?.multiwork ? locateVisit : true}
          disabledDates={disabledDates}
        />
        <Hour
          isStep={doctor?.multiwork ? locateVisit : true}
          setLocateVisit={setLocateVisit}
          locateVisit={locateVisit}
          setStep={setStep}
          doctor={doctor}
          date={date}
          setSelectedSlot={setSelectedSlot}
          setSelectedDate={setSelectedDate}
          serviceMode={serviceMode}
          selectedServiceUuids={selectedServiceUuids}
        />
      </div>
    </div>
  );
}

export default Date;
