import React from 'react';
import { IMaskInput } from 'react-imask';
import { twMerge } from 'tailwind-merge';
import style from '../../../style';
import clsx from 'clsx';
import { InputProps } from '../../atoms/Input/Input';
import { IMaskInputProps } from 'react-imask';

export const InputMasked: React.FC<IMaskInputProps & InputProps> = (props) => {
    const { className, variation, disabled } = props;

    const variationClasses = clsx({
        [style.input.default]: variation === 'default',
        [style.input.primary]: variation === 'primary',
        [style.input.secondary]: variation === 'secondary',
    });

    const classesMerged = `${style.input?.init} ${variationClasses} ${className ? className : ''} ${
        disabled ? 'opacity-60 cursor-not-allowed' : ''
    }`;

    const elementProps = Object.assign({}, props);
    delete elementProps.className;

    return <IMaskInput ref={props.ref} {...elementProps} className={twMerge(classesMerged)} />;
};

export default InputMasked;
