'use client';

import { Tabs } from 'antd';
import { TabsProps } from 'antd';
import { VehiclesList } from './VehiclesList';
import { useEffect, useState } from 'react';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { RootState } from '@/app/_globalRedux/store';
import { useDispatch, useSelector } from 'react-redux';
import { setCollapseVehicleStatusToggle } from '@/app/_globalRedux/dashboard/collapseVehicleStatusToggleSlice';
import { setContainerStyle } from '@/app/_globalRedux/dashboard/mapSlice';
import { initialSelectedVehicleState, setPrevVehicleSelected, setSelectedVehicleStatus } from '@/app/_globalRedux/dashboard/selectedVehicleSlice';
import { stopHistoryReplayInterval } from '@/app/_globalRedux/dashboard/historyReplaySlice';
import { setSelectedVehicleListTab } from '@/app/_globalRedux/dashboard/selectedVehicleListTab';
import { trackingDashboard, useGetCountDetailsQuery } from '@/app/_globalRedux/services/trackingDashboard';
import { setDashboardSelectedVehicleStatus } from '@/app/_globalRedux/dashboard/dashboardVehicleDetailsSelect';
import { setClusterActive } from '@/app/_globalRedux/common/clusterSlice';
import React from 'react';
import { isCheckInAccount } from '@/app/helpers/isCheckInAccount';
import { ActiveInActiveList } from './ActiveInActiveList';

