import { Box, CssBaseline, ListItem, List, Divider, Tooltip } from '@mui/material';
import { useTitle } from 'core/hooks/title';
import { useTranslation } from 'react-i18next';
import { useCallback, useState } from 'react';
import {
	IAttribute,
	IAttributeFilter,
	IDateFilter,
	InsightView,
	newNegativeAttributeFilter,
	ObjRef,
} from '@gooddata/sdk-ui-all';
import * as idRef from 'gooddata/catalog.ts';
import StyledDrawer from 'components/navigation/StyledDrawer';
import StyledHeaderListItemText from 'components/navigation/StyledHeaderListItemText';
import StyledListItem from 'components/navigation/StyledListItem';
import StyledListItemButton from 'components/navigation/StyledListItemButton';
import StyledFilterBar from 'core/components/filtering/StyledFilterBar';
import { AttributeFilterReports } from 'core/components/filtering/AttributeFilter';
import { DateFilterReports } from 'core/components/filtering/DateFilter';
import { PredefinedDateOptionKey } from 'core/components/filtering/dateFilterConstants';
import TruncatedListItemText from 'components/navigation/TruncatedListItemText';

export default function Basic() {
	const { t } = useTranslation('reports');

	useTitle(`${t('basic.title')} - ${t('core:title')}`);

	const insight: [string, string, [ObjRef | null, string, PredefinedDateOptionKey, string], IAttribute[]][] = [
		[
			'Inspection Summary',
			idRef.Insights.InspectionSummaryBasicReport,
			[
				idRef.DateDatasets.InspectionStartDatetimeInspectInspection,
				'Inspection Start Datetime (Inspect Inspection)',
				'LAST_7_DAYS',
				idRef.Insights.InspectionSummaryBasicReport,
			],
			[
				idRef.InspectorCodeFullNameInspectInspector,
				idRef.GroupNameInspectUserGroup,
				idRef.HasOOSDriverInspectInspection,
				idRef.HasOOSVehicleInspectInspection,
				idRef.HazmatTypeCodeFullInspectInspection,
				idRef.InspectionLevelInspectInspection,
				idRef.LocationCodeInspectInspection,
			],
		],
		[
			'Citations Issued',
			idRef.Insights.CitationsIssuedBasicReport,
			[
				idRef.DateDatasets.InspectionStartDatetimeInspectInspection,
				'Inspection Start Datetime (Inspect Inspection)',
				'LAST_7_DAYS',
				idRef.Insights.CitationsIssuedBasicReport,
			],
			[idRef.InspectorCodeFullNameInspectInspector, idRef.LocationCodeInspectInspection],
		],
		[
			'PRISM New Entrant Vehicle',
			idRef.Insights.PRISMNewEntrantVehiclesBasicReport,
			[
				idRef.DateDatasets.NewEntrantEntryDatePRISMVehicleEntered,
				'New Entrant Entry Date (PRISM Vehicle Entered)',
				'LAST_7_DAYS',
				idRef.Insights.PRISMNewEntrantVehiclesBasicReport,
			],
			[idRef.VehicleLicensePlateStateCodePRISMVehicleEntered, idRef.USDOTPRISMVehicleEntered],
		],
		// Add more insights as needed
	];

	const [insightId, setInsightId] = useState(insight[0][1]);

	const selectedInsight = insight.find(([, id]) => id === insightId);
	const selectedDateDataset = selectedInsight ? selectedInsight[2] : null;
	const customFilterName = selectedDateDataset ? selectedDateDataset[1] : '';
	const selectedAttributeFilter = selectedInsight ? selectedInsight[3] : [];

	const [attributeFilters, setAttributeFilters] = useState<IAttributeFilter[]>(
		selectedAttributeFilter.map((ref) => newNegativeAttributeFilter(ref, [])),
	);

	const handleInsightChange = (id: string) => {
		setInsightId(id);
		setInsightId(id);
		const found = insight.find(([, i]) => i === id);
		const attrRefs = found ? found[3] : [];
		setAttributeFilters(attrRefs.map((ref) => newNegativeAttributeFilter(ref, [])));
		setDateFilter(null);
	};

	const [dateFilter, setDateFilter] = useState<IDateFilter | null>(null);

	const handleFilterApply = (updatedFilter: IAttributeFilter, index: number) => {
		setAttributeFilters((prevFilters) => {
			const newFilters = [...prevFilters];
			newFilters[index] = updatedFilter;
			return newFilters;
		});
	};

	const handleDateFilterApply = useCallback((selectedFilterOption: IDateFilter) => {
		setDateFilter({
			...selectedFilterOption,
		});
	}, []);

	const filters = [...attributeFilters, ...(dateFilter ? [dateFilter] : [])];

	return (
		<Box sx={{ display: 'flex', height: '100%' }}>
			<CssBaseline />
			<StyledDrawer variant="permanent" anchor="left">
				<List>
					<ListItem>
						<StyledHeaderListItemText primary="REPORTS" />
					</ListItem>
				</List>
				<Divider />
				<List>
					{insight.map(([text, id]) => (
						<Tooltip key={id} title={text} placement="right" arrow>
							<StyledListItem selected={insightId === id}>
								<StyledListItemButton onClick={() => handleInsightChange(id)}>
									<TruncatedListItemText primary={text} />
								</StyledListItemButton>
							</StyledListItem>
						</Tooltip>
					))}
				</List>
			</StyledDrawer>
			<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
				<StyledFilterBar>
					{selectedDateDataset && selectedDateDataset[0] && (
						<DateFilterReports
							dataSet={selectedDateDataset[0]}
							customFilterName={customFilterName}
							dateRangeOption={selectedDateDataset[2]}
							onDateFilterChange={handleDateFilterApply}
							reportId={selectedDateDataset[3]}
						/>
					)}
					<AttributeFilterReports filters={attributeFilters} onApply={handleFilterApply} />
				</StyledFilterBar>
				<Box sx={{ flexGrow: 1, overflow: 'auto' }}>
					<InsightView insight={insightId} filters={filters} />
				</Box>
			</Box>
		</Box>
	);
}