import {Switch} from "@headlessui/react";
import TimezoneSelect from "react-timezone-select";
import {useEffect, useState} from "react";
import {timeZone, is24h} from '../../lib/clock';

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

const TimeOptions = (props) => {
  const [selectedTimeZone, setSelectedTimeZone] = useState('');
  const [is24hClock, setIs24hClock] = useState(false);
  const [isReady, setIsReady ] = useState(false);

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

  useEffect( () => {
    if (!isReady) {
      return;
    }
    if (selectedTimeZone && selectedTimeZone !== timeZone()) {
      props.onSelectTimeZone(selectedTimeZone)
    }
    if ([true,false].includes(is24h()) && is24hClock !== is24h()) {
      props.onToggle24hFormat(is24hClock);
    }
  }, [is24hClock, selectedTimeZone]);

  return isReady && (
    <div className="w-full rounded shadow border bg-white px-4 py-2">
      <div className="flex mb-4">
        <div className="w-1/2 font-medium">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 text-gray-500">am/pm</span>
            </Switch.Label>
            <Switch
              checked={is24hClock}
              onChange={setIs24hClock}
              className={classNames(
                is24hClock ? "bg-blue-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-blue-500"
              )}
            >
              <span className="sr-only">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 text-gray-500">24h</span>
            </Switch.Label>
          </Switch.Group>
        </div>
      </div>
      <TimezoneSelect
        id="timeZone"
        value={selectedTimeZone}
        onChange={(tz) => setSelectedTimeZone(tz.value)}
        className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
      />
    </div>
  );
}

export default TimeOptions;