"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Label } from "@/components/ui/label";
import axios from "axios";

export interface ConnectionDefault {
    type: string,
    connections: { name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date }[]
}

export const ConnectionDefaultElement = ({
    type,
    connections,
}: ConnectionDefault) => {
    const [connection, setConnection] = useState<{ name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date } | undefined>(undefined)
    const [open, setOpen] = useState(false)

    const OnDefaultConnectionUpdate = function (con: { name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date }) {
        if (connection && con.name == connection.name)
            return

        if (connection && !connections.some(c => c.clientId == connection.clientId && c.name == connection.name && c.token == connection.token))
            return

        axios.put('/api/connection/default', { name: con.name, type: con.type })
            .then(d => {
                setConnection(con)
            })
    }

    useEffect(() => {
        const con = connections.filter((c: any) => c.type == type && c.default)
        if (con.length > 0)
            OnDefaultConnectionUpdate(con[0])
    }, [])

    return (
        <div
            className={"bg-green-200 p-4 rounded-lg block m-5 max-w-[230px] " + (connections.filter(c => c.type == type).length > 0 ? 'visible' : 'hidden')}>
            <Popover
                open={open}
                onOpenChange={setOpen}>
                <PopoverTrigger asChild>
                    <div className="flex flex-col flex-1">
                        <Label className="text-base text-black">{type.charAt(0).toUpperCase() + type.substring(1)}</Label>
                        <Button
                            variant="outline"
                            role="combobox"
                            aria-expanded={open}
                            className={"w-[200px] justify-between"}
                        >{!connection ? "Select " + type.charAt(0).toUpperCase() + type.substring(1) + " connection..." : connection.name}</Button>
                    </div>
                </PopoverTrigger>
                <PopoverContent>
                    <Command>
                        <CommandInput
                            placeholder="Filter connections..."
                            autoFocus={true} />
                        <CommandList>
                            <CommandEmpty>No action found.</CommandEmpty>
                            <CommandGroup>
                                {connections.filter(c => c.type == type).map(c => (
                                    <CommandItem
                                        value={c.name}
                                        key={c.name}
                                        onSelect={(value) => {
                                            OnDefaultConnectionUpdate(c)
                                            setOpen(false)
                                        }}>
                                        {c.name}
                                    </CommandItem>
                                ))}
                            </CommandGroup>
                        </CommandList>
                    </Command>
                </PopoverContent>
            </Popover>
        </div>
    );
}