'use client';

import { RootState } from '@/app/_globalRedux/store';
import React, { useEffect, useRef, useState } from 'react';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import { useDispatch, useSelector } from 'react-redux';
import MultipleVehicleMarkers from './MultipleVehicleMarkers';
import { setOlMap } from '@/app/_globalRedux/dashboard/olMapSlice';
import SelectedVehicleMarker from './SelectedVehicleMarker';
import Image from 'next/image';
import SelectedVehiclePolyline from './SelectedVehiclePolyline';
import StartAndEndMarkers from './StartAndEndMarkers';
import { ReactLeafletHistoryReplaySlider } from './ReactLeafletHistoryReplaySlider';
import { FloatButton } from 'antd';
import { HistoryReplayToggle } from '../HistoryReplayToggle';
import { PoiToggle } from '../PoiToggle';
import { PolygonToggle } from '../PolygonToggle';
import NearbyVehiclesToggle from '../nearbyVehicles/NearbyVehiclesToggle';
import { ClusterToggle } from '../ClusterToggle';
import { SettingOutlined } from '@ant-design/icons';
import { ReactLeafletPoiMarkers } from './ReactLeafletPoiMarkers';
import { ReactLeafletDrawing } from './ReactLeafletDrawing';

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import { ReactLeafletStoppageMarkers } from './ReactLeafletStoppageMarkers';
import { ReactLeafletCreateTripOrPlanMarker } from './ReactLeafletCreateTripOrPlanMarker';
import { PathArrayItem } from '@/app/_globalRedux/services/types/getItnaryWithMapResponse';
import { iconFactory } from './utils/iconFactory';
import { ReactLeafletNearbyVehiclesMarker } from './ReactLeafletNearbyVehiclesMarker';
import { ReactLeafletAlertMarkers } from './ReactLeafletAlertMarkers';
import ReactLeafletMapController from './ReactLeafletMapController';
import { Map } from 'leaflet';
import { isCheckInAccount } from '@/app/helpers/isCheckInAccount';
import { ReactLeafletCheckInMarkers } from './ReactLeafletCheckInMarkers';
import { VehicleData } from '@/app/_globalRedux/services/types/getListVehiclesmobTypes';

