calcom/components/booking/TimeOptions.tsx

// TODO: replace headlessui with radix-ui
import { Switch } from "@headlessui/react";
import { FC, useEffect, useState } from "react";
import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";

import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale";

import { is24h, timeZone } from "../../lib/clock";

type Props = {
  localeProp: string;
  onSelectTimeZone: (selectedTimeZone: string) => void;
  onToggle24hClock: (is24hClock: boolean) => void;
};

const TimeOptions: FC<Props> = (props) => {
  const [selectedTimeZone, setSelectedTimeZone] = useState("");
  const [is24hClock, setIs24hClock] = useState(false);
  const { t } = useLocale({ localeProp: props.localeProp });

  useEffect(() => {
    setIs24hClock(is24h());
    setSelectedTimeZone(timeZone());
  }, []);

  useEffect(() => {
    if (selectedTimeZone && timeZone() && selectedTimeZone !== timeZone()) {
      props.onSelectTimeZone(timeZone(selectedTimeZone));
    }
  }, [selectedTimeZone]);

  const handle24hClockToggle = (is24hClock: boolean) => {
    setIs24hClock(is24hClock);
    props.onToggle24hClock(is24h(is24hClock));
  };

  return selectedTimeZone !== "" ? (
    <div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 dark:bg-gray-700 dark:border-0 bg-white px-4 py-2">
      <div className="flex mb-4">
        <div className="w-1/2 dark:text-white text-gray-600 font-medium">{t("time_options")}</div>
        <div className="w-1/2">
          <Switch.Group as="div" className="flex items-center justify-end">
            <Switch.Label as="span" className="mr-3">
              <span className="text-sm dark:text-white text-gray-500">{t("am_pm")}</span>
            </Switch.Label>
            <Switch
              checked={is24hClock}
              onChange={handle24hClockToggle}
              className={classNames(
                is24hClock ? "bg-black" : "dark:bg-gray-600 bg-gray-200",
                "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
              )}>
              <span className="sr-only">{t("use_setting")}</span>
              <span
                aria-hidden="true"
                className={classNames(
                  is24hClock ? "translate-x-3" : "translate-x-0",
                  "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                )}
              />
            </Switch>
            <Switch.Label as="span" className="ml-3">
              <span className="text-sm dark:text-white text-gray-500">{t("24_h")}</span>
            </Switch.Label>
          </Switch.Group>
        </div>
      </div>
      <TimezoneSelect
        id="timeZone"
        value={selectedTimeZone}
        onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
        className="mb-2 shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
      />
    </div>
  ) : null;
};

export default TimeOptions;