'use client'

import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesData } from '@/app/actions/fileEntity';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';

type FilesInfo = {
	totalSize: number;
	totalCount: number;
};


export default function ProtectionSummary({ fileType }: { fileType: string }) {
	const t = useTranslations('Global');
	console.log(fileType);

	const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => {
		switch (fileType) {
			case 'image':
				return {
					totalSize: 'images_size',
					totalCount: 'images_quantity'
				};
			case 'video':
				return {
					totalSize: 'videos_size',
					totalCount: 'videos_quantity'
				};
			case 'audio':
				return {
					totalSize: 'audios_size',
					totalCount: 'audios_quantity'
				};
			default:
				return {
					totalSize: 'all_files_size',
					totalCount: 'all_files_quantity'
				};
		}
	};

	const {
		data: filesInfo,
		isLoading,
		isError,
		error,
	} = useQuery<{
		all_files_size: number,
		all_files_quantity: number
	}, Error, FilesInfo>({
		queryKey: ['userFilesInfo'],
		queryFn: getUserFilesInfo,
		select: (data): FilesInfo => {
			if (!data) {
				return {
					totalSize: 0,
					totalCount: 0
				}
			}

			const fields = getFileTypeFields(fileType);

			return {
				totalSize: data[fields.totalSize as keyof typeof data],
				totalCount: data[fields.totalCount as keyof typeof data]
			}
		}
	});

	const pluralizeFilesName = (number: number) => {
		const translate = [t(`${fileType}`), t(`${fileType}s-few`), t(`${fileType}s`)];
		return pluralize(number, translate[0], translate[1], translate[2]);
	};

	const pluralizeCheks = (number: number) => {
		const translate = [t('check'), t('checks-few'), t('checks')];
		return pluralize(number, translate[0], translate[1], translate[2]);
	};

	const pluralizeViolations = (number: number) => {
		const translate = [t('violation'), t('violations-few'), t('violations')];
		return pluralize(number, translate[0], translate[1], translate[2]);
	};

	const CHECKS = 6;
	const VIOLATIONS = 2;

	return (
		<div className="protection-overview grow">
			<h3>{t('protecting-your-content')}</h3>
			<p>{t('current-status-of')}</p>
			<div className="protection-stats">
				<div className="protection-stat total-files">
					<div className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</div>
					<div className="protection-stat-label">
						{pluralizeFilesName(filesInfo?.totalCount || 0)}
					</div>
				</div>
				<div className="protection-stat total-checks">
					<div className="protection-stat-value">{CHECKS}</div>
					<div className="protection-stat-label">
						{pluralizeCheks(CHECKS)}
					</div>
					<div className="protection-stat-value">{VIOLATIONS}</div>
					<div className="protection-stat-label">
						{pluralizeViolations(VIOLATIONS)}
					</div>
				</div>
				<div className="protection-stat total-usage">
					<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
					<div className="protection-stat-label">
						{t('disk-space-used')}
					</div>
				</div>
			</div>
		</div>
	)
}