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

export interface RadioTextProps {
    /**
     * Label text for the checkbox.
     */
    label?: string;
    /**
     * Description text for the checkbox.
     */
    message?: string;
    /**
     * Main container className for css classes .
     */
    className?: string;
    /**
     * Children container for the checkbox text, or any other.
     * @ignore
     */
    children?: React.ReactNode;
    /**
     * Radio variation that will switch between styles .
     */
    variation?: 'initial' | 'default' | 'primary' | 'secondary';
    /**
     * ClassName on the message element.
     */
    messageClassName?: string;
}

export const RadioText: React.FC<RadioTextProps & React.InputHTMLAttributes<HTMLInputElement>> = (props) => {
    const { children, label, message, className, messageClassName, disabled } = props;

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

    delete elementProps.label;
    delete elementProps.children;

    return (
        <label className={`flex flex-col w-full ${className ? className : ''}`}>
            {label ? <Label>{label}</Label> : ''}
            <span
                className={`relative flex w-full items-center ${!disabled ? 'cursor-pointer' : 'cursor-not-allowed'}`}
            >
                <Radio {...elementProps} />
                <span className="inline-flex flex-auto pl-3">{children}</span>
            </span>
            {message ? (
                <Text
                    className={`inline-flex pt-1 pl-8 text-xs font-light text-gray-500 whitespace-pre-line ${
                        messageClassName ?? ''
                    }`}
                >
                    {message}
                </Text>
            ) : (
                ''
            )}
        </label>
    );
};

export default RadioText;
