'use client';

import { RootState } from '@/app/_globalRedux/store';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { ClearOutlined, CloseOutlined, MinusCircleFilled, PlusCircleFilled, PlusOutlined } from '@ant-design/icons';
import { Button, Checkbox, ConfigProvider, DatePicker, Drawer, Form, Input, message, Radio, Select, Tooltip } from 'antd';

// * trip specific
import dayjs from 'dayjs';
import { useGetPoiListQuery } from '@/app/_globalRedux/services/masterData';
import ReactGoogleAutocomplete from 'react-google-autocomplete';
import moment from 'moment';
import { AllVehiclesSelect } from '../AllVehiclesSelect';
import { initialSelectedVehicleState, setSelectedVehicleBySelectElement } from '@/app/_globalRedux/dashboard/selectedVehicleSlice';
import { setCreateTripOrTripPlanningActive } from '@/app/_globalRedux/dashboard/createTripOrTripPlanningActive';
import { CsvUploader } from '../../common/csvUploader';
import getGoogleApiKey from '@/app/helpers/getGoogleMapKeys';
import { getJourneyHours, getLatLong } from '@/app/helpers/api';
import { useAppDispatch } from '@/app/_globalRedux/provider';
import { setIsMapActive, setIsMapNotLoading } from '@/app/_globalRedux/dashboard/mapSlice';
import { checkLatLngExists } from '@/app/helpers/checkIfLatLngExists';
import {
	useCreateTripFormMutation,
	useEditPlannedVehiclesMutation,
	useEditTripVehiclesMutation,
	usePlanTripFormMutation,
} from '@/app/_globalRedux/services/trackingDashboard';
import { setFieldsFromCsv } from './helpers/setFieldsFromCsv';
import { setFieldsFromPlannedTrips } from './helpers/setFieldsFromPlannedTrip';
import { setEditTripOrEditPlanActive } from '@/app/_globalRedux/dashboard/editTripOrEditPlanningActive';
import AdditionalFieldsModal from './additionalFIeldsModal';

const selectedStyles = {
	selectorBg: 'transparent',
	colorBorder: 'transparent',
	fontSize: 19,
	fontWeight: 600,
	optionFontSize: 14,
	optionPadding: '5px',
	optionSelectedColor: '#000',
};

