# MystBin ! - mainInformation.tsx
interface LocationProps {
    admin1: string;
    admin1_id: number;
    admin2: string;
    admin2_id: number;
    country: string;
    country_code: string;
    country_id: number;
    elevation: number;
    feature_code: string;
    id: number;
    latitude: number;
    longitude: number;
    name: string;
    timezone: string;
}

import React, {useState, useEffect, useDeferredValue} from "react";
import axios from 'axios'
import styles from 'src/styles/Home.module.css'

const MainInformation = () => {
    const [searchValue, setSearchValue] = useState('')
    const [locationData, setLocationData] = useState<LocationProps[]>([])
    const [hightlightedIndex, setHighlightedIndex] = useState(-1)
    const defferedSearchValue = useDeferredValue(searchValue)

    const fetchCoords = (latitude: number, longitude: number) => {
        setSearchValue(locationData[hightlightedIndex].name)
        console.log(latitude, longitude)
    }

    const handleKeyDown = (event: React.KeyboardEvent) => {
        switch (event.key) {
            case 'ArrowDown':
                setHighlightedIndex(prevIndex => (prevIndex + 1) % locationData?.length)
                break;
            case 'ArrowUp':
                setHighlightedIndex(prevIndex => (prevIndex - 1) % locationData?.length)
                break;
            case 'Enter':
                if(hightlightedIndex !== -1)
                fetchCoords(locationData[hightlightedIndex].latitude, locationData[hightlightedIndex].longitude)
                break;
        }
    }

    useEffect(() => {
        const fetchLocations = async () => {
            try {
                const locations = await axios.get(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(defferedSearchValue)}`)
                setLocationData(locations.data.results)
            } catch (err) {
                console.log(err)
            }
        }

        if(defferedSearchValue) fetchLocations()
    },[defferedSearchValue])

    return (
        <React.Fragment>
            <div className={styles.secondary}>
                <div>
                    <input type={'text'} placeholder='Search your city' value={searchValue} onChange={(e) => setSearchValue(e.target.value)} onKeyDown={handleKeyDown} />
                    {
                        locationData ? <ul className={styles.locationSearchBox}>
                            {locationData?.map((item, index) => {
                                return (
                                    <li key={index} className={`${styles.location} ${index === hightlightedIndex ? styles.highlightLocation : null}`} onClick={() => fetchCoords(item.latitude, item.longitude)}>{item.name} <span>{`${item.admin1} ( ${item.latitude} ${item.longitude} ${item.elevation}m)`}</span></li>
                                )
                            })}
                        </ul> : null
                    }
                </div>
            </div>
        </React.Fragment>
    )
}

export default MainInformation