/**
 * External dependencies
 */
import classnames from 'classnames';
import { withInstanceId } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import RadioControlOption from '../radio-control/option';
import "./style.scss";
const RadioControlAccordion = ( {
    className,
    instanceId,
    id,
    selected,
    onChange,
    options,
} ) => {
    const radioControlId = id || instanceId;

    if ( ! options.length ) {
        return null;
    }
    return (
        <div
            className={ classnames(
                'wc-block-components-radio-control',
                'wc-shiptastic-block-components-radio-control',
                className
            ) }
        >
            { options.map( ( option ) => {
                const hasOptionContent =
                    typeof option === 'object' && 'content' in option;
                const checked = option.value === selected;
                return (
                    <div
                        className="wc-block-components-radio-control-accordion-option"
                        key={ option.value }
                    >
                        <RadioControlOption
                            name={ `radio-control-${ radioControlId }` }
                            checked={ checked }
                            option={ option }
                            onChange={ ( value ) => {
                                onChange( value );
                                if ( typeof option.onChange === 'function' ) {
                                    option.onChange( value );
                                }
                            } }
                        />
                        { hasOptionContent && checked && (
                            <div
                                className={ classnames(
                                    'wc-block-components-radio-control-accordion-content',
                                    {
                                        'wc-block-components-radio-control-accordion-content-hide':
                                            ! checked,
                                    }
                                ) }
                            >
                                { option.content }
                            </div>
                        ) }
                    </div>
                );
            } ) }
        </div>
    );
};

export default withInstanceId( RadioControlAccordion );
export { RadioControlAccordion };
