'use client'

import { useTranslations } from 'next-intl';
import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {convertBytes} from '@/app/lib/convertBytes';

export default function StatsGrid() {
	const t = useTranslations("Global");

	const {
		data: filesInfo,
		isLoading,
		isError,
		error,
	} = useQuery({
		queryKey: ['userFilesInfo'],
		queryFn: getUserFilesInfo,
	});

	return (
		<div className="block-wrapper stats-wrapper">
			<h3>
				{t('your-content')}
			</h3>
			<div className="stats-grid">
				<div className="stats-item left-top-corner stats-header">
					{t('content-type')}
				</div>
				<div className="stats-item stats-header">
					{t('quantity')}
				</div>
				<div className="stats-item stats-header">
					{t('size')}
				</div>
				<div className="stats-item stats-header">
					{t('violations')}
				</div>
				<div className="stats-item last-column right-top-corner stats-header">
					{t('checks')}
				</div>

				<div className="stats-item first-column second-row images">
					<IconImageFile />
					{t('images')}
				</div>
				<div className="stats-item second-row">
					{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}
				</div>
				<div className="stats-item second-row">
					{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}
				</div>
				<div className="stats-item second-row">
					0
				</div>
				<div className="stats-item second-row last-column">
					0
				</div>

				<div className="stats-item first-column videos">
					<IconVideoFile />
					{t('videos')}
				</div>
				<div className="stats-item">
					{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}
				</div>
				<div className="stats-item">
					{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}
				</div>
				<div className="stats-item">
					0
				</div>
				<div className="stats-item last-column">
					0
				</div>

				<div className="stats-item last-row left-bottom-corner first-column audio">
					<IconAudioFile />
					{t('audios')}
				</div>
				<div className="stats-item last-row">
					{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}
				</div>
				<div className="stats-item last-row">
					{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}
				</div>
				<div className="stats-item last-row">
					0
				</div>
				<div className="stats-item last-row last-column right-bottom-corner">
					0
				</div>
			</div>
		</div>

	)
}