'use client'

import styles from '@/app/styles/login.module.scss';
import { useActionState, useState } from 'react';
import { registration } from '@/app/actions/auth';
import PhoneInput from '@/app/ui/inputs/phone-input';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { IconEye } from '@/app/ui/icons/icons';

export default function RegisterForm() {
	const [state, formAction, isPending] = useActionState(
		registration,
		undefined,
	);
	const t = useTranslations('Login-register-form');

	const [showPassword, setShowPassword] = useState(false);

	function handleMouseDown() {
		setShowPassword(true);
	}

	function handleMouseUp() {
		setShowPassword(false);
	}

	function handleMouseOut() {
		setShowPassword(false);
	}

	return (
		<form action={(e) => {
			formAction(e);
		}}>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']} ${styles['required']}`}
				>
					{t('full-name')}
				</label>
				<input
					type="text"
					id="full_name"
					name="full_name"
					className={`${styles['form-input']}`}
					placeholder={t('name-placeholder')}
					defaultValue={state?.previousState?.full_name ? state?.previousState?.full_name : ''}
				/>
				{state?.error?.full_name && (
					<p className="text-sm text-red-500">
						{t(state?.error?.full_name)}
					</p>
				)}
			</div>
			<div className={`${styles['form-row']}`}>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>
						{t('email-adress')}
					</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">
							{t(state?.error?.email)}
						</p>
					)}
				</div>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>
						{t('phone')}
					</label>
					<PhoneInput phoneState={state?.previousState?.phone} />
					{state?.error?.phone && (
						<p className="text-sm text-red-500">
							{t(state?.error?.phone)}
						</p>
					)}
				</div>
			</div>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']}`}
				>
					{t('company')}
				</label>
				<input
					type="text"
					id="company"
					name="company"
					className={`${styles['form-input']}`}
					placeholder={t('company-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']}`}>
						{t('password')}
					</label>
					<div
						className={`${styles['password-wrapper']}`}
					>
						<input
							type={showPassword ? "text" : "password"}
							id="password" name="password"
							className={`${styles['form-input']}`}
							placeholder={t('password-placeholder')}
							defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
						/>
						<button
							onMouseDown={handleMouseDown}
							onMouseUp={handleMouseUp}
							onMouseOut={handleMouseOut}
							type="button"
							className={`show-password-button ${showPassword? 'show': ''}`}
						>
							<IconEye />
						</button>
					</div>
					{state?.error?.password && (
						<p className="text-sm text-red-500">
							{
								state?.error?.password.split('&').map((e) => {
									return t(e)
								})
							}
						</p>
					)}
				</div>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>
						{t('confirm-password')}
					</label>
					<input
						type="password"
						id="confirm_password"
						name="confirm_password"
						className={`${styles['form-input']}`}
						placeholder={t('repeat-password')}
						defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
					/>
					{state?.error?.confirm_password && (
						<p className="text-sm text-red-500">
							{t(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">
					{t('i-agree-to')} <Link
						href="/terms-of-use"
						target="_blank"
					>
						{t('terms-of-use')}
					</Link> {t('and')} <Link
						href="/privacy-policy"
						target="_blank"
					>
						{t('privacy-policy')}
					</Link>
				</label>
			</div>
			{state?.error?.agree && (
				<p className="text-sm text-red-500">
					{t(state?.error?.agree)}
				</p>
			)}
			{state?.error?.server && (
				<p className="text-sm text-red-500">
					{t(state?.error?.server)}
				</p>
			)}
			<button type="submit" className={`${styles['btn']}`}>
				{t('create-an-account')}
			</button>
		</form >
	)
}