'use client'

import { useState, useRef } from 'react';
import { PieChartComponent } from '@/app/components/PieChartComponent';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useClickOutside } from '@/app/hooks/useClickOutside';


const data = [
	{ name: 'images', value: 33, color: '#f08c00' },
	{ name: 'videos', value: 50, color: '#2f9e44' },
	{ name: 'audios', value: 25, color: '#1971c2' },
];

/* нужно что бы включать выключать кнопки добавления маркировок */
const totalFiles = 1;

export default function ProtectionOverview() {
	const [isOpen, setIsOpen] = useState(false);
	const t = useTranslations('Global');
	const [openDropDownList, setOpenDropDownList] = useState(false);
	const dropDownList = useRef(null);
	useClickOutside(dropDownList, () => {
		setOpenDropDownList(false)
	});

	return (
		<div className="protection-overview grow">
			<h3>{t('protecting-your-content')}</h3>
			<p>{t('current-status-of')}</p>
			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>


				{totalFiles ? (
					<>
						<div className="protection-stat total-files">
							<div className="protection-stat-value">0</div>
							<div className="protection-stat-label">{t('total-files')}</div>
						</div>

						<div className="protection-stat total-checks">
							<div className="protection-stat-row">
								<div className="protection-stat-value">0</div>
								<div className="protection-stat-label">{t('check')}</div>
							</div>
							<div className="protection-stat-row">
								<div className="protection-stat-value">0</div>
								<div className="protection-stat-label">{t('violations')}</div>
							</div>
						</div>
					</>
				) : (
					<div className="protection-stat total-files relative">
						<div className="protection-stat-label">
							{t('there-are-no-files-yet')}
						</div>
						<div
							className="protection-stat-value btn"
							onClick={() => {
								setOpenDropDownList(!openDropDownList);
							}}
							ref={dropDownList}
						>
							{t('add')}
							<div
								className={`protection-stat-drop-down-list ${openDropDownList ? 'opened' : ''}`}
							>
								<div
									className="flex flex-col text-center"
								>
									<Link href='/pages/marking-photo'>
										{t('photo-marking')}
									</Link>
									<Link href='/pages/marking-video'>
										{t('video-marking')}
									</Link>
									<Link href='/pages/marking-audio'>
										{t('audio-marking')}
									</Link>
								</div>
							</div>
						</div>
					</div>
				)}
				{isOpen ? (
					<div className="protection-stat total-usage">
						<PieChartComponent data={data} />
					</div>
				) : (
					<div className="protection-stat total-usage">
						<div className="protection-stat-value">0 / 0</div>
						<div className="protection-stat-label">
							{t('disk-space-used')}
						</div>
					</div>
				)}
			</div>
			{!!totalFiles && (
				<button
					className="protection-overview-switch cursor-pointer"
					onClick={() => {
						setIsOpen(!isOpen);
					}}
				>
					<svg
						className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fillRule="evenodd"
							d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
							clipRule="evenodd"
						/>
					</svg>
				</button>
			)}
		</div>
	)
}