"use client"

import { useState, useRef } from 'react';
import { fetchFruits } from '@/app/actions/action';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import {IconNotification} from '@/app/ui/icons/icons';

export default function NotificationsButton() {
	const [isOpen, setIsOpen] = useState(false);
	const [data, setData] = useState<string | null>(null);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const menuRef = useRef<HTMLDivElement | null>(null);
	const t = useTranslations('Global');

	useClickOutside(menuRef, () => {
		setIsOpen(false);
	});

	const fetchData = async () => {
		setLoading(true);
		setError(null);

		try {
			const result = await fetchFruits();
			setData("result");
			setIsOpen(true);
		} catch (err) {
			setError('error message');
		} finally {
			setLoading(false);
		}
	};

	const handleButtonClick = () => {
		if (!isOpen) {
			fetchData();
		} else {
			setIsOpen(false);
		}
	};

	return (
		<div className="notification-wrapper" ref={menuRef}>
			<button
				className="icon-btn"
				id="notifications-btn"
				title="Уведомления"
				onClick={handleButtonClick}
			>
				<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
					<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
				</svg>
			</button>
			<div className={`notification-dropdown ${isOpen ? 'show' : ''}`}>
				{error ? (
					<div className="p-4 text-red-500">{error}</div>
				) : (
					<>
						<div className='notification-header'>
							<h4>
								{t('notifications')}
							</h4>
							<span className="notification-count">
								{t('no-new')}
							</span>
						</div>
						{data ? (
							<div className="notification-list">
								<div className="notification-item">
									<div className="notification-icon">
										<IconNotification/>
									</div>
									<div className="notification-content">
										<div className="notification-title">
											{t('tokens-added')}
										</div>
										<div className="notification-text">{t('added')} 100 {t('tokens')}.</div>
										<div className="notification-time">4 {t('days-ago')}</div>
									</div>
								</div>
								{JSON.stringify(data)}
							</div>
						) : (
							<p>
								{t('no-data')}
							</p>
						)}
						<div className="notification-footer">
							<Link href="/pages/notifications" className="notification-link">
								{t('view-all')}
							</Link>
						</div>
					</>
				)}
			</div>
		</div>
	)
}