import React from 'react';

import {RadioButtonGroupStyle as S} from './radio-button-group.style';
import {ButtonGroupComponent} from '../button-group';
import {RedStarComponent} from '../../atoms/red-star';
import type {
    IRadioButtonGroupCompound,
    IRadioButtonGroupItem,
} from './radio-button-group.type';

export const RadioButtonGroupComponent: IRadioButtonGroupCompound = ({
    id,
    mandatory,
    label,
    error,
    hint,
    ...props
}) => {
    return (
        <S.Wrapper>
            <S.Header>
                {mandatory && <RedStarComponent />}
                {label && <S.Label htmlFor={id}>{label}</S.Label>}
            </S.Header>
            <ButtonGroupComponent
                {...props}
                borderColor={error ? 'error' : props.borderColor}
            />
            {hint && <S.Description error={error}>{hint}</S.Description>}
        </S.Wrapper>
    );
};

const Option: React.FC<IRadioButtonGroupItem> = ({
    children,
    color,
    borderColor,
    variant,
    disabled,
    className,
    onClick,
    ...props
}) => (
    <ButtonGroupComponent.Button
        color={color}
        borderColor={disabled ? 'gray' : borderColor}
        variant={variant}
        onClick={onClick}
        disabled={disabled}
        className={className}
    >
        <S.Input type='radio' disabled={disabled} {...props} />
        {children}
    </ButtonGroupComponent.Button>
);

RadioButtonGroupComponent.Option = Option;