'use client';

import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { DropdownProps, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import Image from 'next/image';
import nearbyProximity from '@/public/assets/svgs/common/nearby.svg';
import { useSelector } from 'react-redux';
import { RootState } from '@/app/_globalRedux/store';

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

	const [open, setOpen] = useState(false);

	const urlSuffix = `locationV=${selectedVehicle.gpsDtl.latLngDtl.addr?.replaceAll('_', ' ')}++(${selectedVehicle.gpsDtl.latLngDtl.lat},%20${
		selectedVehicle.gpsDtl.latLngDtl.lng
	})&latlong=${selectedVehicle.gpsDtl.latLngDtl.lat},${selectedVehicle.gpsDtl.latLngDtl.lng}`;

	const handleMenuClick: MenuProps['onClick'] = (e) => {
		if (e.key === 'petrol_pump') {
			window.open(`https://gtrac.in/newtracking/nearespetrolpump.php?action=petrolpump&${urlSuffix}`, '_blank', 'noopener,noreferrer');
		} else if (e.key === 'hospital') {
			window.open(`https://gtrac.in/newtracking/nearestHosital.php?action=hospital&${urlSuffix}`, '_blank', 'noopener,noreferrer');
		} else if (e.key === 'atm') {
			window.open(`https://gtrac.in/newtracking/nearestATM.php?action=hospital&${urlSuffix}`, '_blank', 'noopener,noreferrer');
		}
	};

	const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
		setOpen(nextOpen);
	};

	const items: MenuProps['items'] = [
		{
			label: 'Petrol Pump',
			key: 'petrol_pump',
		},
		{
			label: 'Hospital',
			key: 'hospital',
		},
		{
			label: 'ATM',
			key: 'atm',
		},
	];

	return (
		<Dropdown
			menu={{
				items,
				onClick: handleMenuClick,
			}}
			onOpenChange={handleOpenChange}
			open={open}
			trigger={['click']}
		>
			<Image
				src={nearbyProximity}
				alt='nearby proximity icon'
				width='25'
				height='25'
				className='mb-1 cursor-pointer hover:opacity-80 transition-opacity duration-300'
			/>
		</Dropdown>
	);
};