"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import apis from "@/utils/apis";
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
    Command,
    CommandGroup,
    CommandItem,
    CommandList,
} from "@/components/ui/command"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { Input } from "./ui/input";

const useSearchOptions = (query: string) => {
    const [options, setOptions] = React.useState<{ value: string; label: string }[]>([]);
    const [isLoading, setIsLoading] = React.useState(false);

    React.useEffect(() => {
        if (query === "") return;
        setIsLoading(true);
        const fetchData = async () => {
            const response = await apis.Job.getLocations(query);
            const transformedData = response.map((location: string) => ({
                value: location,
                label: location,
            }));

            setOptions(transformedData);
            setIsLoading(false);
        };

        fetchData();
    }, [query]);

    return { options, isLoading };
};

export function LocationAutoComplete({ value, onChange, defaultQuery = "", }: {
    value: string,
    onChange: (selected: string) => void;
    defaultQuery?: string; // Default search query for API
}) {
    const [open, setOpen] = React.useState(false);
    const [query, setQuery] = React.useState(defaultQuery);

    // Fetching options based on the query
    const { options, isLoading } = useSearchOptions(query);

    const handleSetValue = (val: string) => {
        onChange(val);
        setOpen(false);
        setQuery('') // Clear search after selection
    };

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    className="h-12 text-gray bg-white hover:bg-white hover:text-gray justify-between"
                >
                    <div className={`flex gap-2 justify-start ${value !== '' ? "theme-color font-medium" : "gray font-normal"}`}>
                        {value !== '' ? (
                            <div className="">
                                {options.find((option) => option.value === value)?.label}
                            </div>
                        ) : (
                            "Select a location..."
                        )}
                    </div>
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[400px] p-0">
                <Command>
                    <Input
                        placeholder="Search location..."
                        value={query}
                        className="text-gray h-11 border-0 rounded-none bg-white p-2 b-0 "
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                            setQuery(e.target.value); // Update query state
                        }}
                    />
                    <CommandGroup>
                        <CommandList>

                            {options.length > 0 && (
                                options.map((option) => (
                                    <CommandItem
                                        key={option.value}
                                        value={option.value}
                                        onSelect={() => handleSetValue(option.value)}
                                    >
                                        <Check
                                            className={cn(
                                                "mr-2 h-4 w-4",
                                                value === option.value ? "opacity-100" : "opacity-0"
                                            )}
                                        />
                                        {option.label}
                                    </CommandItem>
                                ))
                            )}
                        </CommandList>
                    </CommandGroup>
                </Command>
            </PopoverContent>
        </Popover>
    );
}