export const VehicleStatusToggle = () => {
	const { accessLabel, groupId, userId, parentUser } = useSelector((state: RootState) => state.auth);

	const [tabsLabelStyling, setTabsLabelStyling] = useState({ key: 'all', style: 'bg-light-glow-green  border-dark-glow-green' });
	const collapseVehicleStatusToggle = useSelector((state: RootState) => state.collapseVehicleStatusToggle);
	const { containerStyle } = useSelector((state: RootState) => state.map);
	const markers = useSelector((state: RootState) => state.markers);
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const isVehicleStatusToggleFetching = useSelector((state: RootState) =>
		Object.values(state.allTripApi.queries).some((query) => query && query.endpointName === 'getVehiclesByStatus' && query.status === 'pending')
	);
	const dispatch = useDispatch();

	const { data: vehicleCounts } = useGetCountDetailsQuery(
		{
			userid: userId,
			groupid: groupId,
			puserid: parentUser,
		},
		{
			skip:
				!groupId ||
				!userId ||
				!parentUser ||
				(Number(userId) !== 3356 && Number(userId) !== 82815 && Number(parentUser) !== 3356 && Number(parentUser) !== 82815),
			pollingInterval: 10000,
		}
	);

	const onChange = (key: string) => {
		if (markers.length > 0) {
			dispatch(trackingDashboard.util.invalidateTags(['Vehicles-List-By-Status']));
			if (key !== 'collapse') {
				setTabsLabelStyling((prev) => ({ ...prev, key }));
				dispatch(setSelectedVehicleListTab(key));
			}
		}
	};

	useEffect(() => {
		if (collapseVehicleStatusToggle && selectedVehicle.vId === 0) {
			dispatch(setContainerStyle({ ...containerStyle, width: 'calc(100% - 20px)' }));
			dispatch(stopHistoryReplayInterval());
		} else if (selectedVehicle.vId === 0 && !collapseVehicleStatusToggle) {
			dispatch(setContainerStyle({ ...containerStyle, width: 'calc(100% - 450px)' }));
		} else if (selectedVehicle.vId !== 0 && collapseVehicleStatusToggle) {
			dispatch(setContainerStyle({ ...containerStyle, width: 'calc(100% - 480px)' }));
		} else if (!collapseVehicleStatusToggle && selectedVehicle.vId !== 0) {
			dispatch(setContainerStyle({ ...containerStyle, width: 'calc(100% - 900px)' }));
		}

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

	const getCount = (type: string) => {
		return vehicleCounts?.list.find((item) => item.mode.toLowerCase() === type)?.count;
	};

	const items: TabsProps['items'] = [
		...(isCheckInAccount(Number(userId))
			? [
					{
						key: 'all',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'all' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								All {getCount('all') || getCount('all') === 0 ? `(${getCount('all')})` : ''}
							</span>
						),
						children: <ActiveInActiveList />,
					},

					{
						key: 'active',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'active' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Active {getCount('all') || getCount('all') === 0 ? `(${getCount('all')})` : ''}
							</span>
						),
						children: <ActiveInActiveList />,
					},

					{
						key: 'inactive',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'inactive' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Inactive {getCount('all') || getCount('all') === 0 ? `(${getCount('all')})` : ''}
							</span>
						),
						children: <ActiveInActiveList />,
					},
			  ]
			: [
					{
						key: 'all',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'all' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								All {getCount('all') || getCount('all') === 0 ? `(${getCount('all')})` : ''}
							</span>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},

					{
						key: 'running',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'running' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Running {getCount('running') || getCount('running') === 0 ? `(${getCount('running')})` : ''}
							</span>
						),

						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},
					...(accessLabel === 6
						? [
								{
									key: 'Unhealthy',
									label: (
										<span
											className={`${tabsLabelStyling.key === 'unhealthy' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
												markers.length === 0 ? 'cursor-not-allowed' : ''
											} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
											onClick={() => {
												if (markers.length > 0) {
													dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
													dispatch(setDashboardSelectedVehicleStatus([]));
												}
											}}
										>
											Unhealthy {getCount('unhealthy') || getCount('unhealthy') === 0 ? `(${getCount('unhealthy')})` : ''}
										</span>
									),
									children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
								},
						  ]
						: []),
					{
						key: 'idle',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'idle' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Idle {getCount('idle') || getCount('idle') === 0 ? `(${getCount('idle')})` : ''}
							</span>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},
					{
						key: 'stopped',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'stopped' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap `}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Stopped {getCount('stoppage') || getCount('stoppage') === 0 ? `(${getCount('stoppage')})` : ''}
							</span>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},
					{
						key: 'inpoi',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'inpoi' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								{Number(userId) === 87364 || Number(parentUser) === 87364 ? 'Geofence' : 'POI'}
								{getCount('poi') || getCount('poi') === 0 ? `(${getCount('poi')})` : ''}
							</span>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},
					{
						key: 'alerts',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'alerts' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Alerts {getCount('alerts') || getCount('alerts') === 0 ? `(${getCount('alerts')})` : ''}
							</span>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},

					{
						key: 'not working',
						label: (
							<span
								className={`${tabsLabelStyling.key === 'not working' ? tabsLabelStyling.style : 'border-gray-300 text-gray-600'} ${
									markers.length === 0 ? 'cursor-not-allowed' : ''
								} px-4 py-3 rounded-full border mx-1 text-xs font-bold text-nowrap`}
								onClick={() => {
									if (markers.length > 0) {
										dispatch(setSelectedVehicleStatus(initialSelectedVehicleState));
										dispatch(setDashboardSelectedVehicleStatus([]));
									}
								}}
							>
								Not Working {getCount('not working') || getCount('not working') === 0 ? `(${getCount('not working')})` : ''}
							</span>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},

					{
						key: 'collapse',
						label: collapseVehicleStatusToggle ? (
							<DoubleRightOutlined
								className='absolute z-10 top-6 right-[5px] cursor-pointer text-lg hover:text-primary-green text-gray-800 transition-colors duration-300'
								onClick={() => dispatch(setCollapseVehicleStatusToggle(false))}
							/>
						) : (
							<DoubleLeftOutlined
								className='absolute z-10 top-6 right-[5px] cursor-pointer text-lg hover:text-primary-green text-gray-800 transition-colors duration-300'
								onClick={() => dispatch(setCollapseVehicleStatusToggle(true))}
							/>
						),
						children: <VehiclesList selectedVehicleStatus={tabsLabelStyling.key} />,
					},
			  ]),
	];

	return (
		<span className='relative'>
			<Tabs
				defaultActiveKey='all'
				items={items}
				onChange={onChange}
				onClick={() => {
					dispatch(setPrevVehicleSelected(0));
					dispatch(setClusterActive());
				}}
				activeKey={tabsLabelStyling.key}
				className={`z-30 absolute bg-neutral-green ${
					collapseVehicleStatusToggle ? '-translate-x-[425px]' : 'translate-x-0'
				} min-w-[450px] w-[450px] max-w-[450px]  transition duration-300`}
				renderTabBar={(e) => {
					return (
						<span className='flex ml-6 mt-2 mb-4 max-w-[400px] overflow-x-scroll scrollbar   scrollbar-thumb-thumb-green scrollbar-h-1 scrollbar-thumb-rounded-md'>
							{items.length ? (
								items.map((item) => (
									<div key={item.key} className='cursor-pointer' onClick={(event) => e.onTabClick(item.key, event)}>
										<div className={isCheckInAccount(Number(userId)) ? 'mt-4 mb-3' : 'mt-5 mb-6'}>{item.label}</div>
									</div>
								))
							) : (
								<></>
							)}
						</span>
					);
				}}
				tabBarStyle={{
					padding: '14px 0 14px 18px',
					margin: 0,
				}}
				indicator={{ size: () => 0, align: 'center' }}
			/>
		</span>
	);
};