"use client";

import { useSession } from "next-auth/react";
import React, { useState, useEffect } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

const formSchema = z.object({
  id: z.string(),
  name: z.string(),
  qty: z.number(),
  buyPrice: z.number(),
  sealPrice: z.number(),
});

type Product = {
  id: string;
  name: string;
  qty: number;
  buyPrice: number;
  sealPrice: number;
};

const Pages = () => {
  const { data: session, status } = useSession();
  const [loading, setLoading] = useState(false);
  const [product, setProduct] = useState<Product>();

  const form = useForm({
    resolver: zodResolver(formSchema),
    // defaultValues: {
    //   id: "",
    //   name: "",
    //   qty: 0,
    //   buyPrice: 0,
    //   sealPrice: 0,
    // },
  });

  // const getCategories = async () => {
  //   setLoading(true);
  //   try {
  //     const res = await fetch("/api/user", {
  //       method: "GET",
  //     });
  //     const data: User[] = await res.json();
  //     const user = data.find((datum) => datum.id === session?.user?.id);
  //     setUser(user);
  //     setLoading(false);
  //   } catch (err) {
  //     console.log("[Users_GET]", err);
  //     setLoading(false);
  //   }
  // };

  // useEffect(() => {
  //   if (status === "authenticated" && session?.user?.id) {
  //     getCategories();
  //   }
  // }, [status, session]);

  useEffect(() => {
    if (product) {
      form.reset({
        id: product.id,
        name: product.name,
        qty: product?.qty,
        buyPrice: product?.buyPrice,
        sealPrice: product?.sealPrice,
      });
    }
  }, [product, form]);

  async function onSubmit() {
    // const response = await fetch(`/api/user/${user?.id}`, {
    //   method: "PUT",
    //   body: JSON.stringify(data),
    //   headers: {
    //     "Content-Type": "application/json",
    //   },
    // });
  }

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div className="max-w-[1350px] m-auto  min-h-[calc(100vh-280px)] p-20">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="id"
            render={({ field }) => (
              <FormItem>
                <FormItem>
                  <FormLabel>ID</FormLabel>
                  <FormControl>
                    <Input {...field} type="text" placeholder="369" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormItem>
                  <FormLabel>Product Name</FormLabel>
                  <FormControl>
                    <Input {...field} type="text" placeholder="Chips" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="qty"
            render={({ field }) => (
              <FormItem>
                <FormItem>
                  <FormLabel>Product Quantity</FormLabel>
                  <FormControl>
                    <Input {...field} type="text" placeholder="100" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="buyPrice"
            render={({ field }) => (
              <FormItem>
                <FormItem>
                  <FormLabel>Product Buy Price</FormLabel>
                  <FormControl>
                    <Input {...field} type="text" placeholder="122.23" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="sealPrice"
            render={({ field }) => (
              <FormItem>
                <FormItem>
                  <FormLabel>Product Seal Price</FormLabel>
                  <FormControl>
                    <Input {...field} type="text" placeholder="122.23 tk" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormItem>
            )}
          />
          <div className="w-[100%] flex justify-end">
            <Button type="submit" className="text-white">
              Update
            </Button>
          </div>
        </form>
      </Form>
    </div>
  );
};

export default Pages;