import { forwardRef } from 'react';
import Input from '../../atoms/Input';

import Text from '../../atoms/Text';
import Label from './../../atoms/Label/Label';

export interface InputTextProps {
    /**
     * Input Ref .
     */
    ref?: React.Ref<HTMLInputElement>;
    /**
     * Label text for the checkbox.
     */
    label?: string;
    /**
     * Smaller descriptive text that can be added to the input.
     */
    message?: string;
    /**
     * className for the message.
     */
    messageClassName?: string;
    /**
     * Main container className for css classes .
     */
    className?: string;
    /**
     * Input variation that will switch between styles for the Input .
     */
    variation?: 'default' | 'primary' | 'secondary';
    /**
     * className for the Input.
     */
    inputClassName?: string;
}

export const InputText: React.FC<InputTextProps & React.InputHTMLAttributes<HTMLInputElement>> = forwardRef(
    (props, ref) => {
        const { children, label, message, className, inputClassName, messageClassName } = props;

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

        delete elementProps.label;
        delete elementProps.children;
        delete elementProps.className;
        delete elementProps.message;
        delete elementProps.messageClassName;
        delete elementProps.inputClassName;

        return (
            <label className={`flex flex-col ${className ? className : ''} `}>
                {label ? <Label>{label}</Label> : ''}
                <span className="relative flex items-center w-full">
                    <Input {...elementProps} ref={ref} className={`${inputClassName} ${children ? 'pr-10' : ''}`} />
                    <span className="absolute top-0 bottom-0 right-0 z-20 flex items-center">{children}</span>
                </span>
                {message ? (
                    <Text className={`inline-flex py-2 text-xs font-light ${messageClassName ?? ''}`}>{message}</Text>
                ) : (
                    ''
                )}
            </label>
        );
    },
);

export default InputText;
