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

function Date({
  doctor,
  setStep,
  disabledDates,
  setSelectedSlot,
  setSelectedDate,
  serviceMode = false,
  selectedServiceUuids = [],
  onChangeService,
  selectedLocation = null,
  clinicUuid = null,
  onChangeLocation,
}) {
  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]"
      >
        {(onChangeLocation || (serviceMode && onChangeService)) && (
          <div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1">
            {onChangeLocation && (
              <button
                type="button"
                onClick={onChangeLocation}
                className="text-[13px] text-[#5559CE] hover:underline"
              >
                ← تغییر محل{selectedLocation?.title ? ` (${selectedLocation.title})` : ""}
              </button>
            )}
            {serviceMode && onChangeService && (
              <button
                type="button"
                onClick={onChangeService}
                className="text-[13px] text-[#5559CE] hover:underline"
              >
                ← تغییر سرویس
              </button>
            )}
          </div>
        )}
        <Time
          setDate={setDate}
          isStep
          disabledDates={disabledDates}
          clinicUuid={clinicUuid}
        />
        <Hour
          isStep
          setStep={setStep}
          doctor={doctor}
          date={date}
          setSelectedSlot={setSelectedSlot}
          setSelectedDate={setSelectedDate}
          serviceMode={serviceMode}
          selectedServiceUuids={selectedServiceUuids}
          clinicUuid={clinicUuid}
          selectedLocation={selectedLocation}
        />
      </div>
    </div>
  );
}

export default Date;