export const TForm = () => {
	const selectedVehicle = useSelector((state: RootState) => state.selectedVehicle);
	const { groupId, userId, extra } = useSelector((state: RootState) => state.auth);
	const { type: createTripOrPlanningTripType, planId: createTripOrPlanningTripPlanId } = useSelector(
		(state: RootState) => state.createTripOrPlanningTripActive
	);
	const { type: editTripOrTripPlanningActive } = useSelector((state: RootState) => state.editTripOrPlanningTripActive);

	const { isMapActive } = useSelector((state: RootState) => state.map);
	const auth = JSON.parse(localStorage.getItem('auth-session') || '');
	const extraInfo = auth.extraInfo ? JSON.parse(auth.extraInfo || '') : [];

	const dispatch = useAppDispatch();

	const [form] = Form.useForm();
	const [csvData, setCsvData] = useState<Record<string, string>[]>([]);

	const { data: poiListData, isLoading: isPoiListLoading } = useGetPoiListQuery(
		{
			groupId,
			userId,
		},
		{
			skip: !groupId || !userId,
		}
	);

	const [sourceAndDestinationOptions, setSourceAndDestinationOptions] = useState<{ id: number; value: string }[]>([]);

	useEffect(() => {
		if (poiListData && poiListData.data.length > 1) {
			let tempSourceAndDestinationOptions: { id: number; value: string }[] = [];
			poiListData.data.forEach((poi) => tempSourceAndDestinationOptions.push({ id: poi.id, value: poi.name }));
			setSourceAndDestinationOptions(tempSourceAndDestinationOptions);
		}
	}, [poiListData]);

	// * route type
	const routeOptions = ['None', 'Express', 'Normal', 'Fix Hours'];
	const [selectedRouteType, setSelectedRouteType] = useState<'None' | 'Express' | 'Normal' | 'Fix Hours'>('None');

	//  trip type
	const [selectedTripType, setSelectedTripType] = useState<'Dynamic' | 'Fixed'>('Dynamic');

	// * journey data start
	const [viaCounter, setViaCounter] = useState(0);

	// * via states
	const [isCurrentViaAuto, setIsCurrentViaAuto] = useState([false, false, false, false]);
	const [currentViaValue, setCurrentViaValue] = useState(['', '', '', '']);
	const [viaArray, setViaArray] = useState<number[]>([]);
	const [viaHaltHrs, setViaHaltHrs] = useState<number[]>([0, 0, 0, 0]);

	// * source and destination states
	const [isDestinationAuto, setIsDestinationAuto] = useState(false);
	const [destinationValue, setDestinationValue] = useState('');

	const [date, setDate] = useState<undefined | dayjs.Dayjs>(undefined);

	// additional info
	const [isAdditionalInfoModalActive, setIsAdditionalInfoModalActive] = useState(false);
	// const [additionalColumns, setAdditionalColumns] = useState<string[]>([]);
	// const [additionalColumnsCount, setAdditionalColumnsCount] = useState(0);

	// useEffect(() => {
	// 	if (auth) {
	// 		const extraInfo = JSON.parse(auth?.extraInfo);

	// 		if (extraInfo && typeof extraInfo === 'object' && extraInfo.length > 0) {
	// 			setAdditionalColumns(JSON.parse(auth?.extraInfo));
	// 		}
	// 	}

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

	const [extraInfoData, setExtraInfoData] = useState<any>(
		extraInfo.reduce((acc: Record<string, string>, curr: string) => ({ ...acc, [curr]: '' }), {})
	);

	const [isSourceAuto, setIsSourceAuto] = useState(false);
	const [sourceValue, setSourceValue] = useState('');

	const [eta, setEta] = useState('');

	useEffect(() => {
		let tempArray = new Array(viaCounter).fill(0) as number[];
		setViaArray(tempArray);
	}, [viaCounter]);

	const [createTrip, { isLoading: isCreateTripLoading, isError: isCreateTripError, error: createTripError }] = useCreateTripFormMutation();
	const [planTrip, { isLoading: isPlanTripLoading, isError: isPlanTripError, error: planTripError }] = usePlanTripFormMutation();
	const [editPlan, { isLoading: isEditPlanLoading, isError: isEditPlanError, error: editPlanError }] = useEditPlannedVehiclesMutation();
	const [editTrip, { isLoading: isEditTripLoading, isError: isEditTripError, error: editTripError }] = useEditTripVehiclesMutation();

	const [createTripErrorState, setCreateTripErrorState] = useState('');

	const plannedVehicles = useSelector((state: RootState) => {
		const plannedVehicles = Object.values(state.allTripApi.queries).find((query) => query && query.endpointName === 'getPlannedVehicles');
		if (plannedVehicles) {
			return plannedVehicles.data as getTripVehiclesResponse;
		}
	});

	const tripVehicles = useSelector((state: RootState) => {
		const tripVehicles = Object.values(state.allTripApi.queries).find((query) => query && query.endpointName === 'getTripVehicles');
		if (tripVehicles) {
			return tripVehicles.data as getTripVehiclesResponse;
		}
	});

	useEffect(() => {
		let tempError = createTripError as any;
		setCreateTripErrorState(tempError);
	}, [createTripError]);

	const [isSubmitting, setIsSubmitting] = useState(false);

	const [messageApi, contextHolder] = message.useMessage();

	const success = ({ tripType }: { tripType: string }) => {
		messageApi.open({
			type: 'success',
			content: `Successfully ${tripType} trip`,
			duration: 10,
		});
	};

	const error = ({ tripType }: { tripType: string }) => {
		messageApi.open({
			type: 'error',
			content: `Failed to ${tripType} trip`,
			duration: 10,
		});
	};

	const triggerMapActive = () => {
		if (!isMapActive) {
			dispatch(setIsMapNotLoading(false));
			dispatch(setIsMapActive(true));
		}
	};
	const getAddressLatLong = async (address: string) => {
		const isLatLongExists = checkLatLngExists(address);

		if (isLatLongExists) return address;

		let tempAdd = '';

		try {
			const data = await getLatLong({
				userId: userId,
				groupId: groupId,
				address,
			});
			tempAdd = `${address}${data}`;
		} catch (err) {}

		return tempAdd;
	};

	useEffect(() => {
		triggerMapActive();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isDestinationAuto, isCurrentViaAuto, isSourceAuto]);

	const resetFields = () => {
		setIsSubmitting(false);
		setCreateTripErrorState('');
		form.resetFields();
		setSelectedRouteType('None');

		// * journey data start
		setViaCounter(0);

		// * via states
		setIsCurrentViaAuto([false, false, false, false]);
		setCurrentViaValue(['', '', '', '']);
		setViaArray([]);
		setViaHaltHrs([0, 0, 0, 0]);

		// * source and destination states
		setIsDestinationAuto(false);
		setDestinationValue('');
		setIsSourceAuto(false);
		setSourceValue('');
	};

	const getJourneyHoursHandler = async (e: any, isExcel: boolean) => {
		await getJourneyHours({
			userId: Number(userId),
			source: sourceValue.split('##')[0],
			destination: destinationValue.split('##')[0],
			via: viaCounter > 0 && currentViaValue[0] ? true : false,
			viaOne: currentViaValue[0] ? currentViaValue[0].split('##')[0] : '',
			viaTwo: currentViaValue[1] ? currentViaValue[1].split('##')[0] : '',
			viaThree: currentViaValue[2] ? currentViaValue[2].split('##')[0] : '',
			viaFour: currentViaValue[3] ? currentViaValue[3].split('##')[0] : '',
			routeType: isExcel ? e : e.target.value,
			viaOneHaltHr: `${viaHaltHrs[0]}` || '',
			viaTwoHaltHr: `${viaHaltHrs[1]}` || '',
			viaThreeHaltHr: `${viaHaltHrs[2]}` || '',
			viaFourHaltHr: `${viaHaltHrs[3]}` || '',
			groupId: groupId,
			extra: extra,
		})
			.then((res) => {
				if (res) {
					let tempResultAsArray = res.split('##');
					let adjustedArray: string[] = tempResultAsArray.map((part: string) => {
						let adjustedString = part.match(/\d+(?:\.\d+)?/);
						return adjustedString ? `${adjustedString[0]}` : '0';
					});
					const selectedStartDateInMilliseconds = date?.toDate() ? date.toDate().getTime() : new Date().getTime();
					const estimateHoursInMilliseconds = Number(adjustedArray[1]) * 60 * 60 * 1000;
					const tempEta = new Date(selectedStartDateInMilliseconds + estimateHoursInMilliseconds);

					setEta(moment(tempEta).format('YYYY-MM-DD HH:mm:ss'));

					form.setFieldValue('journey_hrs', adjustedArray[1]);
					form.setFieldValue('journey_km', adjustedArray[0]);
				}
			})
			.catch((err) => {
				let result = err as any;
			});
	};

	// * form submit
	const onFinish = async () => {
		const value = await form.validateFields();

		const formValues = form.getFieldsValue();
		setIsSubmitting(true);
		const formSubmitObj = {
			CustomerName: formValues.customer_name,
			Destination: !isDestinationAuto ? await getAddressLatLong(destinationValue) : '',
			DestinationOr: isDestinationAuto ? await getAddressLatLong(destinationValue) : '',
			DriverName: formValues.driver.name,
			ETA: eta,
			RouteType: formValues.selectedRouteType,
			Source: !isSourceAuto ? await getAddressLatLong(sourceValue) : '',
			SourceOr: isSourceAuto ? await getAddressLatLong(sourceValue) : '',
			Via1: !isCurrentViaAuto[0] ? await getAddressLatLong(currentViaValue[0]) : '',
			Via2: !isCurrentViaAuto[1] ? await getAddressLatLong(currentViaValue[1]) : '',
			Via3: !isCurrentViaAuto[2] ? await getAddressLatLong(currentViaValue[2]) : '',
			Via4: !isCurrentViaAuto[3] ? await getAddressLatLong(currentViaValue[3]) : '',
			Via1Or: isCurrentViaAuto[0] ? await getAddressLatLong(currentViaValue[0]) : '',
			Via2Or: isCurrentViaAuto[1] ? await getAddressLatLong(currentViaValue[1]) : '',
			Via3Or: isCurrentViaAuto[2] ? await getAddressLatLong(currentViaValue[2]) : '',
			Via4Or: isCurrentViaAuto[3] ? await getAddressLatLong(currentViaValue[3]) : '',
			cargo_weight: formValues.weight,
			challan_date: `${date?.format('YYYY-MM-DD HH:mm')}`,
			challan_no: Math.floor(Math.random() * 100000).toString(),
			destination_party_name: formValues.destination_party_name,
			journey_KM: formValues.journey_km,
			journey_hours: formValues.journey_hrs,
			lorry_no: selectedVehicle.vehicleTrip.lorry_no ? selectedVehicle.vehicleTrip.lorry_no : selectedVehicle.vehReg,
			lorry_type: formValues.trip_type,
			sys_service_id: selectedVehicle.vId ? `${selectedVehicle.vId}` : `${selectedVehicle.vehicleTrip.sys_service_id}`,
			sys_user_id: userId,
			to_and_fro: selectedTripType === 'Fixed' ? '1' : '0',
			viaone_halthr_input: formValues.via?.via1 ? formValues.via.via1.halt : '',
			viaone_party_name: formValues.via?.via1 ? formValues.via.via1.party_name : '',
			viatwo_halthr_input: formValues.via?.via2 ? formValues.via.via2.halt : '',
			viatwo_party_name: formValues.via?.via2 ? formValues.via.via2.party_name : '',
			viathree_halthr_input: formValues.via?.via3 ? formValues.via.via3.halt : '',
			viathree_party_name: formValues.via?.via3 ? formValues.via.via3.party_name : '',
			viafour_halthr_input: formValues.via?.via4 ? formValues.via.via4.halt : '',
			viafour_party_name: formValues.via?.via4 ? formValues.via.via4.party_name : '',
		};

		if (createTripOrPlanningTripType === 'create-trip') {
			const data = await createTrip({ body: { ...formSubmitObj, extraInfo: JSON.stringify(extraInfoData) }, token: groupId });
			if (data.error) {
				error({ tripType: 'Create' });
			} else {
				success({ tripType: 'Create' });
			}
			setIsSubmitting(false);
		} else if (createTripOrPlanningTripType === 'trip-planning') {
			const data = await planTrip({ body: formSubmitObj, token: groupId });
			if (data.error) {
				error({ tripType: 'Planned' });
			} else {
				success({ tripType: 'Planned' });
			}
			setIsSubmitting(false);
		} else if (editTripOrTripPlanningActive === 'edit-plan' && createTripOrPlanningTripPlanId) {
			const data = await editPlan({ ...formSubmitObj, body: { ...formSubmitObj, tripid: `${createTripOrPlanningTripPlanId}` }, token: groupId });
			if (data.error) {
				error({ tripType: 'Edit Planned' });
			} else {
				success({ tripType: 'Edit Planned' });
			}
			setIsSubmitting(false);
		} else if (editTripOrTripPlanningActive === 'edit-trip' && createTripOrPlanningTripPlanId) {
			const data = await editTrip({ ...formSubmitObj, body: { ...formSubmitObj, tripid: `${createTripOrPlanningTripPlanId}` }, token: groupId });
			if (data.error) {
				error({ tripType: 'Edit Trip' });
			} else {
				success({ tripType: 'Edit Trip' });
			}
			setIsSubmitting(false);
		}
	};

	useEffect(() => {
		if (isPlanTripLoading || isCreateTripLoading) {
			setIsSubmitting(true);
			setCreateTripErrorState('');
		}

		if ((isPlanTripError && !isPlanTripLoading) || (isCreateTripError && !isCreateTripLoading)) {
			let tempErrorState =
				createTripOrPlanningTripType === 'create-trip'
					? (createTripError as any)
					: createTripOrPlanningTripType === 'trip-planning'
					? (planTripError as any)
					: editTripOrTripPlanningActive === 'edit-plan'
					? (editPlanError as any)
					: null;

			setCreateTripErrorState(tempErrorState?.data?.message || 'Please complete the form and enter valid inputs.');
			setIsSubmitting(false);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isPlanTripLoading, isCreateTripLoading, isEditPlanLoading, createTripError, isCreateTripError, isEditPlanError, isPlanTripError]);

	useEffect(() => {
		resetFields();

		if (createTripOrPlanningTripPlanId && plannedVehicles && editTripOrTripPlanningActive === 'edit-plan') {
			const plannedVehicle = plannedVehicles.list.find((t) => t.id === Number(createTripOrPlanningTripPlanId));
			if (plannedVehicle) {
				setFieldsFromPlannedTrips({
					data: plannedVehicle,
					form,
					setIsSourceAuto,
					setIsDestinationAuto,
					setViaCounter,
					setIsCurrentViaAuto,
					setCurrentViaValue,
					setViaHaltHrs,
					setDestinationValue,
					setSourceValue,
					setSelectedTripType,
					dispatch,
				});
			}
		} else if (createTripOrPlanningTripPlanId && tripVehicles && editTripOrTripPlanningActive === 'edit-trip') {
			const tripVehicle = tripVehicles.list.find((t) => t.id === Number(createTripOrPlanningTripPlanId));

			if (tripVehicle) {
				setFieldsFromPlannedTrips({
					data: tripVehicle,
					form,
					setIsSourceAuto,
					setIsDestinationAuto,
					setViaCounter,
					setIsCurrentViaAuto,
					setCurrentViaValue,
					setViaHaltHrs,
					setDestinationValue,
					setSourceValue,
					setSelectedTripType,
					dispatch,
				});
			}
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [createTripOrPlanningTripType, editTripOrTripPlanningActive]);

	useEffect(() => {
		if (csvData.length > 0) {
			const data = csvData[0];
			setFieldsFromCsv({
				data,
				form,
				setIsSourceAuto,
				setIsDestinationAuto,
				setViaCounter,
				setIsCurrentViaAuto,
				setCurrentViaValue,
				setViaHaltHrs,
				setDestinationValue,
				setSourceValue,
				setSelectedTripType,
				setSelectedRouteType,
				setDate,
			});
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [csvData]);

	useEffect(() => {
		if (!isAdditionalInfoModalActive && extraInfo && extraInfo.length > 0) {
			setExtraInfoData(extraInfo.reduce((acc: Record<string, string>, crr: string) => Object.assign(acc, { [crr]: '' }), {}));
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isAdditionalInfoModalActive]);

	useEffect(() => {
		getJourneyHoursHandler(selectedRouteType, true);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedRouteType]);

	return (
		<Drawer
			open={createTripOrPlanningTripType !== '' || editTripOrTripPlanningActive !== ''}
			placement='left'
			width={480}
			styles={{ header: { display: 'none' } }}
			onClose={() => {
				if (createTripOrPlanningTripType !== '') {
					dispatch(setCreateTripOrTripPlanningActive({ type: '' }));
				} else if (editTripOrTripPlanningActive !== '') {
					dispatch(setEditTripOrEditPlanActive({ type: '' }));
				}
			}}
		>
			{contextHolder}
			<AdditionalFieldsModal isModalActive={isAdditionalInfoModalActive} setIsModalActive={setIsAdditionalInfoModalActive} />
			<div className='flex items-center justify-between px-5 mb-4'>
				<div className='flex gap-2 items-center ml-1'>
					<p className='text-primary-green font-semibold '>
						{createTripOrPlanningTripType === 'create-trip'
							? 'Create Trip Form'
							: createTripOrPlanningTripType === 'trip-planning'
							? 'Trip Planning Form'
							: editTripOrTripPlanningActive === 'edit-plan'
							? 'Edit Plan Form'
							: 'Edit Trip Form'}
					</p>
					<Tooltip title='Upload Trip Data' mouseEnterDelay={1}>
						<CsvUploader setCsvData={setCsvData} />
					</Tooltip>
					<Tooltip title='Reset Fields' mouseEnterDelay={1}>
						<div
							onClick={() => resetFields()}
							className='text-xl text-primary-green cursor-pointer hover:bg-neutral-200 rounded-full w-8 h-8 flex items-center justify-center transition-colors duration-300'
						>
							<ClearOutlined />
						</div>
					</Tooltip>
					<Tooltip title='Customize Additional Fields' mouseEnterDelay={1}>
						<div
							onClick={() => setIsAdditionalInfoModalActive(true)}
							className='text-xl text-primary-green cursor-pointer hover:bg-neutral-200 rounded-full w-8 h-8 flex items-center justify-center transition-colors duration-300'
						>
							<PlusOutlined />
						</div>
					</Tooltip>
				</div>
				<Tooltip title='Close' placement='right' mouseEnterDelay={1}>
					<div
						className='pr-1'
						onClick={() => {
							dispatch(setSelectedVehicleBySelectElement(initialSelectedVehicleState));
							if (createTripOrPlanningTripType !== '') {
								dispatch(setCreateTripOrTripPlanningActive({ type: '' }));
							} else if (editTripOrTripPlanningActive !== '') {
								dispatch(setEditTripOrEditPlanActive({ type: '' }));
							}
						}}
					>
						<CloseOutlined className='cursor-pointer' />
					</div>
				</Tooltip>
			</div>

			<div className='overflow-y-scroll max-h-[calc(100vh-90px)] scrollbar-thumb-thumb-green scrollbar-w-2 scrollbar-thumb-rounded-md scrollbar pb-10'>
				<ConfigProvider
					theme={{
						components: {
							Input: {
								colorBgContainerDisabled: 'rgb(255,255,255)',
								colorTextDisabled: 'rgb(0,0,0)',
							},
						},
					}}
				>
					<Form style={{ paddingInline: '20px' }} layout='vertical' form={form} onSubmitCapture={() => onFinish()}>
						<AllVehiclesSelect selectedStyles={selectedStyles} />
						<div className='mt-3 ml-2'>
							<Radio.Group name='dynamicOrFixed' onChange={(e) => setSelectedTripType(e.target.value)} value={selectedTripType}>
								<Radio value='Dynamic' required>
									Dynamic
								</Radio>
								<Radio value='Fixed' required>
									Fixed
								</Radio>
							</Radio.Group>
						</div>
						<p className='text-sm font-semibold mt-4 -mb-1 ml-1 text-neutral-600'>Select Date: </p>

						<DatePicker
							format='Do MMMM, YYYY HH:mm'
							className='absolute top-2  z-20 w-full'
							size='large'
							showTime
							value={date}
							onChange={(e) => setDate(e)}
						/>

						<p className='text-sm font-semibold mt-[18px] mb-1 ml-1 text-neutral-600'>Customer Name: </p>
						<Form.Item name='customer_name' rules={[{ required: true, min: 3, message: 'Customer name should be atleast 3 characters' }]}>
							<Input className='w-full h-9' />
						</Form.Item>

						<p className='text-sm font-semibold mt-3 mb-1 ml-1 text-neutral-600'>Destination Party Name: </p>
						<Form.Item
							name='destination_party_name'
							rules={[{ required: true, min: 3, message: 'Destination party name should be atleast 3 characters' }]}
						>
							<Input className='w-full h-9' />
						</Form.Item>

						{/* Source and Destination Start */}
						<p className='text-lg font-semibold mt-6 mb-2 ml-1 text-neutral-600'>Source and Destination ~</p>

						<div className='flex justify-between items-center mt-3  mb-1 ml-1'>
							<p className='text-sm font-semibold  mb-1 ml-1 text-neutral-600'>Source: </p>
							<Checkbox
								className='relative font-semibold'
								style={{ color: 'rgb(82,82,82)' }}
								checked={isSourceAuto}
								onChange={() => {
									form.setFieldValue('source', '');
									form.setFieldValue('sourceOr', '');
									setIsSourceAuto((prev) => !prev);
									setSourceValue('');
								}}
							>
								Google Search
							</Checkbox>
						</div>

						{isSourceAuto ? (
							<ReactGoogleAutocomplete
								onPlaceSelected={(place) => {
									setSourceValue(
										`${place.formatted_address}##${place.geometry && place.geometry.location ? place.geometry.location.lat() : ''}##${
											place.geometry && place.geometry.location ? place.geometry.location.lng() : ''
										}`
									);
								}}
								onChange={(e) => {
									setSourceValue(e.currentTarget.value);
								}}
								// apiKey={process.env.NEXT_PUBLIC_GOOGLE_PLACES_KEY || ''}
								apiKey={getGoogleApiKey() || ''}
								googleMapsScriptBaseUrl='https://maps.googleapis.com/maps/api/js'
								defaultValue={sourceValue}
								className='text-md p-1.5 rounded-md border border-neutral-300 w-full'
								placeholder='Enter Source'
							/>
						) : (
							<Select
								className='w-full h-9'
								style={{ height: '36px' }}
								showSearch
								value={sourceValue.split('##')[0]}
								onChange={(value) => {
									const poi = poiListData?.data.find((item) => item.name === value);
									setSourceValue(`${poi?.name}##${poi?.gps_latitude}##${poi?.gps_longitude}`);
								}}
								options={sourceAndDestinationOptions}
								loading={isPoiListLoading}
							/>
						)}

						<div className='flex justify-between items-center mt-3  mb-1 ml-1'>
							<p className='text-sm font-semibold text-neutral-600'>Destination: </p>
							<Checkbox
								className='relative font-semibold'
								style={{ color: 'rgb(82,82,82)' }}
								checked={isDestinationAuto}
								onChange={() => {
									form.setFieldValue('destination', '');
									form.setFieldValue('destinationOr', '');
									setIsDestinationAuto((prev) => !prev);
									setDestinationValue('');
								}}
							>
								Google Search
							</Checkbox>
						</div>

						{isDestinationAuto ? (
							<ReactGoogleAutocomplete
								onPlaceSelected={(place) => {
									setDestinationValue(
										`${place.formatted_address}##${place.geometry && place.geometry.location ? place.geometry.location.lat() : ''}##${
											place.geometry && place.geometry.location ? place.geometry.location.lng() : ''
										}`
									);
								}}
								onChange={(e) => {
									setDestinationValue(e.currentTarget.value);
								}}
								// apiKey={process.env.NEXT_PUBLIC_GOOGLE_PLACES_KEY || ''}

								apiKey={getGoogleApiKey() || ''}
								defaultValue={destinationValue}
								className='text-md p-1.5 rounded-md border border-neutral-300 w-full'
								placeholder='Enter Destination'
							/>
						) : (
							<Select
								className='w-full h-9'
								style={{ height: '36px' }}
								showSearch
								value={destinationValue.split('##')[0]}
								onChange={(value) => {
									const poi = poiListData?.data.find((item) => item.name === value);
									setDestinationValue(`${poi?.name}##${poi?.gps_latitude}##${poi?.gps_longitude}`);
								}}
								options={sourceAndDestinationOptions}
								loading={isPoiListLoading}
							/>
						)}

						{/* Source Destination End */}

						{/* Via Start */}
						<div className='flex justify-between items-center mt-6 ml-1'>
							<p className='text-lg font-semibold text-neutral-600'>Add Via ~</p>
							<div className='flex justify-center items-center'>
								<Tooltip title={viaCounter === 0 ? 'Minimum Via Points Reached' : `Remove Via ${viaCounter}`} mouseEnterDelay={1}>
									<MinusCircleFilled
										className='text-xl mr-2'
										style={{ color: viaCounter === 0 ? 'rgb(212,212,212)' : '' }}
										disabled={viaCounter === 0}
										onClick={() => {
											const tempViaCounter = viaCounter - 1;

											setViaCounter((prev) => (prev === 0 ? 0 : prev - 1));
											setIsCurrentViaAuto((prev) => prev.map((item, index) => (index === tempViaCounter ? false : item)));
											setCurrentViaValue((prev) => prev.map((item, index) => (index === tempViaCounter ? '' : item)));
											setViaArray((prev) => prev.filter((item, index) => index !== tempViaCounter));
											setViaHaltHrs((prev) => prev.map((item, index) => (index === tempViaCounter ? 0 : item)));

											tempViaCounter === 0 &&
												form.setFieldsValue({
													via: {
														via1: {
															halt: '',
															party_name: '',
														},
													},
												});

											tempViaCounter === 1 &&
												form.setFieldsValue({
													via: {
														via2: {
															halt: '',
															party_name: '',
														},
													},
												});

											tempViaCounter === 2 &&
												form.setFieldsValue({
													via: {
														via3: {
															halt: '',
															party_name: '',
														},
													},
												});

											tempViaCounter === 3 &&
												form.setFieldsValue({
													via: {
														via4: {
															halt: '',
															party_name: '',
														},
													},
												});
										}}
									/>
								</Tooltip>
								<Tooltip title={viaCounter === 4 ? 'Maximum Via Points Reached' : `Add Via ${viaCounter + 1}`} mouseEnterDelay={1}>
									<PlusCircleFilled
										className='text-xl'
										style={{ color: viaCounter === 4 ? 'rgb(212,212,212)' : '' }}
										disabled={viaCounter === 4}
										onClick={() => {
											setViaCounter((prev) => (prev >= 4 ? 4 : prev + 1));
										}}
									/>
								</Tooltip>
							</div>
						</div>
						{viaArray.length ? (
							viaArray.map((_: number, index) => {
								return (
									<div key={index}>
										<p className='text-lg font-semibold mt-3 mb-2 ml-1 text-neutral-600'>Via {index + 1}</p>

										<p className='text-sm font-semibold  mb-1 ml-1 text-neutral-600'>Party Name: </p>
										<Form.Item
											name={['via', `via${index + 1}`, 'party_name']}
											rules={[{ required: true, min: 3, message: 'Please enter valid via name' }]}
										>
											<Input className='w-full h-9' />
										</Form.Item>
										<div className='flex justify-between items-center mt-3  mb-1 ml-1'>
											<p className='text-sm font-semibold mt-3  mb-1 ml-1 text-neutral-600'>Via Location: </p>
											<Checkbox
												className='relative font-semibold'
												style={{ color: 'rgb(82,82,82)' }}
												checked={isCurrentViaAuto[index]}
												onChange={() => {
													form.setFieldValue(['via', `via${index + 1}`, 'location'], '');
													setIsCurrentViaAuto((prev) => {
														const updatedArray = [...prev];
														updatedArray[index] = !prev[index];
														return updatedArray;
													});
													setCurrentViaValue((prev) => {
														const updatedArray = [...prev];
														updatedArray[index] = '';
														return updatedArray;
													});
												}}
											>
												Google Search
											</Checkbox>
										</div>

										{isCurrentViaAuto[index] ? (
											<ReactGoogleAutocomplete
												onPlaceSelected={(place) => {
													setCurrentViaValue((prev) => {
														const updatedViaArray = prev;
														updatedViaArray[index] = `${place.formatted_address}##${
															place.geometry && place.geometry.location ? place.geometry.location.lat() : ''
														}##${place.geometry && place.geometry.location ? place.geometry.location.lng() : ''}`;
														return updatedViaArray;
													});
												}}
												onChange={(e) => {
													if (e.currentTarget !== null && e.currentTarget.value !== null) {
														setCurrentViaValue((prev) => {
															const updatedViaArray = prev;

															if (e.currentTarget) {
																updatedViaArray[index] = e.currentTarget.value;
															}
															return updatedViaArray;
														});
													}
												}}
												apiKey={getGoogleApiKey() || ''}
												defaultValue={currentViaValue[index]}
												className='text-md p-1.5 rounded-md border border-neutral-300 w-full'
												placeholder={`Enter Via ${index + 1}  Location`}
											/>
										) : (
											<Select
												className='w-full h-9'
												style={{ height: '36px' }}
												showSearch
												onChange={(value) => {
													setCurrentViaValue((prev) => {
														const updatedViaArray = [...prev];
														const poi = poiListData?.data.find((item) => item.name === value);
														updatedViaArray[index] = `${poi?.name}##${poi?.gps_latitude}##${poi?.gps_longitude}`;
														return updatedViaArray;
													});
												}}
												value={currentViaValue[index].split('##')[0]}
												options={sourceAndDestinationOptions}
												loading={isPoiListLoading}
											/>
										)}

										<p className='text-sm font-semibold mt-3 ml-1 text-neutral-600'>Halt: </p>
										<Form.Item name={['via', `via${index + 1}`, 'halt']} rules={[{ required: true, message: 'Please enter valid halt' }]}>
											<Input
												className='w-full h-9'
												style={{ width: '400px' }}
												value={viaHaltHrs[index]}
												type='number'
												onChange={(e) => {
													setViaHaltHrs((prev) => {
														let temp = [...prev]; // Copy the previous array to avoid mutating state directly
														temp[index] = Number(e.target.value); // Assuming index is valid
														return temp;
													});
												}}
											/>
										</Form.Item>
										<span className='mb-4 block w-full'></span>
									</div>
								);
							})
						) : (
							<p></p>
						)}
						{/* Via End */}
						{/* Route Start */}
						<p className='text-lg font-semibold mt-3 mb-2 ml-1 text-neutral-600'>Route Type ~</p>

						<Form.Item>
							<Radio.Group
								options={routeOptions}
								onChange={async (e) => {
									setSelectedRouteType(e.target.value);
									getJourneyHoursHandler(e, false);
								}}
								value={selectedRouteType}
							/>
						</Form.Item>
						<div className='py-1'></div>

						<p className='text-sm font-semibold mt-3 mb-1.5 ml-1 text-neutral-600'>Journey Hours: </p>
						<Form.Item name='journey_hrs' rules={[{ required: true, message: 'Please enter valid journey hours' }]}>
							<Input type='number' className='w-full h-9 ' style={{ width: '400px' }} disabled={selectedRouteType === 'Fix Hours' ? false : true} />
						</Form.Item>

						<p className='text-sm font-semibold mt-3 mb-1 ml-1 text-neutral-600'>Journey Km: </p>
						<Form.Item name='journey_km' rules={[{ required: true, message: 'Please enter valid journey km' }]}>
							<Input type='number' className='w-full h-9' style={{ width: '400px' }} disabled={true} />
						</Form.Item>

						{/* Route End */}

						<p className='text-lg font-semibold mt-6 mb-2 ml-1 text-neutral-600'>Extra Info ~</p>

						<p className='text-sm font-semibold mt-3 mb-1 ml-1 text-neutral-600'>Trip Type: </p>
						<Form.Item name='trip_type'>
							<Input className='w-full h-9' />
						</Form.Item>

						<p className='text-sm font-semibold mt-3 mb-1 ml-1 text-neutral-600'>Weight: </p>
						<Form.Item name='weight'>
							<Input type='number' className='w-full h-9' style={{ width: '400px' }} />
						</Form.Item>

						{/* Driver Details Start */}
						<p className='text-lg font-semibold mt-6 mb-2 ml-1 text-neutral-600'>Driver Details ~</p>

						<p className='text-sm font-semibold  mb-1 ml-1 text-neutral-600'>Driver&apos;s Name: </p>
						<Form.Item name={['driver', 'name']}>
							<Input className='w-full h-9' />
						</Form.Item>

						<p className='text-sm font-semibold mt-3 mb-1 ml-1 text-neutral-600'>Driver&apos;s Number: </p>
						<Form.Item name={['driver', 'number']}>
							<Input type='number' className='w-full h-9' style={{ width: '400px' }} />
						</Form.Item>
						{/* Driver Details End */}

						{/* Additional Details Start */}
						{extraInfo.length > 0 ? (
							<>
								<p className='text-lg font-semibold mt-6 mb-2 ml-1 text-neutral-600'>Additional Details ~</p>

								{extraInfo.map((info: string, index: number) => (
									<div key={index}>
										<p className='text-sm font-semibold mt-3 mb-1 ml-1 text-neutral-600'>{info}</p>
										<Form.Item name={info}>
											<Input
												className='w-full h-9'
												value={extraInfoData[info] || ''}
												onChange={(e) => setExtraInfoData({ ...extraInfoData, [info]: e.target.value })}
											/>
										</Form.Item>
									</div>
								))}
							</>
						) : null}

						{/* Additional Details End */}

						{createTripErrorState ? (
							<div className='w-full bg-red-100 py-1 px-1 mt-4 -mb-1 ml-1'>
								<p className='text-sm font-semibold  text-red-500'>{createTripErrorState}</p>
							</div>
						) : (
							<p></p>
						)}
						<div className='flex gap-2 w-full justify-end mt-6'>
							<Button htmlType='submit' type='primary' loading={isSubmitting}>
								Submit
							</Button>
						</div>
					</Form>
				</ConfigProvider>
			</div>
		</Drawer>
	);
};