"use client";

import axios from "axios"
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Info } from "lucide-react";
import { Toggle } from "../ui/toggle";
import { TtsBadgeFilter, TwitchConnection } from "@prisma/client";

const formSchema = z.object({
  whitelist: z.string().trim().array(),
  blacklist: z.string().trim().array()
});

export const TTSBadgeFilterModal = () => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);
  
  const router = useRouter();
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      whitelist: z.string().trim().array(),
      blacklist: z.string().trim().array()
    }
  });

  const isLoading = form.formState.isSubmitting;
  
  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    let response = null;

    // try {
    //   response = await axios.post("/api/settings/tts/filter/badges", values);
    // } catch (error) {
    //   console.log("[CONNECTIONS/TWITCH/POST]", error);
    //   return;
    // }

    form.reset();
    router.refresh();
    window.location.reload();
  }

  if (!isMounted) {
    return null;
  }

  const badges: TtsBadgeFilter[] = [] //(await axios.get("/api/settings/tts/filter/badges")).data
  
  return (
    <Dialog>
      <DialogTrigger>
        <Button aria-label="Badge" variant="ttsmessagefilter" className="my-2">
          <Info className="h-4 w-4 mx-1" />
          Badge
        </Button>
      </DialogTrigger>
      <DialogContent className="bg-white text-black p-0 overflow-hidden">
        <DialogHeader className="pt-8 px-6">
          <DialogTitle className="text-2xl text-center">TTS Badge Filter</DialogTitle>
          <DialogDescription className="text-center">Limit messages spoken by TTS by badges.</DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-10">
            {badges.map((badge) => (
              <div className="space-y-8 px-6">
                <FormField
                  key={badge.badgeId}
                  control={form.control}
                  name={badge.badgeId}
                  render={({ field }) => {
                      return (
                        <FormItem>
                          <Toggle
                            aria-label="Badge"
                            variant="simple"
                            disabled={isLoading}
                            className="my-2"
                            {...field}>
                            {badge.badgeId}
                          </Toggle>
                        </FormItem>
                      )
                    }}
                />
              </div>
            ))}
            <DialogFooter className="bg-gray-100 px-6 py-4">
              <Button disabled={isLoading}>Save</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}