"use client";
// A linked account's two settings, saved as soon as they're switched.
import { useOptimistic, useState, useTransition } from "react";
import { FormMessage } from "@/components/forms";
import { Switch } from "@/components/ui/switch";
import type { ActionState } from "@/lib/actions";
import { saveSettings } from "./actions";

type Settings = { showBadge: boolean; showPresence: boolean; listRooms: boolean };

export function LinkSettings({ imvuId, ...saved }: Settings & { imvuId: number }) {
  const [settings, setOptimistic] = useOptimistic(saved);
  const [state, setState] = useState<ActionState>(null);
  const [pending, startTransition] = useTransition();

  const change = (key: keyof Settings) => (value: boolean) =>
    startTransition(async () => {
      setOptimistic({ ...settings, [key]: value });
      setState(await saveSettings(imvuId, { [key]: value }));
    });

  return (
    <div className="space-y-3">
      <label className="flex items-center gap-3 text-sm">
        <Switch checked={settings.showBadge} onCheckedChange={change("showBadge")} disabled={pending} />
        Show T5DE badge
      </label>
      <label className="flex items-center gap-3 text-sm">
        <Switch checked={settings.showPresence} onCheckedChange={change("showPresence")} disabled={pending} />
        Show when I&apos;m online in T5DE
      </label>
      <label className="flex items-center gap-3 text-sm">
        <Switch checked={settings.listRooms} onCheckedChange={change("listRooms")} disabled={pending} />
        List my public rooms
      </label>
      <FormMessage state={state} />
    </div>
  );
}