import { ActionIcon, Box, Group, Text } from '@mantine/core';
import { createColumnHelper } from '@tanstack/react-table';
import { FaFilter, FaTrash } from 'react-icons/fa';
import type { SearchHistoryItem } from 'types';

const columnHelper = createColumnHelper<SearchHistoryItem>();
export const SearchHistoryColumns = (
	setSelectedItem: React.Dispatch<React.SetStateAction<SearchHistoryItem | undefined>>,
	deleteItemOpen: () => void,
	filtersEnabled: boolean,
	setFiltersEnabled: React.Dispatch<React.SetStateAction<boolean>>,
) => [
	columnHelper.accessor('id', {
		cell: ({ row }: any) => (
			<Group gap={0} justify='center'>
				<ActionIcon
					color={'red'}
					c={'black'}
					onClick={() => {
						setSelectedItem(row.original);
						deleteItemOpen();
					}}
				>
					<FaTrash />
				</ActionIcon>
			</Group>
		),
		header: () => (
			<Group gap={0} justify='center'>
				<Box
					w={'1.75rem'}
					h={'1.75rem'}
					style={{
						borderRadius: 4,
						backgroundColor: 'var(--mantine-color-accent-0)',
						alignContent: 'center',
						justifyContent: 'center',
					}}
					onClick={(e) => {
						e.stopPropagation();
						e.preventDefault();
						setFiltersEnabled(!filtersEnabled);
					}}
				>
					<FaFilter />
				</Box>
			</Group>
		),
		meta: {
			filterVariant: 'counter',
		},
		size: 32,
		maxSize: 32,
		enableSorting: false,
	}),
	columnHelper.accessor('prefix', {
		id: 'prefix',
		cell: ({ cell }: any) => (
			<Group justify='center'>
				<Text>{cell.getValue()}</Text>
			</Group>
		),
		header: () => <Text fw={600}>Prefix</Text>,
		meta: {
			filterVariant: 'mantineSelect',
		},
		filterFn: (row, id, value) => {
			if (value === null) return true;
			return row.getValue(id) === value;
		},
		size: 32,
		maxSize: 32,
	}),
	columnHelper.accessor('provider', {
		id: 'provider',
		cell: ({ cell }: any) => (
			<Text mx={8} style={{ textAlign: 'center' }}>
				{cell.getValue()}
			</Text>
		),
		header: () => <Text fw={600}>Provider</Text>,
		meta: {
			filterVariant: 'mantineSelect',
		},
		size: 128,
		maxSize: 128,
	}),
	columnHelper.accessor('searchTerm', {
		id: 'searchTerm',
		cell: ({ cell }: any) => (
			<Group
				style={{
					overflow: 'hidden',
					whiteSpace: 'nowrap',
					textOverflow: 'ellipsis',
				}}
			>
				<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
					{cell.getValue()}
				</Text>
			</Group>
		),
		header: () => <Text fw={600}>Search String</Text>,
		meta: {
			filterVariant: 'text',
		},
		maxSize: 1920,
	}),
	columnHelper.accessor('dateTimeStamp', {
		id: 'dateTimeStamp',
		cell: ({ cell }: any) => {
			const m = new Date(cell.getValue());
			const year = `${m.getFullYear()}`.slice(-2);
			const month = `0${m.getMonth() + 1}`.slice(-2);
			const day = `0${m.getDate()}`.slice(-2);
			const hours = `0${m.getHours()}`.slice(-2);
			const minutes = `0${m.getMinutes()}`.slice(-2);
			const dateString = `${month}/${day}/${year} ${hours}:${minutes}`;

			return (
				<Group justify='center'>
					<Text mx={8}>{dateString}</Text>
				</Group>
			);
		},
		header: () => <Text fw={600}>Time Stamp</Text>,
		meta: {
			filterVariant: 'range',
		},
		filterFn: (row, id, value) => {
			const startDate = new Date(value[0]);
			const endDate = new Date(value[1]);
			const cellDate = new Date(row.getValue(id));
			if (value[0] && value[1]) {
				return cellDate >= startDate && cellDate <= endDate;
			}
			return true;
		},
		size: 132,
		maxSize: 132,
		minSize: 132,
	}),
];