import { useRef, type InputHTMLAttributes } from "react";

type defaultValues = Record<string, any>;

interface Props<T extends defaultValues = defaultValues> {
  initialValues?: Partial<T>;
}

type InputElements =
  | HTMLInputElement
  | HTMLSelectElement
  | HTMLTextAreaElement
;

interface UseFormReturns<T extends defaultValues> {
  getValue: () => T;
  setValue: (name: keyof T, value: string | number) => void;
  setValues: (values: Partial<T>) => void;
  bindInput: (name: keyof T) => InputHTMLAttributes<InputElements>;
  // onSubmit: (values: T) => (ev: React.FormEvent) => void
  onSubmit: (fn: (values: T) => void) => (ev: React.FormEvent) => void
}

const isCheckBox = (el: HTMLElement) => {
  return el instanceof HTMLInputElement && el.type === "checkbox";
}

function useForm<T extends defaultValues>({ initialValues }: Props<T>) {
  const inputs = useRef<Partial<Record<keyof T, InputElements>>>({});
  const values = useRef<T>({ ...initialValues } as T);
  const inst = useRef<UseFormReturns<T>>();

  if (!inst.current) {
    const getValue = () => {
      return values.current;
    }

    const setValue = (name, value) => {
      const el = inputs.current[name];

      console.log(el, name);

      if (el) {
        values.current[name as keyof T] = value;

        if (el instanceof HTMLInputElement && el.type === "checkbox") {
          el.checked = value;

          return;
        }

        inputs.current[name].value = value;
      }
    }

    const setValues = (values) => {
      Object.keys(values).forEach((key) => {
        setValue(key, values[key]);
      });
    }

    const bindInput = (name: string) => {
      return {
        name,
        id: name,
        ref: (target) => {
          console.log('ref', target);

          if (target) {
            inputs.current[name as keyof T] = target;

            if (isCheckBox(target)) {
              target.checked = initialValues?.[name];
            }
            else if (name in initialValues) {
              target.value = initialValues[name];
            }
          }
        },
        onChange: (ev) => {
          const { name, value, checked } = ev.target;

          if (isCheckBox(ev.target)) {
            values.current[name as keyof T] = checked;

            return;
          }

          values.current[name as keyof T] = value;
        },
      }
    }

    const onSubmit = (fn: (values: T) => void) => {
      return (ev: React.FormEvent) => {
        ev.preventDefault();

        fn(getValue());
      }
    }

    inst.current = {
      getValue,
      setValue,
      setValues,
      bindInput,
      onSubmit,
    };
  }

  return inst.current;
}

export default useForm;