'use client';

export const revalidate = 0;

import { LegacyRef, ReactNode, useEffect, useState } from 'react';
import { useGetTripVehiclesQuery, useGetVehicleCurrentLocationQuery } from '@/app/_globalRedux/services/trackingDashboard';
import { useInView } from 'react-intersection-observer';
import { GetListVehiclesMobResponse, VehicleData } from '@/app/_globalRedux/services/types/getListVehiclesmobTypes';
import { Skeleton, Tooltip } from 'antd';
import { RootState } from '@/app/_globalRedux/store';
import { useDispatch, useSelector } from 'react-redux';
import { DownloadOutlined } from '@ant-design/icons';
import moment from 'moment';
import { exportXlsx } from '@/app/helpers/exportXlsx';
import { TripVehicleOverviewCard } from './TripVehicleOverviewCard';
import { TripVehicleOverviewCardSkeleton } from './TripVehicleOverviewCardSkeleton';

import { setAllMarkers, updateMarkersBasedOnStatus } from '@/app/_globalRedux/dashboard/markersSlice';
import { convertToGetListVehiclesMobResponse } from '@/app/helpers/convertToGetListVehiclesMobResponse';

export const TripList = ({ selectedVehicleStatus }: { selectedVehicleStatus: string }) => {
	const { userId, groupId } = useSelector((state: RootState) => state.auth);
	const markers = useSelector((state: RootState) => state.markers);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const historyReplay = useSelector((state: RootState) => state.historyReplay);
	const selectedDashboardVehicle = useSelector((state: RootState) => state.selectedDashboardVehicle);
	const { mapYourVehicleIndex, driverInfoIndex, createPOIIndex } = useSelector((state: RootState) => state.vehicleOverviewOptions);
	const { type: vehicleListType } = useSelector((state: RootState) => state.isVehicleStatusOrTripStatusActive);
	const isTripVehiclesLoading = useSelector((state: RootState) =>
		Object.values(state.allTripApi.queries).some((query) => query && query.endpointName === 'getAllVehicles' && query.status === 'pending')
	);

	const [currentPage, setCurrentPage] = useState(10);
	const [delayTrip, setDelayTrip] = useState<VehicleData[]>([]);
	const [data, setData] = useState<GetListVehiclesMobResponse>();

	const dispatch = useDispatch();

	const [ref, inView] = useInView({
		threshold: 0,
	});

	const {
		isFetching,
		data: tripData,
		isSuccess,
		isLoading: isTripDataLoading,
	} = useGetTripVehiclesQuery(
		{
			userId,
			token: groupId,
			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: selectedVehicleStatus,
		},
		{
			skip:
				!groupId ||
				!userId ||
				selectedDashboardVehicle.length > 0 ||
				mapYourVehicleIndex !== -1 ||
				driverInfoIndex !== -1 ||
				createPOIIndex !== -1 ||
				vehicleListType === 'vehicle'
					? true
					: false,
		}
	);

	const {
		data: currentVehicleLocationData,
		isLoading,
		isFetching: isFetchingCurrentVehicleLocation,
	} = useGetVehicleCurrentLocationQuery(
		{
			userId: Number(userId),
			vehId: selectedVehicle.vId,
		},
		{ skip: selectedVehicle?.vehicleTrip?.sys_service_id === 0 || historyReplay?.isHistoryReplayMode, pollingInterval: 30000 }
	);

	useEffect(() => {
		if (inView) {
			setTimeout(() => setCurrentPage((prev) => prev + 10), 2000);
		}
	}, [inView]);

	useEffect(() => {
		if (tripData && tripData.message !== 'Something wrong happend') {
			setData(convertToGetListVehiclesMobResponse(tripData));
		}
	}, [tripData, isTripVehiclesLoading]);

	useEffect(() => {
		if (selectedDashboardVehicle.length > 0 && tripData) {
			const filteredList = tripData.list.filter((vehicle) =>
				selectedDashboardVehicle.some((searchedVehicle) => searchedVehicle.vehicleData.vId === vehicle.sys_service_id)
			);

			const newData = convertToGetListVehiclesMobResponse({
				...tripData,
				list: filteredList,
			});

			if (JSON.stringify(newData) !== JSON.stringify(data)) {
				setData(newData);
			}
		} else if (tripData && JSON.stringify(tripData) !== JSON.stringify(data)) {
			setData(convertToGetListVehiclesMobResponse(tripData));
		}

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedDashboardVehicle]);

	useEffect(() => {
		if (selectedVehicle && selectedVehicle.vehicleTrip && selectedVehicle?.vehicleTrip?.sys_service_id !== 0) {
			if (!isLoading && !isFetchingCurrentVehicleLocation && !historyReplay.isHistoryReplayMode) {
				if (currentVehicleLocationData?.success === true && data && data.list.length > 1) {
					dispatch(
						setAllMarkers(
							data.list.map((vehicle) =>
								Number(vehicle.vId) === Number(currentVehicleLocationData.list.vehid)
									? {
											...vehicle,
											visibility: true,
											isMarkerInfoWindowOpen: false,
											gpsDtl: { ...vehicle.gpsDtl, latLngDtl: currentVehicleLocationData.list.latLngDtl },
									  }
									: { ...vehicle, visibility: false, isMarkerInfoWindowOpen: false }
							)
						)
					);
				}
			}
		} else if (isTripDataLoading === false && isSuccess && data && data.list.length > 1 && markers.length === 0) {
			dispatch(setAllMarkers(data.list.map((vehicle) => ({ ...vehicle, visibility: true, isMarkerInfoWindowOpen: false }))));
		} else if (isTripDataLoading === false && isSuccess && data && data.list.length > 1 && markers.length > 0) {
			dispatch(
				updateMarkersBasedOnStatus(
					data.list.map((vehicle) =>
						markers.find((marker) => marker.vId === vehicle.vId)
							? { ...vehicle, visibility: true, isMarkerInfoWindowOpen: false }
							: { ...vehicle, visibility: false, isMarkerInfoWindowOpen: false }
					)
				)
			);
		} else if (isTripDataLoading === false && isSuccess && data && data.list.length === 0 && markers.length > 0) {
			dispatch(setAllMarkers(markers.map((vehicle) => ({ ...vehicle, visibility: false, isMarkerInfoWindowOpen: false }))));
		}

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [currentVehicleLocationData, tripData]);

	useEffect(() => {
		if (data && data.list.length && markers.length === 0) {
			dispatch(setAllMarkers(data.list.map((vehicle) => ({ ...vehicle, visibility: true, isMarkerInfoWindowOpen: false }))));
		} else if (data && data.list.length && markers.length) {
			dispatch(updateMarkersBasedOnStatus(data.list.map((vehicle) => ({ ...vehicle, visibility: true, isMarkerInfoWindowOpen: false }))));
		}
		if (data) setDelayTrip(data.list.filter((vehicleData) => vehicleData.vehicleTrip.delay));
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [data]);

	if (isFetching && !data) {
		return (
			<WrapperComponent refs={ref} isFetching={isFetching}>
				<TripVehicleOverviewCardSkeleton />
			</WrapperComponent>
		);
	}

	return (
		<WrapperComponent
			refs={ref}
			currentPage={currentPage}
			list={(data && selectedVehicleStatus !== 'Delay' ? data.list : delayTrip) || []}
			isFetching={isFetching}
		>
			{selectedVehicle.searchType !== 'GLOBAL' ? (
				data && selectedVehicleStatus !== 'Delay' ? (
					data.list.slice(0, currentPage).map((vehicle) => (
						<span key={vehicle.vehicleTrip.sys_service_id}>
							<TripVehicleOverviewCard vehicleData={vehicle} />
						</span>
					))
				) : (
					data &&
					data.list
						.filter((vehicleData) => vehicleData.vehicleTrip.delay)
						.slice(0, currentPage)
						.map((vehicle) => (
							<span key={vehicle.vehicleTrip.sys_service_id}>
								<TripVehicleOverviewCard vehicleData={vehicle} />
							</span>
						))
				)
			) : (
				<TripVehicleOverviewCard vehicleData={selectedVehicle} />
			)}
		</WrapperComponent>
	);
};

const WrapperComponent = ({
	children,
	refs,
	currentPage,
	list,
	isFetching,
}: {
	children: ReactNode;
	refs: LegacyRef<HTMLDivElement>;
	currentPage?: number;
	list?: VehicleData[] | [];
	isFetching: boolean;
}) => {
	const collapseVehicleStatusToggle = useSelector((state: RootState) => state.collapseTripStatusToggle);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const [updateDate, setUpdateDate] = useState('0');
	useEffect(() => {
		if (isFetching) {
			setUpdateDate(moment().format('HH:mm:ss'));
		}
	}, [isFetching]);
	return (
		<div className='bg-neutral-green relative'>
			<div className='flex items-center justify-between mb-3 absolute -top-7 left-[15px]  w-[calc(100%-38px)]'>
				<p className=' text-gray-600 font-semibold pl-2 text-[13px]'>Vehicles Count: {list && list.length}</p>

				<div className='flex items-center pr-2'>
					<div className='text-[13px] text-gray-600 font-semibold flex'>
						<div>Updated At: </div>
						{isFetching || updateDate === '0' ? (
							<div className='w-[65px] pl-[5px]'>
								<div className='lds-ring ml-[2.5px]'>
									<div></div>
									<div></div>
									<div></div>
									<div></div>
								</div>
							</div>
						) : (
							<div className='w-[65px] text-nowrap ml-[3px]'> {updateDate}</div>
						)}
					</div>
					<div
						className={`bg-gray-600 h-[22px] w-[22px] flex justify-center items-center rounded-full  ${
							isFetching || updateDate === '0' ? 'cursor-progress' : 'cursor-pointer'
						}`}
					>
						<Tooltip title={`Download Selected Vehicle Report`} mouseEnterDelay={1}>
							<DownloadOutlined
								style={{ color: '#F2F5F3' }}
								disabled={isFetching || updateDate === '0'}
								onClick={() => {
									if (list && list.length > 0) {
										const rows = list.map((item, index) => ({
											'Vehicle No.': item.vehReg,
											'Serial No.': index + 1,
											Lat: item.gpsDtl.latLngDtl.lat,
											Long: item.gpsDtl.latLngDtl.lng,
											Address: item.gpsDtl.latLngDtl.addr?.replaceAll('_', ' '),
											Time: item.gpsDtl.latLngDtl.gpstime,
											Speed: item.gpsDtl.speed,
											'Idle Time': item.gpsDtl.modeTime === '01 Jan 1970 05:30:00' ? '' : item.gpsDtl.modeTime,
											Mode: item.gpsDtl.mode,
										}));
										exportXlsx(rows, 'Vehicle Report', 'Vehicle Report.xlsx');
									}
								}}
							/>
						</Tooltip>
					</div>
				</div>
			</div>
			<div
				className={`h-[calc(100vh-185px)] bg-neutral-green top-0 p-4 pt-0 scrollbar-thumb-thumb-green scrollbar-w-2  scrollbar-thumb-rounded-md scrollbar overflow-visible ${
					collapseVehicleStatusToggle ? 'opacity-0' : 'overflow-y-scroll'
				} mt-7`}
			>
				{children}
				{currentPage && list && selectedVehicle.searchType !== 'GLOBAL' ? (
					<div className=' w-full px-4 my-4' ref={refs}>
						{currentPage < list.length ? <Skeleton className='pt-5' active /> : ''}
					</div>
				) : null}
			</div>
		</div>
	);
};