Switch

import { Label } from "@bosunkit/components/label";
import { SaveChip, type SaveState } from "@bosunkit/components/setting-control";
import { Switch } from "@bosunkit/components/switch";
import { Anchor, BellRing, Moon, Send, Waves, type LucideIcon } from "lucide-react";
import {
  useEffect,
  useId,
  useRef,
  useState,
  type CSSProperties,
  type Dispatch,
  type ReactElement,
  type ReactNode,
  type RefObject,
  type SetStateAction,
} from "react";

export const description: string =
  "The alarms at anchor: a switch that saves as it flips, one that is disabled while the anchor alarm is off, " +
  "one held on by the skipper, and ones that start on and off, each named by its label.";

const SAVE_MILLISECONDS: number = 600;
const SAVED_MILLISECONDS: number = 1800;

const ROW: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "18px minmax(0, 1fr) auto",
  alignItems: "center",
  gap: "4px var(--space-md)",
  padding: "10px 0",
  borderBottom: "1px solid var(--border)",
};
const NOTE: CSSProperties = { gridColumn: 2, fontSize: 12, color: "var(--text-dim)" };

function Setting({
  icon: Icon,
  id,
  name,
  note,
  noteId,
  children,
}: {
  icon: LucideIcon;
  id: string;
  name: string;
  note: string;
  noteId?: string | undefined;
  children: ReactNode;
}): ReactElement {
  return (
    <div style={ROW}>
      <Icon size={16} aria-hidden="true" style={{ color: "var(--text-dim)" }} />
      <Label htmlFor={id} style={{ marginBottom: 0, cursor: "pointer" }}>
        {name}
      </Label>
      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)", gridRow: "span 2" }}>{children}</div>
      <span id={noteId} style={NOTE}>
        {note}
      </span>
    </div>
  );
}

export default function Showcase(): ReactElement {
  const id: string = useId();
  const [anchorAlarm, setAnchorAlarm]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(true);
  const [atNight, setAtNight]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(true);
  const [save, setSave]: [SaveState, Dispatch<SetStateAction<SaveState>>] = useState<SaveState>("idle");
  const timer: RefObject<number | undefined> = useRef<number | undefined>(undefined);

  useEffect((): (() => void) => {
    return (): void => {
      window.clearTimeout(timer.current);
    };
  }, []);

  function flipAnchorAlarm(checked: boolean): void {
    setAnchorAlarm(checked);
    setSave("saving");
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout((): void => {
      setSave("saved");
      timer.current = window.setTimeout((): void => {
        setSave("idle");
      }, SAVED_MILLISECONDS);
    }, SAVE_MILLISECONDS);
  }

  return (
    <div style={{ width: "100%", maxWidth: 560 }}>
      <Setting
        icon={Anchor}
        id={`${id}-anchor`}
        name="Anchor alarm"
        note={anchorAlarm ? "Sounds when SV Althea leaves the 45 m swing radius." : "The anchor is not watched."}
      >
        <SaveChip state={save} />
        <Switch id={`${id}-anchor`} checked={anchorAlarm} onCheckedChange={flipAnchorAlarm} />
      </Setting>
      <Setting
        icon={Moon}
        id={`${id}-night`}
        name="Sound at night"
        noteId={`${id}-night-note`}
        note={
          anchorAlarm
            ? "Plays through the cabin speakers from 22:00 to 06:00, not only in the cockpit."
            : "Turn the anchor alarm on to choose where it sounds at night."
        }
      >
        <Switch
          id={`${id}-night`}
          checked={anchorAlarm && atNight}
          disabled={!anchorAlarm}
          aria-describedby={`${id}-night-note`}
          onCheckedChange={setAtNight}
        />
      </Setting>
      <Setting
        icon={BellRing}
        id={`${id}-skipper`}
        name="Wake the skipper too"
        note="Anneke hears every alarm in the aft cabin, not only the watch leader."
      >
        <Switch id={`${id}-skipper`} defaultChecked />
      </Setting>
      <Setting
        icon={Send}
        id={`${id}-telegram`}
        name="Send alarms to Telegram"
        note="Off: there is no mobile signal at this anchorage, so messages would wait until the next harbor."
      >
        <Switch id={`${id}-telegram`} name="telegram" value="on" />
      </Setting>
      <Setting
        icon={Waves}
        id={`${id}-bilge`}
        name="Bilge water high"
        noteId={`${id}-bilge-note`}
        note="Always on at sea; the skipper set it so. Ask Anneke to change it in harbor."
      >
        <Switch id={`${id}-bilge`} checked disabled aria-describedby={`${id}-bilge-note`} />
      </Setting>
    </div>
  );
}

import { Switch } from "@bosunkit/components/switch";
import type { ReactElement } from "react";

export const description: string = "Off, the thumb rests at the start of the track. A tap turns it on.";

export default function Off(): ReactElement {
  return <Switch aria-label="Anchor alarm" />;
}

import { Switch } from "@bosunkit/components/switch";
import type { ReactElement } from "react";

export const description: string = "On, with defaultChecked, the thumb sits at the end of the track. A tap turns it off.";

export default function On(): ReactElement {
  return <Switch aria-label="Anchor alarm" defaultChecked />;
}

import { Switch } from "@bosunkit/components/switch";
import type { ReactElement } from "react";

export const description: string = "Disabled, the switch is dimmed and takes no tap.";

export default function Disabled(): ReactElement {
  return <Switch aria-label="Anchor alarm" disabled />;
}