import { Group, Stack, Text } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DataTable, DeleteItemModal, SettingsHeader } from 'components';
import { SearchHistoryColumns } from 'components/Columns/SearchHistoryColumns';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
import type { SearchHistoryItem } from 'types';

const SearchHistory = () => {
	const searchEndpoint = 'api/searchHistory';
	const { data: historyData, isFetching: historyDataIsFetching } = useQueryAPI({
		endpoint: searchEndpoint,
	});
	const searchHistory: SearchHistoryItem[] = historyData || [];
	const [searchValue, setSearchValue] = useState<string | number>('');
	const [searchHistoryItem, setSearchHistoryItem] = useState<SearchHistoryItem>();
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const [isLoading, setIsLoading] = useState(false);
	const { isMobile, handleDelete } = useCommonHooks();
	const [filtersEnabled, setFiltersEnabled] = useState(false);
	const [globalFilter, setGlobalFilter] = useState<string | number>('');
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const handleClose = () => {
		closeModal();
	};

	const [sorting, setSorting] = useState([
		{
			id: 'dateTimeStamp',
			desc: true,
		},
	]);

	useEffect(() => {
		setGlobalFilter(debouncedSearch);
		if (debouncedSearch === globalFilter) {
			setIsLoading(false);
		}
	}, [debouncedSearch, globalFilter]);

	return (
		<Stack w={'100%'}>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				handleDelete={() => handleDelete(searchHistoryItem, 'api/searchHistory')}
				title={'Delete Search History Item'}
				body={
					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
						<Text>Are you sure you want to delete this Search History Item?</Text>
						<Group>
							<Text
								className={textClasses.deleteItem}
								classNames={textClasses}
							>{`${searchHistoryItem?.provider}`}</Text>
							<Text
								className={textClasses.deleteItem}
								classNames={textClasses}
							>{`"${searchHistoryItem?.searchTerm}"`}</Text>
						</Group>
						<Text c='red'>This action cannot be undone!</Text>
					</Stack>
				}
			/>
			<SettingsHeader
				setDragging={undefined}
				openModal={undefined}
				title={'Search History'}
				tooltip={{
					title:
						'All searches are stored in the database and can be found in this table.',
					highlightList: ['searches', 'search', 'provider', 'prefix'],
					description:
						'Searches can be reviewed in the table on this page and can be deleted if necessary.',
				}}
				searchValue={searchValue}
				setSearchValue={setSearchValue}
				searchPlaceholder={'Search your Search History...'}
				isLoading={isLoading}
				setIsLoading={setIsLoading}
			/>
			<Stack
				mt={isMobile ? '10rem' : '6rem'}
				mb={isMobile ? '6rem' : '1rem'}
				align='center'
			>
				<Stack h={'calc(100vh - 14rem)'} w={'100%'} p={'1rem'} pt={0} mt={'1rem'} gap={0}>
					<Stack h={'inherit'} style={{ overflow: 'scroll', whiteSpace: 'none' }}>
						<DataTable
							data={searchHistory}
							columns={SearchHistoryColumns(
								setSearchHistoryItem,
								openModal,
								filtersEnabled,
								setFiltersEnabled,
							)}
							sorting={sorting}
							setSorting={setSorting}
							filtersEnabled={filtersEnabled}
							globalFilter={globalFilter}
							setGlobalFilter={setGlobalFilter}
							isRefreshing={historyDataIsFetching}
						/>
					</Stack>
				</Stack>
			</Stack>
		</Stack>
	);
};

export default SearchHistory;