import React from 'react';
import { twMerge } from 'tailwind-merge';

import style from '../../../style';
import clsx from 'clsx';

export interface InputProps {
    /**
     * Input Ref .
     */
    ref?: React.Ref<HTMLInputElement>;

    /**
     * Input variation that will switch between styles for the Input .
     */
    variation?: 'default' | 'primary' | 'secondary';

    /**
     * Html tag for the input type
     */
    type?: 'color' | 'email' | 'file' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | string;
}

export const Input: React.FC<InputProps & React.InputHTMLAttributes<HTMLInputElement>> = React.forwardRef(
    (props, ref) => {
        const { title, className, type, variation, disabled } = props;
        const elementProps = Object.assign({}, 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' : ''
        }`;

        return (
            <input
                ref={ref}
                {...elementProps}
                className={twMerge(classesMerged)}
                aria-label={title}
                title={title}
                alt={title}
                type={type}
            />
        );
    },
);

export default Input;
