"use client";
import Dropzone from "@/components/Dropzone";
import ValidationError from "@/components/ValidationError";
import { Product } from "@/interfaces/Product";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Modal, Spinner } from "flowbite-react";
import { FC, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { FaPlus } from "react-icons/fa";
import { HiPencilAlt } from "react-icons/hi";
import Button from "../Button";
import Toasts from "../Toasts";
import { InputField, Textarea } from "../forms/Inputs";
import { TSproductSchema, productSchema } from "../forms/schema/product";
import PreviewImages from "./product-image-preview";

type Props = {
  product?: Product;
  mode?: string;
};

const ProductForm: FC<Props> = ({ product, mode = "create" }) => {
  const productForm = useForm<TSproductSchema>({
    resolver: zodResolver(productSchema),
    mode: "onChange",
    defaultValues: product as TSproductSchema,
  });

  const {
    handleSubmit,
    reset,
    formState: { errors },
  } = productForm;

  const [images, setImages] = useState<any>([]);
  const [isOpen, setOpen] = useState(false);
  const queryClient = useQueryClient();
  const inputRef = useRef<HTMLInputElement>(null);

  const {
    mutate: submitProduct,
    isPending,
    isError,
    error,
    isSuccess,
  } = useMutation({
    mutationFn: async (formData: any) => {
      const api_url =
        mode === "create" ? "/api/products" : `/api/products/${product?.id}`;
      const method = mode === "create" ? "post" : "put";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: formData,
      });
      return data.data;
    },
    onSuccess: () => {
      setTimeout(() => {
        queryClient.invalidateQueries({ queryKey: ["products"] });
      }, 1000);
      setOpen(false);
    },
    onError: (error: any) => {
      setOpen(false);
    },
  });

  const onSubmit = async (data: TSproductSchema) => {
    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => {
      formData.append(key, value as any);
    });
    if (images?.length > 0) {
      Array.from(images).forEach((image: any) => {
        formData.append("images[]", image);
      });
    }
    submitProduct(formData);
    reset();
  };

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      {isSuccess && <Toasts message="Product create successful!" />}
      <Button
        size="sm"
        className="p-0"
        color="blue"
        onClick={() => setOpen(!isOpen)}
      >
        {mode === "create" ? (
          <>
            <FaPlus className="mr-3 text-sm" />
            Add Product
          </>
        ) : (
          <>
            <HiPencilAlt className="mr-2 text-lg" />
            Edit
          </>
        )}
      </Button>
      <Modal onClose={() => setOpen(false)} show={isOpen}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <strong>Add product</strong>
          ) : (
            <strong>Edit product</strong>
          )}
        </Modal.Header>
        <Modal.Body className="overflow-auto">
          <FormProvider {...productForm}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <div>
                  <InputField
                    labelText="Product name"
                    name="name"
                    placeholder="Product name"
                    errors={errors}
                  />
                </div>
                <div>
                  <InputField
                    labelText="Technology"
                    name="technology"
                    placeholder="Technology name"
                    errors={errors}
                  />
                </div>
                <div>
                  <InputField
                    labelText="Price"
                    name="price"
                    inputType="number"
                    placeholder="$2300"
                    errors={errors}
                  />
                </div>
                <div className="lg:col-span-2">
                  <Textarea
                    labelText="Product details"
                    name="description"
                    placeholder="Product description"
                  />
                </div>
                <div className="lg:col-span-2">
                  <Dropzone setImages={setImages} images={images} />
                </div>
                {mode === "edit" && <PreviewImages images={product?.images} />}
              </div>
              <input className="opacity-0" type="submit" ref={inputRef} />
            </form>
          </FormProvider>
        </Modal.Body>
        <Modal.Footer>
          <Button
            color="blue"
            buttonType="button"
            className="float-right"
            onClick={() => inputRef.current?.click()}
          >
            {isPending && <Spinner aria-label="Spinner button" size="sm" />}
            Submit
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default ProductForm;