import { useNavigate } from "@tanstack/react-router";
import { renameAccount } from "~/fns/profile";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";

export function RenamePanel({ account, hasPassword }: { account: string; hasPassword: boolean }) {
  const rename = useAction(renameAccount, { invalidate: false });
  const navigate = useNavigate();
  return (
    <Panel tone="danger" title="Change username">
      <form
        method="post"
        className="space-y-3 p-4 text-sm"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const result = await rename.run({
            data: { account, newName: String(form.get("newName") ?? ""), password: String(form.get("password") ?? "") },
          });
          if (result) await navigate({ to: "/$owner", params: { owner: result.name }, reloadDocument: true });
        }}
      >
        <ErrorBanner message={rename.error} />
        <p className="text-kumo-subtle">
          Links and git remotes using <span className="font-mono text-kumo-default">{account}</span> keep redirecting
          until someone else claims the name.
        </p>
        <TextField label="New username" name="newName" required maxLength={39} />
        {hasPassword && (
          <TextField
            label="Current password"
            name="password"
            type="password"
            autoComplete="current-password"
            required
          />
        )}
        <Button type="submit" variant="danger" pending={rename.pending}>
          Change username
        </Button>
      </form>
    </Panel>
  );
}