rentall-app/frontend/src/components/AvailabilitySettings.tsx

import React from "react";

interface AvailabilityData {
  generalAvailableAfter: string;
  generalAvailableBefore: string;
  specifyTimesPerDay: boolean;
  weeklyTimes: {
    sunday: { availableAfter: string; availableBefore: string };
    monday: { availableAfter: string; availableBefore: string };
    tuesday: { availableAfter: string; availableBefore: string };
    wednesday: { availableAfter: string; availableBefore: string };
    thursday: { availableAfter: string; availableBefore: string };
    friday: { availableAfter: string; availableBefore: string };
    saturday: { availableAfter: string; availableBefore: string };
  };
}

interface AvailabilitySettingsProps {
  data: AvailabilityData;
  onChange: (field: string, value: string | boolean) => void;
  onWeeklyTimeChange: (
    day: string,
    field: "availableAfter" | "availableBefore",
    value: string
  ) => void;
}

const AvailabilitySettings: React.FC<AvailabilitySettingsProps> = ({
  data,
  onChange,
  onWeeklyTimeChange,
}) => {
  const generateTimeOptions = () => {
    const options = [];
    for (let hour = 0; hour < 24; hour++) {
      const time24 = `${hour.toString().padStart(2, "0")}:00`;
      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
      const period = hour < 12 ? "AM" : "PM";
      const time12 = `${hour12}:00 ${period}`;
      options.push({ value: time24, label: time12 });
    }
    return options;
  };

  const handleGeneralChange = (
    e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>
  ) => {
    const { name, value, type } = e.target;
    if (type === "checkbox") {
      const checked = (e.target as HTMLInputElement).checked;
      onChange(name, checked);
    } else {
      onChange(name, value);
    }
  };

  return (
    <div>
      {/* General Times */}
      <div className="row mb-3">
        <div className="col-md-6">
          <label htmlFor="generalAvailableAfter" className="form-label">
            Available After
          </label>
          <select
            className="form-select"
            id="generalAvailableAfter"
            name="generalAvailableAfter"
            value={data.generalAvailableAfter}
            onChange={handleGeneralChange}
            disabled={data.specifyTimesPerDay}
          >
            {generateTimeOptions().map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
        <div className="col-md-6">
          <label htmlFor="generalAvailableBefore" className="form-label">
            Available Before
          </label>
          <select
            className="form-select"
            id="generalAvailableBefore"
            name="generalAvailableBefore"
            value={data.generalAvailableBefore}
            onChange={handleGeneralChange}
            disabled={data.specifyTimesPerDay}
          >
            {generateTimeOptions().map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* Checkbox for day-specific times */}
      <div className="form-check mb-3">
        <input
          type="checkbox"
          className="form-check-input"
          id="specifyTimesPerDay"
          name="specifyTimesPerDay"
          checked={data.specifyTimesPerDay}
          onChange={handleGeneralChange}
        />
        <label className="form-check-label" htmlFor="specifyTimesPerDay">
          Specify times for each day of the week
        </label>
      </div>

      {/* Weekly Times */}
      {data.specifyTimesPerDay && (
        <div className="mt-4">
          <h6>Weekly Schedule</h6>
          {Object.entries(data.weeklyTimes).map(([day, times]) => (
            <div key={day} className="row mb-2">
              <div className="col-md-2">
                <label className="form-label">
                  {day.charAt(0).toUpperCase() + day.slice(1)}
                </label>
              </div>
              <div className="col-md-5">
                <select
                  className="form-select form-select-sm"
                  value={times.availableAfter}
                  onChange={(e) =>
                    onWeeklyTimeChange(day, "availableAfter", e.target.value)
                  }
                >
                  {generateTimeOptions().map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
              <div className="col-md-5">
                <select
                  className="form-select form-select-sm"
                  value={times.availableBefore}
                  onChange={(e) =>
                    onWeeklyTimeChange(day, "availableBefore", e.target.value)
                  }
                >
                  {generateTimeOptions().map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default AvailabilitySettings;