'use client'

import styles from '@/app/styles/login.module.scss';
import { useActionState } from 'react';
import { registration } from '@/app/actions/auth';
import PhoneInput from '@/app/ui/inputs/phone-input';

export default function RegisterForm() {
	const [state, formAction, isPending] = useActionState(
		registration,
		undefined,
	);

	return (
		<form action={(e) => {
			formAction(e);
		}}>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']} ${styles['required']}`}
				>
					Полное имя
				</label>
				<input
					type="text"
					id="full_name"
					name="full_name"
					className={`${styles['form-input']}`}
					placeholder="Иванов Иван Иванович"
					defaultValue={state?.previousState?.full_name ? state?.previousState?.full_name : ''}
				/>
				{state?.error?.full_name && (
					<p className="text-sm text-red-500">{state?.error?.full_name}</p>
				)}
			</div>
			<div className={`${styles['form-row']}`}>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Email адрес</label>
					<input
						type="text"
						id="email"
						name="email"
						className={`${styles['form-input']}`}
						placeholder="ivan@example.com"
						defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
					/>
					{state?.error?.email && (
						<p className="text-sm text-red-500">{state?.error?.email}</p>
					)}
				</div>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Телефон</label>
					<PhoneInput phoneState={state?.previousState?.phone} />
					{state?.error?.phone && (
						<p className="text-sm text-red-500">{state?.error?.phone}</p>
					)}
				</div>
			</div>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']}`}
				>
					Компания
				</label>
				<input
					type="text"
					id="company"
					name="company"
					className={`${styles['form-input']}`}
					placeholder="ООО «Ваша компания»"
					defaultValue={state?.previousState?.company ? state?.previousState?.company : ''}
				/>
			</div>
			<div className={`${styles['form-row']}`}>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Пароль</label>
					<input
						type="password"
						id="password" name="password"
						className={`${styles['form-input']}`}
						placeholder="Минимум 8 символов"
						defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
					/>
					{state?.error?.password && (
						<p className="text-sm text-red-500">{state?.error?.password}</p>
					)}
				</div>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Подтвердите пароль</label>
					<input
						type="password"
						id="confirm_password"
						name="confirm_password"
						className={`${styles['form-input']}`}
						placeholder="Повторите пароль"
						defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
					/>
					{state?.error?.confirm_password && (
						<p className="text-sm text-red-500">{state?.error?.confirm_password}</p>
					)}
				</div>
			</div>
			<div className={`${styles['form-checkbox']}`}>
				<input
					type="checkbox"
					id="agree"
					name="agree"
					defaultChecked={state?.previousState?.agree ? true : false}
				/>
				<label htmlFor="agree">Я соглашаюсь с <a href="/" >условиями использования и политикой конфиденциальности</a></label>
			</div>
			{state?.error?.agree && (
				<p className="text-sm text-red-500">{state?.error?.agree}</p>
			)}
			{state?.error?.server && (
				<p className="text-sm text-red-500">{state?.error?.server}</p>
			)}
			<button type="submit" className={`${styles['btn']}`} style={{ marginTop: "20px" }}>Создать аккаунт</button>
		</form >
	)
}