"use client";
import { objectToQueryString } from "@/utils/lib/helpers";
import React, { useEffect } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { ZodError, z } from "zod";
import DropdownList from "./common/Dropdown";
import { InputField } from "./forms/Inputs";

type FilterFormProps = {
  schema: z.ZodObject<any, any, any>;
  setFilter?: (x: string) => void;
};

const FilterForm: React.FC<FilterFormProps> = ({
  schema,
  setFilter = () => {},
}) => {
  const filterForm = useForm({
    resolver: async (data) => {
      try {
        const parsedData = schema.parse(data);
        return { values: parsedData, errors: {} };
      } catch (error) {
        if (error instanceof ZodError) {
          return {
            values: {},
            errors: error.errors.reduce((acc: any, err) => {
              acc[err.path[0]] = {
                message: err.message,
                type: err.path[0],
              };
              return acc;
            }, {}),
          };
        }
        return { values: {}, errors: {} };
      }
    },
  });
  const {
    control,
    formState: { errors },
  } = filterForm;

  const watchedFields = useWatch({
    control,
    defaultValue: {},
  });

  const getQuerySting = (params: any) => {
    const query = objectToQueryString(params);
    setFilter(query);
    return query;
  };

  useEffect(() => {
    getQuerySting(watchedFields);
  }, [watchedFields]);

  const isDropdown = (option: string) => {
    return option.includes("dropdown") ? true : false;
  };

  const IdName = (option: string) => {
    let name = option.replace("_dropdown", "");
    if (name === "status") {
      return "status";
    }
    return `${name}_id`;
  };
  return (
    <>
      <FormProvider {...filterForm}>
        <form>
          <div className="grid grid-cols-2 gap-2 md:grid-cols-6 lg:grid-cols-6 sm:grid-cols-3">
            {Object.keys(schema.shape).map((fieldName) => (
              <div key={fieldName}>
                {isDropdown(fieldName) ? (
                  <div className="mt-2">
                    <DropdownList
                      name={fieldName.replace("_dropdown", "")}
                      isMulti={false}
                      idName={IdName(fieldName)}
                      getLabel={(option: any) => option.name}
                    />
                  </div>
                ) : (
                  <InputField name={fieldName} placeholder={fieldName} />
                )}
              </div>
            ))}
          </div>
        </form>
      </FormProvider>
    </>
  );
};

export default FilterForm;