'use client';

import { RootState } from '@/app/_globalRedux/store';
import { Button, ConfigProvider, DropdownProps, Select } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setIsLoadingScreenActive, setOpenStoppageIndex } from '@/app/_globalRedux/dashboard/mapSlice';
import { SelectedDashboardVehicleState, setDashboardSelectedVehicleStatus } from '@/app/_globalRedux/dashboard/dashboardVehicleDetailsSelect';
import React, { useEffect, useState } from 'react';

import {
	trackingDashboard,
	useLazyGetTripVehiclesQuery,
	useLazyGetVehicleCurrentLocationQuery,
	useLazyGetVehiclesByStatusQuery,
} from '@/app/_globalRedux/services/trackingDashboard';
import { removeSelectedVehicle } from '@/app/_globalRedux/dashboard/selectedVehicleSlice';
import { setIsGetNearbyVehiclesActive } from '@/app/_globalRedux/dashboard/nearbyVehicleSlice';
import { resetLiveVehicleItnaryWithPath } from '@/app/_globalRedux/dashboard/liveVehicleSlice';
import updateMultiVehicleMovement from '@/app/helpers/updateMultiVehicleMovement';
import { setClusterActive, setClusterDiactive } from '@/app/_globalRedux/common/clusterSlice';
import { setIsDashboardVehicleDetailsSearchTriggeredActive } from '@/app/_globalRedux/dashboard/isDashboardVehicleDetailsSearchTriggered';
import { setAllMarkers } from '@/app/_globalRedux/dashboard/markersSlice';
import moment from 'moment';
import { getNormalOrControllerId } from './utils/getNormalOrControllerId';

type SelectedStyles = {
	selectorBg: string;
	colorBorder: string;
	fontSize: number;
	optionFontSize: number;
	optionPadding: string;
	optionSelectedColor: string;
};

