import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
import { FileDetails } from '@/app/[locale]/pages/file/[id]/page';

export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: {
	fileInfo: FileDetails,
	setWindowClose: any,
	setWindowChildren: any
}) {
	const t = useTranslations('Global');

	return (
		<div className="modal-window-view-file">
			<div
				className="modal-window-view-file-content"
			>
				<div
					className="file-info-wrapper"
				>
					<div
						className="file-info-card"
					>
						<div className="info-header">
							<h4>{t('owner-information')}</h4>
						</div>
						<div className="info-item">
							<div className="info-label" >
								{t('name')}:
							</div>
							<div className="info-value" >
								{fileInfo.ownerName ? fileInfo.ownerName : '-'}
							</div>
						</div>

						<div className="info-item">
							<div className="info-label" >
								{t('email')}:
							</div>
							<div className="info-value" >
								{fileInfo.ownerEmail ? fileInfo.ownerEmail : '-'}
							</div>
						</div>

						<div className="info-item">
							<div className="info-label" >
								{t('company')}:
							</div>
							<div className="info-value" >
								{fileInfo.ownerCompany ? fileInfo.ownerCompany : '-'}
							</div>
						</div>
					</div>

					<div
						className="file-info-card"
					>
						<div className="info-header">
							<h4>{t('file-information')}</h4>
						</div>

						<div className="info-item">
							<div className="info-label" >
								{t('file-name')}
							</div>
							<div className="info-value" >
								{fileInfo.fileName ? fileInfo.fileName : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label" >
								{t('size')}
							</div>
							<div className="info-value" >
								{fileInfo.fileSize ? convertBytes(fileInfo.fileSize) : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label" >
								{t('loaded')}
							</div>
							<div className="info-value" >
								{fileInfo.fileUploadDate ? `${formatDate(fileInfo.fileUploadDate)} ${formatDateTime(fileInfo.fileUploadDate)}` : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label" >
								{t('format')}
							</div>
							<div className="info-value" >
								{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
							</div>
						</div>
						{fileInfo.mimeType === 'image' && (
							<div className="info-item image">
								<img src={fileInfo.thumbnailFileUrl ? fileInfo.thumbnailFileUrl : '#'} alt="" />
							</div>
						)}
					</div>
				</div>

				<div
					className="file-info-card"
				>
					<div className="info-header">
						<h4>{t('security-details')}</h4>
					</div>
					<div className="info-item">
						<div className="info-label" >
							{t('protection-status')}
						</div>
						<div className="info-value" >
							{fileInfo.protectStatus ? fileInfo.protectStatus : '-'}
						</div>
					</div>
					<div className="info-item">
						<div className="info-label" >
							{t('number-of-checks')}
						</div>
						<div className="info-value" >
							{fileInfo.checksCount ? fileInfo.checksCount : '0'}
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}