'use client';

import TrashIcon from '@/assets/TrashIcon';
// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import ConfirmPopup from '@/components/ConfirmPopup/ConfirmPopup';
// ---------------------------------------------------------------------------------------------------------------------

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

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import PenIcon from '@/assets/PenIcon';
import './styles.scss';
import Loader from '@/assets/Loader';
// ---------------------------------------------------------------------------------------------------------------------

const MyLoves = () => {
	const {
		isLoading,
		setIsLoading,
		dataset,
		loveToDelete,
		setLoveToDelete,
		deleteMessage,
		setDeleteMessage,
		refreshDataset,
	} = useData();

	const { handleEdit, openPopup, closePopup, deleteLove } = useActions({
		setIsLoading,
		loveToDelete,
		setLoveToDelete,
		setDeleteMessage,
		refreshDataset,
	});

	return (
		<div className='myLovesContainer'>
			<div className='header'>
				<p className='title'>Mes loves</p>
			</div>

			{isLoading ? (
				<p className='loader'>Chargement...</p>
			) : (
				<div className='myLovesList'>
					{dataset.map((love) => (
						<div
							key={love.id}
							className='loveItem'
						>
							<div className='infos'>
								<p className='location'>{love.location}</p>
								<p className='comment'>{love.comment || '-'}</p>
								<p className='date'>
									Créé le: {love.createdat}
								</p>
							</div>

							<div className='actionButtons'>
								<button
									type='button'
									className='actionButton'
									onClick={() => handleEdit(love.id)}
								>
									<PenIcon />
								</button>
								<button
									type='button'
									className='actionButton'
									onClick={() => openPopup(love.id)}
								>
									<TrashIcon />
								</button>
							</div>
						</div>
					))}
				</div>
			)}

			{loveToDelete && (
				<ConfirmPopup
					title='Supprimer ce love'
					content='Es-tu sûr de vouloir supprimer ce love ?'
					onClose={closePopup}
					message={deleteMessage}
					onAccept={deleteLove}
				/>
			)}
		</div>
	);
};

export default MyLoves;