'use client'

import { useTranslations } from 'next-intl';
import { IconCheck } from '@/app/ui/icons/icons';
import { useState } from 'react';

interface Notification {
	id: string,
	notificationText: string,
	data: string,
	link: string,
	title: string,
	status: string,
}

const noitficationList: Notification[] = [
	{
		id: '1',
		notificationText: 'text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1',
		data: '20.20.20',
		link: '#',
		title: 'title 1',
		status: 'status'
	},
	{
		id: '2',
		notificationText: 'text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 ',
		data: '20.20.20',
		link: '#',
		title: 'title 2',
		status: 'status'
	},
	{
		id: '3',
		notificationText: 'text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 ',
		data: '20.20.20',
		link: '#',
		title: 'title 3',
		status: 'status'
	},
	{
		id: '4',
		notificationText: 'text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 ',
		data: '20.20.20',
		link: '#',
		title: 'title 4',
		status: 'status'
	},
	{
		id: '5',
		notificationText: 'text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 ',
		data: '20.20.20',
		link: '#',
		title: 'title 5',
		status: 'status'
	}
];

export function NotificationsList() {
	const t = useTranslations('Global');
	const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());

	function selectHandler(fileId: string) {
		setSelectedFiles((prev) => {
			const newSet = new Set(prev);

			if (newSet.has(fileId)) {
				newSet.delete(fileId)
			} else {
				newSet.add(fileId)
			}
			return newSet;
		});
	}

	function clearHandler() {
		setSelectedFiles(new Set());
	}

	function selectAllHandler() {
		setSelectedFiles(new Set(noitficationList.map(item => item.id)));
	}

	return (
		<div
			className="notifications-list-wrapper"
		>
			<div
				className="notifications-list-header"
			>
				<h4>
					{t('all-notifications')}
				</h4>

				<div
					className="notifications-list-action"
				>
					{(selectedFiles.size !== 0) && (
						<button
							className="btn btn-primary"
							onClick={() => {
								clearHandler();
							}}
						>
							{t('deselect')}
						</button>
					)}
					<button
						className="btn btn-primary"
						onClick={() => {
							selectAllHandler();
						}}
					>
						{t('select-all')}
					</button>
				</div>
			</div>
			<div
				className="notifications-list-body"
			>
				{(noitficationList.length !== 0) && (
					noitficationList.map(item => {
						return (
							<div
								className="notification-item"
								key={item.id}
							>
								<div
									className="notification-check"
								>
									<button
										onClick={() => {
											selectHandler(item.id);
										}}
									>
										{selectedFiles.has(item.id) && (
											<IconCheck />
										)}
									</button>
								</div>

								<div
									className="notification-body"
								>
									<div
										className="notification-header"
									>
										<div
											className="notification-title"
										>
											{item.title}
										</div>
										<div
											className="notification-status"
										>
											{item.status}
										</div>
									</div>
									<div
										className="notification-text"
									>
										{item.notificationText}
									</div>
									<div
										className="notification-footer"
									>
										<div
											className="notification-date"
										>
											{item.data}
										</div>

										<button
											className="btn btn-remove"
										>
											{t('remove')}
										</button>
									</div>
								</div>
							</div>
						)
					})
				)}
			</div>
		</div>
	)
}