import { FormField } from '@shared/ui'
import { PrimaryButton } from '@shared/ui'
import { Button } from '@shared/ui'
import { useRegisterForm } from '../model/useRegisterForm'
import styles from './RegisterForm.module.css'

export function IndividualForm() {
  const {
    email, setEmail,
    password, setPassword,
    confirmPassword, setConfirmPassword,
    verificationCode, setVerificationCode,
    codeSent,
    isLoadingCode,
    isLoadingSubmit,
    error,
    handleRequestCode,
    handleSubmit,
  } = useRegisterForm()

  return (
    <form onSubmit={handleSubmit}>
      <div className={styles.twoCol}>
        <div className={styles.leftCol}>
          <FormField
            label="Введите адрес электронной почты"
            type="email"
            value={email}
            onChange={setEmail}
            placeholder="example@mail.ru"
            required
          />
          <FormField
            label="Придумайте пароль"
            type="password"
            value={password}
            onChange={setPassword}
            placeholder="••••••••"
            required
          />
          <FormField
            label="Повторите пароль"
            type="password"
            value={confirmPassword}
            onChange={setConfirmPassword}
            placeholder="••••••••"
            required
          />
        </div>

        <div className={styles.rightCol}>
          <Button
            variant="ghost"
            type="button"
            onClick={handleRequestCode}
            disabled={codeSent || isLoadingCode}
          >
            {isLoadingCode ? 'Отправка...' : codeSent ? 'Код отправлен' : 'Получить проверочный код'}
          </Button>
          <span className={styles.codeHint}>Код не пришёл</span>
          <FormField
            label="Ввести код"
            type="text"
            value={verificationCode}
            onChange={setVerificationCode}
            placeholder="000 000"
            required
          />
        </div>
      </div>

      {error && <p className={styles.error}>{error}</p>}

      <div className={styles.submitWrapper}>
        <PrimaryButton label={isLoadingSubmit ? 'Создание...' : 'Создать'} disabled={isLoadingSubmit} />
      </div>

      <p className={styles.legal}>
        Нажимая «Создать», вы принимаете<br />
        <a href="#">Пользовательское соглашение</a> и <a href="#">Политику конфиденциальности</a>
      </p>
    </form>
  )
}
