import { IType } from "./types";

export const typeMasks = {
  PostalCode: [/\d/, /\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/, /\d/],
  Phone: ["0", "9", /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/],
  Sheba: [
    "I",
    "R",
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
  ],
  CreditCard: [
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    "-",
    /\d/,
    /\d/,
    /\d/,
    /\d/,
  ],
  NationalCode: [/\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, "-", /\d/, "/", /\D/],
  SmartNumber: [/\d/, /\D/, "-", /\D/, "-", /\D/],
  DriverNumber: [/\D/, "-", /\D/, "-", /\D/],
};

export const typeMake = (type: IType = "Phone", customMask?: any) => {
  return typeMasks[type] || customMask || [/./];
};

const placeholderMap = {
  Phone: "09_________",
  PostalCode: "_____-_____",
  Sheba: "IR__-____-____-____-____-____-__",
  CreditCard: "____-____-____-____",
  NationalCode: "___-___-____",
  DriverNumber: "___-___-____",
  SmartNumber: "___-___-____",
};

export const placeHolderMake = (type: IType = "Phone") =>
  placeholderMap[type] || "";
import { forwardRef, memo, useEffect, useMemo, useState } from "react";
import MaskedInput from "react-text-mask";
import { IFormMaskType } from "./types";
import { Input, InputRef } from "antd";
import { placeHolderMake, typeMake } from "@/src/components/maskInput/helper";

const FormMask = forwardRef<InputRef, IFormMaskType>(
  (
    {
      error,
      children,
      type,
      customeMask,
      beforeNode,
      onChange,
      value,
      placeholder,
      className = "w-2/3 rounded-md py-2 border-dashed !border-orange-300 focus:outline-none text-center text-xs sm:text-sm md:text-base lg:text-lg",
      containerClass = "flex flex-col justify-center items-center w-full",
      readOnly,
      disabled,
      autoFocus,
      ...rest
    },
    ref,
  ) => {
    const [realValue, setRealValue] = useState<string>((value ?? "") as string);
    const [focused, setFocused] = useState(false);
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value;
      setRealValue(newValue);

      let cleanedValue;
      switch (type) {
        case "Phone":
          cleanedValue = newValue.startsWith("09")
            ? newValue.slice(4).replace(/[^0-9]/g, "")
            : newValue.replace(/[^0-9]/g, "");
          break;
        case "PostalCode":
        case "CreditCard":
          cleanedValue = newValue.replace(/[^0-9]/g, "");
          break;
        default:
          cleanedValue = newValue;
      }

      onChange && onChange(cleanedValue);
    };
    useEffect(() => {
      if (value !== realValue) {
        setRealValue((value ?? "").toString());
      }
    }, [value]);

    const mask = useMemo(
      () => typeMake(type, customeMask),
      [type, customeMask],
    );
    return (
      <div className={containerClass}>
        {beforeNode}
        <div className="w-full relative">
          <Input
            ref={ref}
            style={{ display: "none" }}
            value={realValue.replace(/\D/g, "")}
            onChange={() => {}}
          />
          <MaskedInput
            {...rest}
            readOnly={readOnly}
            disabled={disabled}
            autoFocus={autoFocus}
            onFocus={() => setFocused(true)}
            onBlur={() => setTimeout(() => setFocused(false), 500)}
            dir="ltr"
            type="tel"
            guide
            onEnded={() => setFocused(false)}
            placeholder={placeholder || placeHolderMake(type)}
            mask={mask}
            value={realValue}
            onChange={handleChange}
            className={className}
          />
        </div>
        {children}
        {error && <div className="mt-2 text-red-500">{error}</div>}
      </div>
    );
  },
);
export const MemoisedFormMask = memo(FormMask);
export type IType =
  | "Sheba"
  | "PostalCode"
  | "Phone"
  | "NationalCode"
  | "CreditCard"
  | "SmartNumber"
  | "DriverNumber";
export interface IFormMaskType {
  error?: string;
  containerClass?: string;
  children?: JSX.Element | JSX.Element[];
  beforeNode?: JSX.Element | JSX.Element[];
  autoFocus?: boolean;
  type?: IType;
  customeMask?: (string | RegExp)[];
  onChange?: (value: string) => void;
  value?: String;
  className?: string;
  readOnly?: boolean;
  placeholder?: string;
  disabled?: boolean;
}
the phone mask input strategy must be work with +countrycode mobilenumber or without it just mobilenumber itself for example iranian <PRESIDIO_ANONYMIZED_PHONE_NUMBER>