'use client';

// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import Link from 'next/link';
import Input from '@/components/Input/Input';
import InlineInput from '@/components/InlineInput/InlineInput';
// ---------------------------------------------------------------------------------------------------------------------

// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
import { useData } from './hooks/useData';
import { useActions } from './hooks/useActions';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import ArrowRightIcon from '@/assets/ArrowRightIcon';
import TrashIcon from '@/assets/TrashIcon';
import CloseIcon from '@/assets/CloseIcon';
import CheckIcon from '@/assets/CheckIcon';
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

const Settings = () => {
	const {
		userData,
		isPopupDisplayed,
		setIsPopupDisplayed,
		usernameMessage,
		setUsernameMessage,
		passwordMessage,
		setPasswordMessage,
	} = useData();

	const {
		updateUsername,
		updatePassword,
		handleClosePopup,
		handleDeleteUser,
		deleteUser,
	} = useActions({
		userData,
		setIsPopupDisplayed,
		setUsernameMessage,
		setPasswordMessage,
	});

	if (!userData) {
		return;
	}

	return (
		<div className='settings'>
			<div className='header'>
				<Link
					href={'/statistics'}
					className='backButton'
				>
					<ArrowRightIcon
						style={{
							rotate: '180deg',
						}}
					/>
				</Link>
				<p className='title'>Éditer le profil</p>
			</div>

			<div className='settingsContainer'>
				{usernameMessage && (
					<p className='message'>{usernameMessage}</p>
				)}

				<InlineInput
					label="Nom d'utilisateur"
					type='text'
					name='username'
					placeholder="Nom d'utilisateur"
					defaultValue={userData.username}
					autoComplete='username'
					onSubmit={updateUsername}
				/>

				<div className='separator' />

				<form
					className='passwordForm'
					onSubmit={updatePassword}
				>
					{passwordMessage && (
						<p className='message'>{passwordMessage}</p>
					)}
					<Input
						type='password'
						name='currentPassword'
						placeholder='Mot de passe actuel'
						autoComplete='password'
						required
					/>
					<Input
						type='password'
						name='newPassword'
						placeholder='Nouveau mot de passe'
						autoComplete='off'
						required
					/>
					<Input
						type='password'
						name='confirmNewPassword'
						placeholder='Confirmer le nouveau mot de passe'
						autoComplete='off'
						required
					/>

					<button
						type='submit'
						className='submitButton'
					>
						Appliquer
					</button>
				</form>

				<div className='separator'></div>

				<button
					className='deleteButton'
					onClick={handleDeleteUser}
				>
					<TrashIcon />
					Supprimer mon compte
				</button>

				{isPopupDisplayed && (
					<div
						className='popupOverlay'
						onClick={handleClosePopup}
					>
						<div
							className='popup'
							onClick={(ev) => ev.stopPropagation()}
						>
							<div className='popupHeader'>
								<p className='popupTitle'>
									Supprimer le compte ?
								</p>
								<button
									className='popupCloseButton'
									onClick={handleClosePopup}
								>
									<CloseIcon />
								</button>
							</div>
							<div className='popupContent'>
								<p>
									Êtes-vous sûr de vouloir supprimer votre
									compte ? Cette action est irréversible.
								</p>
							</div>
							<div className='popupButtonsContainer'>
								<button
									type='button'
									className='popupButton'
									onClick={handleClosePopup}
								>
									<CloseIcon />
									Non
								</button>

								<button
									type='button'
									className='popupButton'
									onClick={deleteUser}
								>
									<CheckIcon />
									Oui
								</button>
							</div>
						</div>
					</div>
				)}
			</div>
		</div>
	);
};

export default Settings;