'use client';

import { useParams } from 'next/navigation';
import { Controller } from 'react-hook-form';
import { Alert } from '@/components/Alert';
import { CountriesSelect } from '@/components/CountriesSelect';
import { FormField } from '@/components/FormField';
import { LoadingOverlay } from '@/components/LoadingOverlay';
import { ControlledPhoneNumberInput } from '@/components/PhoneNumberInput';
import { useBeforeUnloadEvent } from '@/hooks/useBeforeUnloadEvent';
import { useScrollTop } from '@/hooks/useScrollTop';
import { useCurrentLocale, useScopedI18n } from '@/i18n/client';
import { useProfileFormState } from './useProfileForm/useProfileFormState';
import type { ProfileFormState } from './useProfileForm/types';

const MIN_DATE = '1924-01-01';
const MAX_DATE = new Date().toISOString().split('T')[0];

export type ProfileFormProps = {
    defaultValues?: ProfileFormState;
    isDateOfBirthAllowed?: boolean;
};

export function ProfileForm(props: ProfileFormProps) {
    const params = useParams<{ token: string }>();
    const locale = useCurrentLocale();
    const t = useScopedI18n('pages.profile.profileTab');

    const [
        {
            control,
            register,
            formState: { errors },
            isDirty, // custom property
            handleProfileSubmit, // custom property
        },
        { result, error, pending: loading },
    ] = useProfileFormState(params.token, {
        defaultValues: props.defaultValues,
    });

    const isError = Boolean(error) || Boolean(result?.error);
    const isSuccess = Boolean(result?.data);

    useBeforeUnloadEvent(isDirty);

    useScrollTop(isSuccess || isError);

    return (
        <form
            data-testid="profile-form"
            className="flex flex-col gap-5 p-5"
            onSubmit={handleProfileSubmit}
        >
            {isSuccess && <Alert text={t('savedMessage')} />}

            {isError && <Alert text={t('errorMessage')} isError />}

            <div className="flex flex-col gap-2.5">
                <h4 className="text-gray-900">{t('contactsSection.title')}</h4>

                <div className="flex flex-col gap-5">
                    <FormField
                        label={t('email.label')}
                        error={errors.email?.message}
                        isRequired
                    >
                        <input
                            id="email"
                            type="text"
                            {...register('email', {
                                required: t('requiredField'),
                            })}
                            data-error={errors.email?.message}
                        />
                    </FormField>

                    <FormField
                        label={t('phoneNumber.label')}
                        labelFor="phoneNumber"
                        error={errors.phoneNumber?.message}
                    >
                        <Controller
                            control={control}
                            name="phoneNumber"
                            render={({ field, fieldState }) => (
                                <ControlledPhoneNumberInput
                                    field={field}
                                    locale={locale}
                                    numberInputProps={{ id: 'phoneNumber' }}
                                    internationalCodeLabel={t(
                                        'phoneNumber.countryPlaceholder'
                                    )}
                                    errorClassName="border-red! outline-red!"
                                    isError={fieldState.error !== undefined}
                                />
                            )}
                        />
                    </FormField>
                </div>
            </div>

            <div className="flex flex-col gap-2.5">
                <h4 className="text-gray-900">{t('aboutSection.title')}</h4>

                <div className="flex flex-col gap-5">
                    <FormField
                        label={t('firstName.label')}
                        error={errors.firstName?.message}
                    >
                        <input
                            id="firstName"
                            type="text"
                            maxLength={110}
                            {...register('firstName')}
                        />
                    </FormField>

                    <FormField
                        label={t('lastName.label')}
                        error={errors.lastName?.message}
                    >
                        <input
                            id="lastName"
                            type="text"
                            maxLength={110}
                            {...register('lastName')}
                        />
                    </FormField>

                    {props.isDateOfBirthAllowed ? (
                        <FormField
                            label={t('dateOfBirth.label')}
                            error={errors.dateOfBirth?.message}
                        >
                            <input
                                id="dateOfBirth"
                                type="date"
                                min={MIN_DATE}
                                max={MAX_DATE}
                                {...register('dateOfBirth')}
                                data-error={errors.dateOfBirth?.message}
                            />
                        </FormField>
                    ) : (
                        <FormField
                            label={t('birthday.label')}
                            error={errors.birthday?.message}
                        >
                            <input
                                id="birthday"
                                type="text"
                                placeholder={t('birthday.placeholder')}
                                maxLength={5}
                                {...register('birthday')}
                                data-error={errors.birthday?.message}
                            />
                        </FormField>
                    )}

                    <FormField label={t('gender.label')}>
                        <select
                            id="gender"
                            defaultValue=""
                            {...register('gender')}
                        >
                            <option value="" disabled hidden>
                                {t('gender.placeholder')}
                            </option>

                            <option value="MALE">
                                {t('gender.options.MALE')}
                            </option>
                            <option value="FEMALE">
                                {t('gender.options.FEMALE')}
                            </option>
                            <option value="NON_BINARY_OTHER">
                                {t('gender.options.NON_BINARY_OTHER')}
                            </option>
                            <option value="PREFER_NOT_TO_ANSWER">
                                {t('gender.options.PREFER_NOT_TO_ANSWER')}
                            </option>
                        </select>
                    </FormField>
                </div>
            </div>

            <div className="flex flex-col gap-2.5">
                <h4 className="text-gray-900">{t('locationSection.title')}</h4>

                <div className="flex flex-col gap-5">
                    <FormField label={t('countryCode.label')}>
                        <CountriesSelect
                            id="countryCode"
                            lang={locale}
                            placeholder={t('countryCode.placeholder')}
                            {...register('countryCode')}
                        />
                    </FormField>

                    <FormField
                        label={t('address.label')}
                        error={errors.address?.message}
                    >
                        <input
                            id="address"
                            type="text"
                            maxLength={255}
                            {...register('address')}
                        />
                    </FormField>

                    <FormField
                        label={t('city.label')}
                        error={errors.city?.message}
                    >
                        <input
                            id="city"
                            type="text"
                            maxLength={75}
                            {...register('city')}
                        />
                    </FormField>

                    <FormField
                        label={t('zipCode.label')}
                        error={errors.zipCode?.message}
                    >
                        <input
                            id="zipCode"
                            type="text"
                            maxLength={20}
                            {...register('zipCode')}
                        />
                    </FormField>
                </div>
            </div>

            <button data-testid="save-button">{t('saveButton')}</button>

            {loading && (
                <LoadingOverlay altText={t('loadingOverlay.altText')} />
            )}
        </form>
    );
}