export const DashboardCheckInSelect = ({ selectedStyles }: { selectedStyles: SelectedStyles }) => {
	const dispatch = useDispatch();

	const markers = useSelector((state: RootState) => state.markers);
	const selectedDashboardVehicle = useSelector((state: RootState) => state.selectedDashboardVehicle);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const { groupId, userId, extra, parentUser } = useSelector((state: RootState) => state.auth);
	const auth = useSelector((state: RootState) => state.auth);

	const { accessLabel } = useSelector((state: RootState) => state.auth);

	const selectedVehicleListTab = useSelector((state: RootState) => state.selectedVehicleListTab);
	const { type: VehicleListType } = useSelector((state: RootState) => state.isVehicleStatusOrTripStatusActive);
	const { type: createTripOrPlanningTripActive } = useSelector((state: RootState) => state.createTripOrPlanningTripActive);
	const allVehicles = useSelector((state: RootState) => state.allVehicles);

	const [selectedDashboardVehicleLocalState, setDashboardSelectedVehicleLocalState] = useState<SelectedDashboardVehicleState[]>([
		...selectedDashboardVehicle,
	]);
	const [isFilterOpen, setIsFilterOpen] = useState(false);
	const [advanceFilterValues, setAdvanceFilterValues] = useState<{
		running_hr_val: string;
		running_hr_val2: string;
		ideal_hr_val: string;
		ideal_hr_val2: string;
		km_val: string;
		km_val2: string;
		search_data: 'overspeed' | 'runninghour' | 'idealhour' | 'km' | '';
		over_speed_val: string;
	}>({
		running_hr_val: '',
		running_hr_val2: '',
		ideal_hr_val: '',
		ideal_hr_val2: '',
		km_val: '',
		km_val2: '',
		search_data: '',
		over_speed_val: '',
	});
	const [currentVehicleIndex, setCurrentVehicleIndex] = useState(0);

	const filterOption = (input: string, option?: { label: string; value: number }) =>
		(option?.label ?? '').toLowerCase().includes(input.toLowerCase());

	const [customSelectOptions, setCustomSelectOptions] = useState<{ label: string; value: number }[]>([]);
	const [isLoading, setIsLoading] = useState(true);

	const tripData = trackingDashboard.endpoints.getTripVehicles.useQueryState({
		token: groupId,
		userId: userId,
		startDate: moment().subtract(15, 'days').startOf('date').format('YYYY-MM-DD HH:mm'),
		endDate: moment().format('YYYY-MM-DD HH:mm'),
		tripStatus: 'On Trip',
		tripStatusBatch: 'On Trip',
	});

	const toggleCluster = (str: string) => {
		if (str === 'clear') {
			dispatch(setClusterActive());
		} else {
			dispatch(setClusterDiactive());
		}
	};
	let count = 0;
	const searchSelectedVehicles = () => {
		dispatch(setIsLoadingScreenActive(true));
		dispatch(setIsDashboardVehicleDetailsSearchTriggeredActive());

		toggleCluster('');
		count += 1;

		dispatch(
			setAllMarkers(
				markers.map((marker) =>
					selectedDashboardVehicleLocalState.some((vehicle) => vehicle.vehicleData.vId === marker.vId)
						? {
								...marker,
								visibility: true,
						  }
						: {
								...marker,
								visibility: false,
						  }
				)
			)
		);

		dispatch(setOpenStoppageIndex(-1));
		dispatch(setDashboardSelectedVehicleStatus(selectedDashboardVehicleLocalState));

		// remove selected vehicle and close vehicle details
		dispatch(resetLiveVehicleItnaryWithPath());
		dispatch(resetLiveVehicleItnaryWithPath());

		dispatch(removeSelectedVehicle());
		dispatch(setIsGetNearbyVehiclesActive(false));

		setTimeout(() => dispatch(setIsLoadingScreenActive(false)), 1);
	};

	const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
		if (info.source === 'trigger' || nextOpen) {
			setIsFilterOpen(nextOpen);
		}
	};

	const [getVehicleCurrentLocation] = useLazyGetVehicleCurrentLocationQuery();
	const [triggerRefetchOfVehicleListBasedOnTabSelected] = useLazyGetVehiclesByStatusQuery();
	const [triggerRefetchOfTripVehicleListBasedOnTabSelected] = useLazyGetTripVehiclesQuery();

	useEffect(() => {
		if (selectedDashboardVehicleLocalState.length === 0 && selectedDashboardVehicle.length > 0) {
			dispatch(setDashboardSelectedVehicleStatus([]));
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedDashboardVehicleLocalState]);

	useEffect(() => {
		if (selectedDashboardVehicle.length > 0 && selectedVehicle.vId === 0 && createTripOrPlanningTripActive === '' && accessLabel !== 6) {
			const intervalId = setInterval(() => {
				setCurrentVehicleIndex((prevCount) => prevCount + 1);
			}, 5000);
			return () => clearInterval(intervalId);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedDashboardVehicle.length]);

	useEffect(() => {
		if (allVehicles.length > 0 && allVehicles[0].id !== 0) {
			if (VehicleListType === 'vehicle') {
				setCustomSelectOptions(
					allVehicles.map((vehicle: GetAllVehiclesListResponse['list'][0]) => ({
						label: vehicle.veh_reg,
						value: vehicle.id,
					}))
				);
			} else if (tripData.currentData && tripData.currentData.list.length > 0 && customSelectOptions.length !== tripData.currentData.list.length) {
				setCustomSelectOptions(
					allVehicles
						.filter((vehicle) => (tripData?.currentData?.list.find((trip) => trip.sys_service_id === vehicle.id) ? true : false))
						.map((vehicle) => ({ label: vehicle.veh_reg, value: vehicle.id }))
				);
			}

			setTimeout(() => {
				setIsLoading(false);
			}, 1);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [allVehicles, VehicleListType, tripData.currentData]);

	useEffect(() => {
		if (currentVehicleIndex != 0 && selectedVehicle.vId === 0 && accessLabel !== 6) {
			const index = currentVehicleIndex - 1;

			getVehicleCurrentLocation({
				userId: Number(auth.userId),
				vehId: accessLabel === 6 ? getNormalOrControllerId(selectedVehicle) : selectedVehicle.vId,
			}).then(({ data: currentVehicleLocationData }) => {
				if (!currentVehicleLocationData) return;

				updateMultiVehicleMovement({
					dispatch,
					currentVehicleLocationData,
					markers,
				});
			});
		}
		if (currentVehicleIndex >= selectedDashboardVehicle.length) {
			setCurrentVehicleIndex(0);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [currentVehicleIndex]);

	const triggerRefetch = () => {
		if (VehicleListType === 'trip' || VehicleListType === 'vehicle-allocation-trip') {
			triggerRefetchOfTripVehicleListBasedOnTabSelected({
				userId,
				token: groupId,
				startDate: moment().subtract(15, 'days').startOf('day').format('YYYY-MM-DD HH:mm'),
				endDate: moment().format('YYYY-MM-DD HH:mm'),
				tripStatus: 'On Trip',
				tripStatusBatch: selectedVehicleListTab,
			}).then(() => setTimeout(() => dispatch(setIsLoadingScreenActive(false), 1)));
		} else {
			triggerRefetchOfVehicleListBasedOnTabSelected({
				userId,
				token: groupId,
				pUserId: parentUser,
				mode: selectedVehicleListTab.toUpperCase() === 'ALL' ? '' : selectedVehicleListTab.toUpperCase(),
			}).then(() => setTimeout(() => dispatch(setIsLoadingScreenActive(false), 1)));
		}
	};
	return (
		<ConfigProvider
			theme={{
				components: {
					Button: { borderRadius: 0 },
					Select: {
						...selectedStyles,
						paddingContentVertical: 0,
						borderRadius: 0,
					},
					Dropdown: {
						paddingBlock: 10,
					},
				},
				token: {
					colorTextPlaceholder: '#aaa',
				},
			}}
		>
			<div className='relative flex items-center  right-10'>
				<div className='border border-[#468B8]'>
					<Select
						value={selectedDashboardVehicleLocalState.length > 0 ? selectedDashboardVehicleLocalState.map((marker) => marker.vehicleData.vId) : []}
						className='w-[400px]'
						placeholder='Search Users'
						onSelect={(e) => {
							const vehicleSelectedByFilter = markers
								.filter((marker) => marker.vId === e)
								.map((marker) => ({ vehicleData: marker, nearbyVehicles: undefined }));

							if (vehicleSelectedByFilter.length > 0) {
								setDashboardSelectedVehicleLocalState((prev) => [...prev, ...vehicleSelectedByFilter]);
							}
						}}
						onDeselect={(value) => {
							const vehicleSelectedByFilter = selectedDashboardVehicle.filter((marker) => marker.vehicleData.vId === value);

							if (vehicleSelectedByFilter) {
								setDashboardSelectedVehicleLocalState((prev) => prev.filter((vehicle) => vehicle.vehicleData.vId !== value));
							}
							if (selectedDashboardVehicleLocalState.length === 1) {
								dispatch(setIsLoadingScreenActive(true));
								setDashboardSelectedVehicleLocalState([]);
								toggleCluster('clear');

								triggerRefetch();
							}
						}}
						onClear={() => {
							dispatch(setIsLoadingScreenActive(true));
							setDashboardSelectedVehicleLocalState([]);
							toggleCluster('clear');

							triggerRefetch();
						}}
						maxTagCount='responsive'
						maxCount={55}
						allowClear={true}
						mode='multiple'
						options={customSelectOptions}
						disabled={isLoading}
						showSearch
						filterOption={filterOption}
						notFoundContent={'No Vehicles Found'}
						suffixIcon
					></Select>
				</div>
				<div className='rounded-r-md overflow-hidden'>
					<Button type='primary' onClick={searchSelectedVehicles}>
						Search
					</Button>
				</div>
			</div>
		</ConfigProvider>
	);
};