import type { FormEvent } from 'react';
import { LockKeyhole, Mail, MapPin, User } from 'lucide-react';
import { AuthInput } from './AuthInput';

interface RegisterViewProps {
  email: string;
  firstName: string;
  lastName: string;
  loading: boolean;
  locationQuery: string;
  locationSuggestions: Array<{ description: string; placeId: string }>;
  onBackToLogin: () => void;
  onChangeEmail: (value: string) => void;
  onChangeFirstName: (value: string) => void;
  onChangeLastName: (value: string) => void;
  onChangeLocationQuery: (value: string) => void;
  onChangePassword: (value: string) => void;
  onSelectLocation: (placeId: string, fallbackDescription: string) => Promise<void>;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  password: string;
}

export function RegisterView({
  email,
  firstName,
  lastName,
  loading,
  locationQuery,
  locationSuggestions,
  onBackToLogin,
  onChangeEmail,
  onChangeFirstName,
  onChangeLastName,
  onChangeLocationQuery,
  onChangePassword,
  onSelectLocation,
  onSubmit,
  password,
}: RegisterViewProps) {
  return (
    <div className="auth-view view-enter">
      <div className="auth-head auth-head-center">
        <h1>Opret konto</h1>
        <p>Start din karriere-rejse med os i dag.</p>
      </div>

      <form className="auth-form" onSubmit={onSubmit}>
        <AuthInput
          icon={<User size={16} strokeWidth={1.8} />}
          label="Fornavn"
          type="text"
          placeholder="Lasse"
          value={firstName}
          onChange={(event) => onChangeFirstName(event.target.value)}
          required
        />

        <AuthInput
          icon={<User size={16} strokeWidth={1.8} />}
          label="Efternavn"
          type="text"
          placeholder="Hansen"
          value={lastName}
          onChange={(event) => onChangeLastName(event.target.value)}
          required
        />

        <AuthInput
          icon={<Mail size={16} strokeWidth={1.8} />}
          label="E-mail"
          type="email"
          placeholder="navn@eksempel.dk"
          value={email}
          onChange={(event) => onChangeEmail(event.target.value)}
          required
        />

        <AuthInput
          icon={<LockKeyhole size={16} strokeWidth={1.8} />}
          label="Adgangskode"
          type="password"
          placeholder="Skab en staerk kode"
          value={password}
          onChange={(event) => onChangePassword(event.target.value)}
          required
          minLength={8}
        />

        <label className="auth-field">
          <span>Lokation</span>
          <div className="auth-input-wrap">
            <span className="auth-input-icon" aria-hidden>
              <MapPin size={16} strokeWidth={1.8} />
            </span>
            <input
              type="text"
              placeholder="Soeg by eller adresse"
              value={locationQuery}
              onChange={(event) => onChangeLocationQuery(event.target.value)}
              autoComplete="off"
              required
            />
          </div>
          {locationSuggestions.length > 0 ? (
            <div className="location-suggestions">
              {locationSuggestions.map((item) => (
                <button
                  key={item.placeId}
                  type="button"
                  className="location-suggestion-item"
                  onClick={() => void onSelectLocation(item.placeId, item.description)}
                >
                  {item.description}
                </button>
              ))}
            </div>
          ) : null}
        </label>

        <button className="submit-btn" type="submit" disabled={loading}>
          {loading ? 'Opretter...' : 'Opret bruger'}
        </button>
      </form>

      <p className="auth-foot">
        Har du allerede en konto?
        <button className="link-btn" type="button" onClick={onBackToLogin}>
          Log ind
        </button>
      </p>
    </div>
  );
}
