import { Trans, useLingui } from "@lingui/react/macro";
import type { UserFact, UserFactCategory } from "@rakazo/contracts";
import { USER_FACT_CATEGORIES, USER_FACT_VALUE_MAX_LENGTH } from "@rakazo/contracts";
import {
  Button,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Input,
  NativeSelect,
  NativeSelectOption,
} from "@rakazo/ui-web";
import { ChevronDownIcon } from "lucide-react";
import { useState } from "react";
import type { UserFactDraft } from "../lib/user-profile-view";
import { factSpaceNames, toggleFactSpace, userFactDraft } from "../lib/user-profile-view";

/** Edits one fact in place: its wording, category and, with more than one space, where it shows. */
export function UserFactEditor({
  fact,
  spaces,
  categoryLabels,
  busy,
  onSave,
  onCancel,
}: {
  fact: UserFact;
  /** The user's spaces; the visibility control appears with more than one. */
  spaces: ReadonlyArray<{ id: string; name: string }>;
  categoryLabels: Record<UserFactCategory, string>;
  busy: boolean;
  onSave: (draft: UserFactDraft) => void;
  onCancel: () => void;
}) {
  const { t } = useLingui();
  const [draft, setDraft] = useState(() => userFactDraft(fact));
  const allSpaces = t`All spaces`;
  const showSpaces = spaces.length > 1 || draft.spaceIds !== null;

  return (
    <li data-testid="user-fact-editor">
      <form
        className="space-y-2"
        onSubmit={(event) => {
          event.preventDefault();
          if (draft.value.trim()) onSave(draft);
        }}
        onKeyDown={(event) => {
          // The spaces menu renders in a portal; its Escape only closes the menu.
          if (event.key === "Escape" && event.currentTarget.contains(event.target as Node)) {
            event.stopPropagation();
            onCancel();
          }
        }}
      >
        <Input
          autoFocus
          aria-label={t`Fact`}
          value={draft.value}
          maxLength={USER_FACT_VALUE_MAX_LENGTH}
          onChange={(event) => setDraft({ ...draft, value: event.target.value })}
        />
        <div className="flex flex-wrap items-center gap-2">
          <NativeSelect
            className="*:data-[slot=native-select]:h-control-md"
            aria-label={t`Category`}
            value={draft.category}
            onChange={(event) =>
              setDraft({ ...draft, category: event.target.value as UserFactCategory })
            }
          >
            {USER_FACT_CATEGORIES.map((category) => (
              <NativeSelectOption key={category} value={category}>
                {categoryLabels[category]}
              </NativeSelectOption>
            ))}
          </NativeSelect>
          {showSpaces ? (
            <DropdownMenu>
              <DropdownMenuTrigger
                render={<Button type="button" variant="outline" className="max-w-56" />}
              >
                <span className="truncate">
                  {factSpaceNames(draft.spaceIds, spaces).join(", ") || allSpaces}
                </span>
                <ChevronDownIcon aria-hidden="true" />
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-auto min-w-44">
                <DropdownMenuCheckboxItem
                  checked={draft.spaceIds === null}
                  onCheckedChange={() => setDraft({ ...draft, spaceIds: null })}
                >
                  {allSpaces}
                </DropdownMenuCheckboxItem>
                <DropdownMenuSeparator />
                {spaces.map((space) => (
                  <DropdownMenuCheckboxItem
                    key={space.id}
                    checked={draft.spaceIds?.includes(space.id) ?? false}
                    onCheckedChange={(checked) =>
                      setDraft({
                        ...draft,
                        spaceIds: toggleFactSpace(draft.spaceIds, space.id, checked),
                      })
                    }
                  >
                    <span className="truncate" dir="auto">
                      {space.name}
                    </span>
                  </DropdownMenuCheckboxItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          ) : null}
          <div className="ms-auto flex items-center gap-1">
            <Button type="button" variant="ghost" disabled={busy} onClick={onCancel}>
              <Trans>Cancel</Trans>
            </Button>
            <Button type="submit" disabled={busy || !draft.value.trim()}>
              <Trans>Save</Trans>
            </Button>
          </div>
        </div>
      </form>
    </li>
  );
}