'use client'

import Link from 'next/link';
import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
import DropDownList from '@/app/components/DropDownList';
import { IconArrowLeft, IconArrowRight, IconDoubleArrowLeft, IconDoubleArrowRight } from '@/app/ui/icons/icons';
import { useTranslations } from 'next-intl';

export default function FilePageViolationsLoadingList({
	currentPage,
	fileId,
	status,
	cachedTotalPages,
	cachedTotalElements,
	cachedCurrentPage,
}: {
	currentPage: number,
	fileId: string,
	status: string | undefined,
	cachedTotalPages: number | undefined,
	cachedTotalElements: number | undefined,
	cachedCurrentPage: number | undefined
}) {
	const t = useTranslations('Global');
	const tStatus = useTranslations('Match-status');

	const getPageNumbers = () => {
		const pages = [];
		const maxVisible = 5;
		const total = cachedTotalPages;

		let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
		let end = Math.min(total ? total : 0, start + maxVisible - 1);

		if (end - start + 1 < maxVisible) {
			start = Math.max(1, end - maxVisible + 1);
		}

		for (let i = start; i <= end; i++) {
			pages.push(i);
		}

		return pages;
	};

	return (
		<div className="block-wrapper">
			<div className="card-header">
				<h3 className="card-title">
					{t('all-file-violations')}
				</h3>

				<div className="flex items-center gap-4">
					<div
						className="status-filter-select"
					>
						<DropDownList
							value={status ? tStatus(status) : t('all-statuses')}
							callBack={() => { }}
						>
							<li value=''>{t('all-statuses')}</li>
							<li value="NEW">{tStatus('NEW')}</li>
							<li value="SHOWED">{tStatus('SHOWED')}</li>
							<li value="LEGAL_IN_WORK">{tStatus('LEGAL_IN_WORK')}</li>
							<li value="COMPLAINT_IN_WORK">{tStatus('COMPLAINT_IN_WORK')}</li>
							<li value="COMPLAINT_AND_LEGAL_IN_WORK">{tStatus('COMPLAINT_AND_LEGAL_IN_WORK')}</li>
							<li value="AUTHORIZED_USE">{tStatus('AUTHORIZED_USE')}</li>
						</DropDownList>
					</div>
				</div>

			</div>

			<div
				className="sources-list-wrapper relative"
			>
				<div
					className="loading-animation"
				>
					<div
						className="global-spinner large"
					>
					</div>
				</div>
			</div>
			<div
				className="sources-list-pagination"
			>

				<span>
					{t('total-violations')}: {cachedTotalElements} | {t('page')} {cachedCurrentPage} {t('out-of')} {cachedTotalPages}
				</span>
				<div className="pagination-controls">
					<button
						className="arrow"
						onClick={() => { }}
						disabled={true}
					>
						<IconDoubleArrowLeft />
					</button>
					<button
						onClick={() => { }}
						className="arrow"
						disabled={true}
					>
						<IconArrowLeft />
					</button>

					<div
						className="pagination-controls-pages"
					>
						{getPageNumbers().map(pageNum => (
							<button
								key={pageNum}
								onClick={() => { }}
								className={currentPage === pageNum ? 'current' : 'other'}
								disabled={true}
							>
								{pageNum}
							</button>
						))}
					</div>


					<button
						onClick={() => { }}
						className="arrow"
						disabled={true}
					>
						<IconArrowRight />
					</button>
					<button
						className="arrow"
						onClick={() => { }}
						disabled={true}
					>
						<IconDoubleArrowRight />
					</button>
				</div>
			</div>
		</div>
	)
}