function ReactLeaflet() {
	const dispatch = useDispatch();
	const mapRef = useRef<Map | null>(null);

	const { containerStyle, centerOfMap, zoomNo } = useSelector((state: RootState) => state.map);
	const { type: createTripOrPlanningTripActive } = useSelector((state: RootState) => state.createTripOrPlanningTripActive);
	const vehicleItnaryWithPath = useSelector((state: RootState) => state.vehicleItnaryWithPath);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const historyReplay = useSelector((state: RootState) => state.historyReplay);
	const { isGetNearbyVehiclesActive } = useSelector((state: RootState) => state.nearbyVehicles);
	const { userId, parentUser } = useSelector((state: RootState) => state.auth);

	const { isLoadingScreenActive } = useSelector((state: RootState) => state.map);

	const isPathWithDateDaignosticLoading = useSelector((state: RootState) =>
		Object.values(state.allTripApi.queries).some((q) => q && q.endpointName === 'getpathwithDateDaignostic' && q.status === 'pending')
	);
	const isGetVehicleCurrentLocationLoading = useSelector((state: RootState) =>
		Object.values(state.allTripApi.queries).some((q) => q && q.endpointName === 'getVehicleCurrentLocation' && q.status === 'pending')
	);

	const isgetVehicleCurrentLocationFulfilledTimetampUndefined = useSelector((state: RootState) =>
		Object.values(state.allTripApi.queries).some((q) => q && q.endpointName === 'getVehicleCurrentLocation' && q.fulfilledTimeStamp === undefined)
	);

	const [manualReRenderMapLoader, setManualReRenderMapLoader] = useState(false);
	const [isFloatSettingButtons, setIsFloatSettingButtons] = useState(false);
	const [checked, setChecked] = useState('');

	const [poiUpdating, setPoiUpdating] = useState(false);

	useEffect(() => {
		dispatch(setOlMap(mapRef.current));
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [containerStyle]);

	useEffect(() => {
		if (createTripOrPlanningTripActive !== 'create-trip' && createTripOrPlanningTripActive !== 'trip-planning') {
			setPoiUpdating(true);

			setTimeout(() => setPoiUpdating(false), 1000);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [containerStyle.width]);

	const [prevSelectedVehicle, setPrevSelectedVehicle] = useState<VehicleData | null>(null);

	useEffect(
		() => {
			if (prevSelectedVehicle?.vId !== selectedVehicle.vId && !isGetVehicleCurrentLocationLoading) {
				setPrevSelectedVehicle(selectedVehicle);
				setManualReRenderMapLoader(true);
				setTimeout(() => setManualReRenderMapLoader(false), 3000);
			}
		},
		// eslint-disable-next-line react-hooks/exhaustive-deps
		[selectedVehicle, isGetVehicleCurrentLocationLoading]
	);

	return (
		<>
			{manualReRenderMapLoader ||
			isPathWithDateDaignosticLoading ||
			isLoadingScreenActive ||
			isgetVehicleCurrentLocationFulfilledTimetampUndefined ||
			(poiUpdating && createTripOrPlanningTripActive !== 'create-trip' && createTripOrPlanningTripActive !== 'trip-planning') ? (
				<div
					style={{
						justifyContent: 'center',
						alignItems: 'center',
						display: 'flex',
						objectFit: 'cover',
						position: containerStyle.position,
						float: containerStyle.float,
						height: containerStyle.height,
						width: containerStyle.width,
					}}
				>
					<Image src='/assets/images/map/indiaMap.png' width='2236' height='1560' alt='India Map' className='object-cover h-screen blur-[2px]' />
					<div className='absolute flex items-center justify-center'>
						<span className='loader'></span>
					</div>
				</div>
			) : (
				<div style={{ ...containerStyle, width: containerStyle.width }}>
					<MapContainer
						center={[centerOfMap.lat, centerOfMap.lng]}
						zoom={zoomNo}
						scrollWheelZoom={true}
						style={{ width: '100%', height: '100%' }}
						fadeAnimation={true}
						ref={(ref) => {
							if (!mapRef.current) mapRef.current = ref;
						}}
					>
						<TileLayer
							url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
							attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
							maxZoom={18}
						/>
						(
						<>
							{isGetNearbyVehiclesActive && selectedVehicle.nearbyVehicles && selectedVehicle.nearbyVehicles.length > 0 ? (
								<ReactLeafletNearbyVehiclesMarker />
							) : createTripOrPlanningTripActive !== '' ? (
								<ReactLeafletCreateTripOrPlanMarker />
							) : (
								<>
									<MultipleVehicleMarkers />
									<SelectedVehicleMarker />
								</>
							)}
							<ReactLeafletMapController />

							{isCheckInAccount(Number(userId)) ? (
								<>{selectedVehicle.vId === 0 ? null : <ReactLeafletCheckInMarkers />}</>
							) : (
								<>
									<StartAndEndMarkers />
									<SelectedVehiclePolyline />
									<ReactLeafletHistoryReplaySlider />
									<ReactLeafletPoiMarkers />
									<ReactLeafletDrawing />

									{!isGetNearbyVehiclesActive && selectedVehicle.selectedVehicleHistoryTab === 'Alerts' ? <ReactLeafletAlertMarkers /> : null}

									{!isGetNearbyVehiclesActive &&
									(selectedVehicle.selectedVehicleHistoryTab === 'All' ||
										selectedVehicle.selectedVehicleHistoryTab === 'Stoppages' ||
										selectedVehicle.selectedVehicleHistoryTab === 'Running' ||
										selectedVehicle.selectedVehicleHistoryTab === 'Diagnostic') ? (
										<ReactLeafletStoppageMarkers />
									) : null}
								</>
							)}

							{isCheckInAccount(Number(userId)) ? null : (
								<>
									{/* Marker on polyline hover for amanbus, kmt, kmtggn, mehtas and girirajtours */}
									{(Number(userId) === 3356 ||
										Number(parentUser) === 3356 ||
										Number(userId) === 87470 ||
										Number(parentUser) === 87470 ||
										Number(userId) === 82815 ||
										Number(parentUser) === 82815 ||
										Number(userId) === 85380 ||
										Number(userId) === 6265 ||
										Number(userId) === 6264 ||
										Number(userId) === 83213) &&
									selectedVehicle.vId !== 0 &&
									vehicleItnaryWithPath &&
									vehicleItnaryWithPath.patharry &&
									vehicleItnaryWithPath.patharry.length >= 2 &&
									historyReplay.isHistoryReplayMode
										? vehicleItnaryWithPath.patharry.map((marker, index) => (
												<Marker
													key={index}
													position={{ lat: marker.lat, lng: marker.lng }}
													icon={iconFactory('/assets/images/map/vehicles/vehicle-red.png')}
													opacity={0}
												>
													<PolylineMouseOverInfoWindow infoWindowState={{ index, lat: marker.lat, lng: marker.lng }} marker={marker} />
												</Marker>
										  ))
										: null}

									{
										<FloatButton.Group
											open={isFloatSettingButtons}
											trigger='click'
											onClick={() => setIsFloatSettingButtons(!isFloatSettingButtons)}
											style={{ insetInlineEnd: 10, insetBlockEnd: 50 }}
											icon={<SettingOutlined />}
										>
											<HistoryReplayToggle />
											<PoiToggle checked={checked} setChecked={setChecked} />
											<PolygonToggle />
											{selectedVehicle.vId !== 0 ? <NearbyVehiclesToggle /> : null}
											{selectedVehicle.vId === 0 ? <ClusterToggle setLoading={setManualReRenderMapLoader} /> : null}
										</FloatButton.Group>
									}
								</>
							)}
						</>
					</MapContainer>
				</div>
			)}
		</>
	);
}

export default ReactLeaflet;

const PolylineMouseOverInfoWindow = ({
	infoWindowState,
	marker,
}: {
	infoWindowState: { index: number; lat: number; lng: number };
	marker: PathArrayItem;
}): JSX.Element => {
	return (
		<Popup position={{ lat: infoWindowState.lat, lng: infoWindowState.lng }}>
			<div className='text-xs text-gray-800 flex flex-col gap-1 w-80'>
				<div className='mb-2 font-medium text-lg'>Polyline Information</div>

				<div className='grid grid-cols-5 gap-2 grid-flow-row-dense text-sm font-normal'>
					<div className='col-span-2 font-medium text-neutral-700 '>Date Time:</div> <div className='col-span-3'>{marker.datetime}</div>
					<div className='col-span-2 font-medium text-neutral-700 '>Distance: </div>{' '}
					<div className='col-span-3'>{marker.distance?.toFixed(2)} KM</div>
					<div className='col-span-2 font-medium text-neutral-700 '>Location:</div>{' '}
					<div className='col-span-3'>
						{marker.lat?.toFixed(4)} ⎪ {marker.lng?.toFixed(4)}
					</div>
					<div className='col-span-2 font-medium text-neutral-700 '>Speed:</div> <div className='col-span-3'>{marker.speed} Km/h</div>
				</div>
			</div>
		</Popup>
	);
};