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,
  resourceUuid = null,
  onChangeLocation,
  onChangeResource,
  onDateChange,
  closedOnDate = false,
}) {
  const [date, setDate] = useState();

  const pickDate = (value) => {
    setDate(value);
    onDateChange?.(value);
  };

  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 || onChangeResource || (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>
            )}
            {onChangeResource && (
              <button
                type="button"
                onClick={onChangeResource}
                className="text-[13px] text-[#5559CE] hover:underline"
              >
                ← تغییر نوع نوبت
              </button>
            )}
            {serviceMode && onChangeService && (
              <button
                type="button"
                onClick={onChangeService}
                className="text-[13px] text-[#5559CE] hover:underline"
              >
                ← تغییر سرویس
              </button>
            )}
          </div>
        )}
        {closedOnDate && (
          <div className="mb-3 rounded-[8px] border border-solid border-[#F17732] bg-[rgba(241,119,50,0.08)] p-[12px]">
            <p className="text-[13px] text-[#B4541F] leading-relaxed">
              «{selectedLocation?.title}» در روز انتخاب‌شده نوبت‌دهی ندارد.
              {onChangeLocation && (
                <button
                  type="button"
                  onClick={onChangeLocation}
                  className="mr-1 font-medium text-[#5559CE] hover:underline"
                >
                  انتخاب محل دیگر
                </button>
              )}
            </p>
          </div>
        )}
        <Time
          setDate={pickDate}
          isStep
          disabledDates={disabledDates}
          clinicUuid={clinicUuid}
          resourceUuid={resourceUuid}
          selectedServiceUuids={selectedServiceUuids}
        />
        <Hour
          isStep
          setStep={setStep}
          doctor={doctor}
          date={date}
          setSelectedSlot={setSelectedSlot}
          setSelectedDate={setSelectedDate}
          serviceMode={serviceMode}
          selectedServiceUuids={selectedServiceUuids}
          clinicUuid={clinicUuid}
          resourceUuid={resourceUuid}
          selectedLocation={selectedLocation}
        />
      </div>
    </div>
  );
}

export default Date;