'use client';

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

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

// -------------------------------------------------- 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 './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>
				)}

				<form
					className='card'
					onSubmit={updateUsername}
				>
					<p className='cardTitle'>Nom d&apos;utilisateur</p>

					<Input
						type='text'
						name='username'
						placeholder="Nom d'utilisateur"
						defaultValue={userData.username}
						autoComplete='username'
						required
					/>

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

				<form
					className='card'
					onSubmit={updatePassword}
				>
					<p className='cardTitle'>Modifier le mot de passe</p>

					{passwordMessage && (
						<p className='message'>{passwordMessage}</p>
					)}

					<div className='inputsContainer'>
						<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
						/>
					</div>

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

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

				{isPopupDisplayed && (
					<ConfirmPopup
						title='Supprimer le compte ?'
						content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
						onClose={handleClosePopup}
						onAccept={deleteUser}
					/>
				)}
			</div>
		</div>
	);
};

export default Settings;