"use client";

import { useActionState } from "react";
import type { PROFILE_TYPES } from "@/lib/roles";

type State = { error?: string; notice?: string } | null;

export function AuthForm({
  action,
  submitLabel,
  types,
  next,
}: {
  action: (state: State, formData: FormData) => Promise<State>;
  submitLabel: string;
  types?: typeof PROFILE_TYPES;
  next?: string;
}) {
  const [state, formAction, pending] = useActionState(action, null);

  return (
    <form action={formAction} className="auth-form">
      {next ? <input type="hidden" name="next" value={next} /> : null}
      {types ? (
        <fieldset className="auth-form__block">
          <legend>On the floor as</legend>
          <div>
            <label className="eg-label" htmlFor="name">
              Full name
            </label>
            <input id="name" name="name" required autoComplete="name" />
          </div>
          <div>
            <label className="eg-label" htmlFor="type">
              Craft
            </label>
            <select id="type" name="type" defaultValue="collector">
              {types.map((type) => (
                <option key={type.value} value={type.value}>
                  {type.label}
                </option>
              ))}
            </select>
          </div>
          <div className="auth-form__pair">
            <div>
              <label className="eg-label" htmlFor="company">
                Company
              </label>
              <input id="company" name="company" />
            </div>
            <div>
              <label className="eg-label" htmlFor="country">
                Country
              </label>
              <input id="country" name="country" />
            </div>
          </div>
          <div>
            <label className="eg-label" htmlFor="specialties">
              Specialties
            </label>
            <input id="specialties" name="specialties" placeholder="Colombian emeralds, sapphires…" />
          </div>
        </fieldset>
      ) : null}
      <fieldset className="auth-form__block">
        {types ? <legend>Sign in details</legend> : null}
        <div>
          <label className="eg-label" htmlFor="email">
            Email
          </label>
          <input id="email" name="email" type="email" required autoComplete="email" />
        </div>
        <div>
          <label className="eg-label" htmlFor="password">
            Password
          </label>
          <input
            id="password"
            name="password"
            type="password"
            required
            autoComplete={types ? "new-password" : "current-password"}
          />
        </div>
      </fieldset>
      {state?.error ? <p className="auth-form__error">{state.error}</p> : null}
      {state?.notice ? <p className="auth-form__notice">{state.notice}</p> : null}
      <button className="eg-btn eg-btn-solid" disabled={pending} type="submit">
        {pending ? "Please wait…" : submitLabel}
      </button>
    </form>
  );
}