"use client"
import { Button } from '@/components/ui/button'
import {Dialog, DialogContent, DialogTrigger,} from "@/components/ui/dialog"
import { FiCommand } from "react-icons/fi";
import React, { useState } from 'react'
import { Command, CommandInput } from '@/components/ui/command';
import { useGlobalContext, useGlobalContextUpdate } from '@/app/context/globalContext';

const Search = () => {
    const {geoList, inputValue, handleInput} = useGlobalContext();
    const {setActiveCity} = useGlobalContextUpdate();
    const [hoverIndex, setHoverIndex] = useState<number>(0);

    const getClickedCoords = (lat: number, lon:  number) => {
        setActiveCity([lat, lon]);
    }
    


  return (
    <div className=''>
        <Dialog>
            <DialogTrigger asChild>
                <Button variant="outline" className='border inline-flex items-center justify-center text-center gap-10 hover:border-textColor2'>
                    <p className='text-sm text-muted-foreground'>Search here...</p>
                    <div className='flex items-center gap-1 border border-1 p-1 rounded-lg hover:border-textColor2'><FiCommand/>
                        <span className='text-[10px]'>F</span>
                    </div>
                </Button>
            </DialogTrigger>
            <DialogContent className='p-0'>
                <Command className='rounded-lg border shadow-md'>
                    <CommandInput value={inputValue} onChangeCapture={handleInput} placeholder='Search...' />
                    <ul className='px-3 pb-2'>
                        <p className='p-2 text-muted-foreground text-sm'>Suggestion</p>
                        {geoList?.length === 0 || (!geoList && <p>No Results</p>)}
                        {geoList && geoList.map((
                            item: {
                                name: string;
                                country: string;
                                state: string;
                                lat: number;
                                lon: number;
                            }, 
                            index: number,
                            
                        ) => {
                            const {country, state, name} = item;
                            return (<li key={index} onMouseEnter={() => setHoverIndex(index)} className={`py-2 px-2 text-sm rounded-md cursor-pointer
                                ${hoverIndex === index ? "bg-accent" : ""}
                            `} onClick={() => {
                                getClickedCoords(item.lat, item.lon);
                            }}>
                                <p>{name}, {state} {country}</p>
                            </li>);
                        })}
                    </ul>
                </Command>
            </DialogContent>
        </Dialog>
    </div>
  )
}

export default Search