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

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

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;
    /**
     * The content of the Help message.
     */
    help?: React.ReactNode | string;
    /**
     * className for the Help message container.
     */
    helpClassName?: string;
}

export const InputText: React.FC<InputTextProps & React.InputHTMLAttributes<HTMLInputElement>> = forwardRef(
    (props, ref) => {
        const { children, label, message, className, inputClassName, messageClassName, help, helpClassName } = props;
        const [showHelp, setShowHelp] = useState(false);

        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 relative ${className ? className : ''} `}>
                {label || help ? (
                    <Label className="flex w-full">
                        <span className="flex-auto">{label}</span>
                        {help && (
                            <span
                                className={`hover:bg-indigo-A700 hover:text-white text-xs rounded-full p-1 inline-flex items-center justify-center w-5 h-5 ${
                                    showHelp ? 'bg-indigo-A700 text-white' : 'bg-gray-200 '
                                }`}
                                onClick={() => setShowHelp(!showHelp)}
                            >
                                ?
                            </span>
                        )}
                    </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>
                )}
                {showHelp && (
                    <Block className={'relative w-full mt-1'}>
                        <Block
                            className={`border-gray-100 border px-4 py-3 antialiased prose-lg rounded absolute top-0 left-0 right-0 shadow-xl font-light text-xs undefined bg-gray-50 ${helpClassName}`}
                        >
                            {help}
                        </Block>
                    </Block>
                )}
            </label>
        );
    },
);

export default InputText;
