'use client'

import {
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList
} from 'cmdk'
import {Check, ChevronsUpDown, MapPinCheck, MapPinPlus} from 'lucide-react'
import {useLocale, useTranslations} from 'next-intl'
import {useState} from 'react'
import {useDebouncedCallback} from 'use-debounce'

import {
	type Settlement,
	Street,
	formatSettlement,
	getApi
} from '@/lib/nova-post-helper'
import {cn, dump} from '@/lib/utils'
import {Button} from '@/ui/button'
import {Command} from '@/ui/command'
import {Popover, PopoverContent, PopoverTrigger} from '@/ui/popover'

const url = '/api/nova-post'

export default function SearchAddress({
	onSelectHandler
}: {
	onSelectHandler: any
}) {
	const t = useTranslations('cart.post')
	const locale = useLocale()
	const [streets, setStreets] = useState([])
	const [streetsOpen, setStreetsOpen] = useState(false)
	const [streetsValue, setStreetsValue] = useState('')

	const handleStreetSearch = useDebouncedCallback(
		async (e: string): Promise<void> => {
			if (e.length < 3) {
				setStreets([])
				return
			}

			const response = await getApi(url + `?scope=streets&q=` + encodeURI(e))

			if (response.ok) {
				let json = JSON.parse(JSON.stringify(await response.json()))
				const {Addresses} = json[0]
				setStreets(Addresses)
			} else {
				setStreets([])
			}
		},
		1000
	)

	const streetDescription = (streetsValue: string): string => {
		const street: Street | undefined = streets.find(
			(street: Street) => street.Present === streetsValue
		)

		if (!street) {
			return ''
		}

		return streetsValue
	}

	return (
		<div className='py-2'>
			{/*<pre>{dump(streets[0]['Addresses'])}</pre>*/}
			<div>
				<Popover open={streetsOpen} onOpenChange={setStreetsOpen}>
					<PopoverTrigger asChild>
						<Button
							variant='outline'
							role='combobox'
							/*aria-expanded={open}*/
							className='w-full justify-between border border-brand-violet'
						>
							<span className='inline-flex items-center gap-x-3'>
								{streetsValue ? (
									<>
										<MapPinCheck />
										{streetDescription(streetsValue)}
									</>
								) : (
									<>
										<MapPinPlus />
										{locale !== 'ru' ? 'Шукати вулицю' : 'Искать улицу'}
									</>
								)}
							</span>
							<ChevronsUpDown className='opacity-50' />
						</Button>
					</PopoverTrigger>
					<PopoverContent className='w-[640px] p-2'>
						<Command>
							<CommandInput
								className='border border-brand-violet p-2'
								placeholder={locale !== 'ru' ? 'Почати пошук' : 'Начать поиск'}
								onValueChange={(e: string) => handleStreetSearch(e)}
							/>
							<CommandList>
								<CommandEmpty className='my-1'>{t('notFount')}</CommandEmpty>
								<CommandGroup className='max-h-[320px] w-full overflow-y-auto'>
									{streets.map((street: Street, index: number) => (
										<CommandItem
											className='my-2 flex'
											key={index}
											value={street?.Present}
											onSelect={(currentValue: string) => {
												setStreetsValue(
													currentValue === streetsValue ? '' : currentValue
												)

												onSelectHandler(
													currentValue === streetsValue
														? {}
														: {
																Ref: street.SettlementStreetRef,
																Description: street.Present,
																DescriptionRu:
																	street.SettlementStreetDescriptionRu
															}
												)

												setStreetsOpen(false)
											}}
										>
											{street?.Present}
											<Check
												className={cn(
													'ml-auto',
													streetsValue === street?.Present
														? 'opacity-100'
														: 'opacity-0'
												)}
											/>
										</CommandItem>
									))}
								</CommandGroup>
							</CommandList>
						</Command>
					</PopoverContent>
				</Popover>
			</div>
		</div>
	)
}