/* eslint-disable react-hooks/exhaustive-deps */

"use client";

import { useEffect } from "react";
import { useIMask } from "react-imask";

import type { InputProps } from "../input/input";
import { Input } from "../input/input";
import { Masks } from "./masked-input.types";

export interface MaskedInputProps
  extends Omit<InputProps, "onChange" | "defaultValue" | "value"> {
  defaultValue?: string;
  onChange?: (value: string) => void;
  onChangeUnMasked?: (value: string) => void;
  mask: keyof typeof Masks;
}

const MaskedInput = ({
  defaultValue,
  onChange,
  onChangeUnMasked,
  mask,
  ...props
}: MaskedInputProps) => {
  const { ref, value, setValue, maskRef, setUnmaskedValue } = useIMask(
    typeof Masks[mask] === "object"
      ? (Masks[mask] as any)
      : {
          mask: Masks[mask] as any,
        },
    {
      onAccept(_value) {
        onChange?.(_value);
        onChangeUnMasked?.(maskRef.current?.unmaskedValue as string);
      },
    },
  );

  useEffect(() => {
    if (defaultValue) {
      setUnmaskedValue(defaultValue as string);
    }
  }, []);

  return (
    <Input
      innerRef={ref as unknown as React.RefObject<HTMLInputElement>}
      defaultValue={defaultValue}
      value={value === "" ? defaultValue : value}
      onChange={(e) => setValue(e.target.value)}
      className="placeholder:text-sm placeholder:text-gray-500"
      errorMessage={props.errorMessage}
      {...props}
    />
  );
};

export default MaskedInput;