"use client";

import axios from "axios";
import * as React from 'react';
import { Check, ChevronsUpDown } from "lucide-react"
import { ApiKey, TwitchConnection, User } from "@prisma/client";
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Label } from "@/components/ui/label";

const TTSFiltersPage = () => {
  const { data: session, status } = useSession();
  const [loading, setLoading] = useState<boolean>(true)

  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string>("")

  const voices = [
    {
      value: "brian",
      label: "Brian",
      gender: "Male",
      language: "en"
    },
    {
      value: "sveltekit",
      label: "SvelteKit",
      gender: "Male"
    },
    {
      value: "nuxt.js",
      label: "Nuxt.js",
      gender: "Male",
      language: "en"
    },
    {
      value: "remix",
      label: "Remix",
      gender: "Male",
      language: "en"
    },
    {
      value: "astro",
      label: "Astro",
      gender: "Male",
      language: "en"
    },
  ]

  return ( 
    <div>
      <div className="text-2xl text-center pt-[50px]">TTS Voices</div>
      <div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
        <div>
          <div id="defaultvoice" className="inline-block text-lg">Default Voice</div>
          <Label htmlFor="defaultvoice" className=" pl-[10px] inline-block">Voice used without any voice modifiers</Label>
          <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={open}
                className="w-[200px] justify-between"
              >
                {value
                  ? voices.find((voice) => voice.value === value)?.label
                  : "Select voice..."}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[200px] p-0">
              <Command>
                <CommandInput placeholder="Search voice..." />
                <CommandEmpty>No framework found.</CommandEmpty>
                <CommandGroup>
                  {voices.map((voice) => (
                    <CommandItem
                      key={voice.value}
                      value={voice.value}
                      onSelect={(currentValue) => {
                        setValue(currentValue === value ? "" : currentValue)
                        setOpen(false)
                      }}
                    >
                      <Check
                        className={cn(
                          "mr-2 h-4 w-4",
                          value === voice.value ? "opacity-100" : "opacity-0"
                        )}
                      />
                      {voice.label}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>
      </div>
    </div>
   );
}
 
export default TTSFiltersPage;