import { useId, useState } from "react";
import type { ApiSettings, LoginResponse } from "../../types";
import { login } from "../../api/auth";
import Button from "../../components/Button";
import Dialog from "../../components/Dialog";
import FormField from "../../components/FormField";
import PasswordField from "../../components/PasswordField";
import DismissibleAlert from "../../components/DismissibleAlert";

export default function LoginModal({
  settings,
  onClose,
  onLogin,
  title = "i18n:govoplan-core.sign_in.ada2e9e9",
  message






}: {settings: ApiSettings;onClose: () => void;onLogin: (response: LoginResponse) => void;title?: string;message?: string;}) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const formId = useId();

  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setError("");
    setBusy(true);
    try {
      const response = await login(settings, { email, password });
      onLogin(response);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Dialog
      open
      title={title}
      onClose={onClose}
      footer={
      <>
          <Button type="button" onClick={onClose}>i18n:govoplan-core.cancel.77dfd213</Button>
          <Button type="submit" form={formId} variant="primary" disabled={busy}>{busy ? "i18n:govoplan-core.signing_in.c66b2adc" : "i18n:govoplan-core.sign_in.ada2e9e9"}</Button>
        </>
      }>
      
      <form id={formId} className="form-grid" onSubmit={submit}>
        {message && <DismissibleAlert tone="info" dismissible={false}>{message}</DismissibleAlert>}
        {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
        <FormField label="i18n:govoplan-core.email.84add5b2">
          <input type="email" value={email} autoComplete="username" onChange={(e) => setEmail(e.target.value)} />
        </FormField>
        <FormField label="i18n:govoplan-core.password.8be3c943">
          <PasswordField value={password} autoComplete="current-password" onValueChange={setPassword} />
        </FormField>
      </form>
    </Dialog>);

}