no-copy-frontend/src/app/ui/violations/violations-table.tsx

'use client'

import { useMemo, useState } from 'react';
import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, ColumnDef, SortingState, ColumnFiltersState } from '@tanstack/react-table';
import { useTranslations } from 'next-intl';
import { IconArrowUp, IconArrowDown, IconFilter, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconEye } from '@/app/ui/icons/icons';
import { useQuery } from '@tanstack/react-query';
import { getViolationFilesArray } from '@/app/actions/violationActions';
import { useViewport } from '@/app/hooks/useViewport';
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import Link from 'next/link';

interface ViolationFile {
	createdAt: string;
	fileId: string;
	fileName: string;
	fileSize: number;
	latestViolationDate: string;
	mimeType: string;
	status: string;
	supportId: number;
	violationCount: number;
}

export default function ViolationsTable() {
	const {
		data: violationData,
		isLoading,
		isError,
		error,
	} = useQuery<ViolationFile[]>({
		queryKey: ['violationData'],
		queryFn: () => getViolationFilesArray(),

		select: (data) => {
			return data;
		},
		/* refetchInterval: 30000 */
	});
	const t = useTranslations('Global');

	// Состояния
	const [sorting, setSorting] = useState<SortingState>([]);
	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
	const [pagination, setPagination] = useState({
		pageIndex: 0,
		pageSize: 10,
	});

	const viewport = useViewport();
	const getMaxLengthByWidth = (): number => {
		if (viewport.device === 'MOBILE') return 26;
		if (viewport.device === 'TABLET') return 32;
		if (viewport.device === 'DESKTOP') return 84;
		return 100;
	};

	const cutFileName = (fileName: string) => {
		const MAX_FILE_NAME_LENGTH = getMaxLengthByWidth();
		const lastDotIndex = fileName.lastIndexOf('.');

		if (lastDotIndex <= 0) {
			return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
		}

		const nameWithoutExtension = fileName.substring(0, lastDotIndex);
		const extension = fileName.substring(lastDotIndex);

		if (fileName.length <= MAX_FILE_NAME_LENGTH) {
			return fileName;
		}

		const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;

		if (maxNameLength <= 0) {
			return '...' /* + extension */;
		}

		return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */;
	}

	const columns = useMemo<ColumnDef<ViolationFile>[]>(
		() => [
			{
				accessorKey: 'supportId',
				header: ({ column }) => (
					<div className="column">
						<span>
							ID
						</span>
						<button
							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
							className="sort-button"
						>
							{
								column.getIsSorted() === 'asc' ?
									<span>
										<IconArrowUp />
									</span>
									: column.getIsSorted() === 'desc' ?
										<span>
											<IconArrowDown />
										</span>
										: <span>
											<IconFilter />
										</span>
							}
						</button>
					</div>
				),
				cell: ({ row }) => {
					return (
						<div>
							<div className="text-center table-item table-item-id">
								{row.original.supportId}
							</div>
						</div>
					)
				}
			},
			{
				accessorKey: 'fileName',
				header: ({ column }) => (
					<div className="column start">
						<span>
							{t('file')}
						</span>
						<button
							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
							className="sort-button"
						>
							{
								column.getIsSorted() === 'asc' ?
									<span>
										<IconArrowUp />
									</span>
									: column.getIsSorted() === 'desc' ?
										<span>
											<IconArrowDown />
										</span>
										: <span>
											<IconFilter />
										</span>
							}
						</button>
					</div>
				),
				cell: ({ row }) => {
					return (
						<div>
							<div
								className="flex items-center space-x-2 table-item table-item-file-name"
								title={row.original.fileName}
							>
								{cutFileName(row.original.fileName)}
							</div>
						</div>
					)
				}
			},
			{
				accessorKey: 'violationCount',
				header: ({ column }) => (
					<div className="column">
						<span>
							{t('matches')}
						</span>
						<button
							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
							className="sort-button"
						>
							{
								column.getIsSorted() === 'asc' ?
									<span>
										<IconArrowUp />
									</span>
									: column.getIsSorted() === 'desc' ?
										<span>
											<IconArrowDown />
										</span>
										: <span>
											<IconFilter />
										</span>
							}
						</button>
					</div>
				),
				cell: ({ row }) => (
					<div className="text-center table-item">
						{row.original.violationCount}
					</div>
				),
			},
			{
				accessorKey: 'latestViolationDate',
				header: ({ column }) => (
					<div className="column">
						<span>
							{t('date')}
						</span>
						<button
							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
							className="sort-button"
						>
							{
								column.getIsSorted() === 'asc' ?
									<span>
										<IconArrowUp />
									</span>
									: column.getIsSorted() === 'desc' ?
										<span>
											<IconArrowDown />
										</span>
										: <span>
											<IconFilter />
										</span>
							}
						</button>
					</div>
				),
				cell: ({ row }) => (
					<div className="text-center table-item">
						{formatDate(row.original.latestViolationDate)}
						<br />
						{formatDateTime(row.original.latestViolationDate)}
					</div>
				),
			},
			{
				accessorKey: 'actions',
				header: ({ column }) => (
					<div className="column">
						<span>
							{t('actions')}
						</span>
					</div>
				),
				cell: ({ row }) => {
					return (
						<div className="actions">
							<div
								className="actions-group"
							>
								{/* <button
									onClick={() => {
										console.log(row.original.fileId);
									}}
									className="bg-violet-500 hover:bg-violet-600"
									title={t('view')}
								>
									<IconEye />
								</button> */}
								<Link
									href={`/pages/file/${row.original.fileId}`}
									className="bg-violet-500 hover:bg-violet-600"
									title={t('view')}
								>
									<IconEye />
								</Link>
							</div>
						</div>
					)
				}
			},
		],
		[]
	)

	const filteredData = useMemo(() => {
		let result = violationData;
		if (!result) {
			return [];
		}

		return result
	}, [violationData])

	const table = useReactTable({
		data: filteredData,
		columns,
		state: {
			sorting,
			columnFilters,
			pagination
		},
		autoResetPageIndex: false,
		onPaginationChange: setPagination,
		onSortingChange: setSorting,
		onColumnFiltersChange: setColumnFilters,
		getCoreRowModel: getCoreRowModel(),
		getSortedRowModel: getSortedRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		initialState: {
			pagination: {
				pageSize: 10,
			},
		},
	});

	return (
		<div
			className="block-wrapper"
		>
			<div className="tab-content">
				<div
					className="tanstak-table-wrapper"
				>
					<h3
						className="tanstak-table-title"
					>
						{t('matches-detected')}
					</h3>

					{/* Фильтры */}
					{/* 					<div className="tanstak-table-filtres">
						<div className="table-filtres-wrapper">
							<div className="table-filtres-item">
								<div className="table-filtres-label">{t('date-filter')}:</div>
								<DropDownList
									value={dateFilter}
									translatedValue={(() => {
										switch (dateFilter) {
											case 'all':
												return t('all-dates')
											case 'week':
												return t('for-a-week')
											case 'month':
												return t('for-a-month')
											case 'older':
												return t('older-than-a-month')
											default:
												return t('today')
										}
									})()}
									callBack={setDateFilter}
								>
									<li value="all">
										{t('all-dates')}
									</li>
									<li value="today">
										{t('today')}
									</li>
									<li value="week">
										{t('for-a-week')}
									</li>
									<li value="month">
										{t('for-a-month')}
									</li>
									<li value="older">
										{t('older-than-a-month')}
									</li>
								</DropDownList>
							</div>

						</div>

						<div
							className="table-filtres-wrapper"
						>
							<div className="table-filtres-item">
								<div className="table-filtres-label">{t('items-per-page')}:</div>
								<DropDownList
									value={table.getState().pagination.pageSize}
									//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
									callBack={table.setPageSize}
								>
									{[5, 10, 20, 50, 100].map(pageSize => (
										<li key={pageSize} value={pageSize}>
											{t('show')} {pageSize}
										</li>
									))}
								</DropDownList>
							</div>
						</div>

					</div> */}

					{/* Таблица */}
					<div className="tanstak-table-block">
						<table className="tanstak-table">
							<thead className="tanstak-table-head">
								{table.getHeaderGroups().map(headerGroup => (
									<tr key={headerGroup.id}>
										{headerGroup.headers.map(header => (
											<th
												key={header.id}
											>
												{header.isPlaceholder
													? null
													: typeof header.column.columnDef.header === 'function'
														? header.column.columnDef.header(header.getContext())
														: header.column.columnDef.header as string}
											</th>
										))}
									</tr>
								))}
							</thead>
							<tbody className="tanstak-table-body">
								{table.getRowModel().rows.length > 0 ? (
									table.getRowModel().rows.map(row => (
										<tr key={row.id}>
											{row.getVisibleCells().map(cell => (
												<td key={cell.id}>
													{typeof cell.column.columnDef.cell === 'function'
														? cell.column.columnDef.cell(cell.getContext())
														: cell.getValue() as string}
												</td>
											))}
										</tr>
									))
								) : (
									<tr>
										<td colSpan={columns.length} className="text-center">
											{t('no-data-for-selected-filters')}
										</td>
									</tr>
								)}
							</tbody>
						</table>
					</div>

					{/* Пагинация */}
					<div className="tanstak-table-pagination">
						<div className="pagination-info">
							<span className="pagination-info-pages">
								{t('page')}{' '}
								<strong>
									{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
								</strong>
							</span>
							<span className="pagination-info-files">
								| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length}
							</span>
						</div>

						<div className="pagination-controls">
							{table.getCanPreviousPage() && (
								<button
									className="arrow"
									onClick={() => table.firstPage()}
									disabled={!table.getCanPreviousPage()}
								>
									<IconDoubleArrowLeft />
								</button>
							)}
							{table.getCanPreviousPage() && (
								<button
									className="arrow"
									onClick={() => table.previousPage()}
									disabled={!table.getCanPreviousPage()}
								>
									<IconArrowLeft />
								</button>
							)}

							<div className="pagination-controls-pages">
								{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
									const pageIndex = Math.max(
										0,
										Math.min(
											table.getPageCount() - 5,
											table.getState().pagination.pageIndex - 2
										)
									) + i;

									if (pageIndex < table.getPageCount()) {
										return (
											<button
												key={pageIndex}
												className={`${table.getState().pagination.pageIndex === pageIndex
													? 'current'
													: 'other'
													}`}
												onClick={() => table.setPageIndex(pageIndex)}
											>
												{pageIndex + 1}
											</button>
										);
									}
									return null;
								})}
							</div>

							{table.getCanNextPage() && (
								<button
									className="arrow"
									onClick={() => table.nextPage()}
									disabled={!table.getCanNextPage()}
								>
									<IconArrowRight />
								</button>
							)}
							{table.getCanNextPage() && (
								<button
									className="arrow"
									onClick={() => table.lastPage()}
									disabled={!table.getCanNextPage()}
								>
									<IconDoubleArrowRight />
								</button>
							)}
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}