'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,
	});

	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>

			{!userData ? (
				<p className='loading'>Chargement...</p>
			) : (
				<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;
