no-copy-frontend/src/app/ui/marking-page/protection-summary.tsx

'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';

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]
			}
		}
	});


	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">
						{t('total-files')}
						<br />
						({t(`${fileType}s`)})
					</div>
				</div>
				<div className="protection-stat total-checks">
					<div className="protection-stat-value">0</div>
					<div className="protection-stat-label">{t('check')}</div>
					<div className="protection-stat-value">0</div>
					<div className="protection-stat-label">{t('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>
	)
}