import { useState } from 'react';
import { Link, RadioButton, RadioButtonCard, RadioButtonGroup } from '@pega/cosmos-react-core';
export default {
    title: 'Core/RadioButtonGroup',
    component: RadioButtonGroup,
    args: {
        label: 'What do you want to eat?',
        labelHidden: false,
        inline: false,
        autoStack: true,
        required: false,
        disabled: false,
        readOnly: false,
        showAdditionalInfo: false,
        onClear: undefined
    },
    argTypes: {
        label: { control: { type: 'text' } },
        labelHidden: { control: { type: 'boolean' } },
        inline: { control: { type: 'boolean' } },
        autoStack: { control: { type: 'boolean' } },
        required: { control: { type: 'boolean' } },
        disabled: { control: { type: 'boolean' } },
        readOnly: { control: { type: 'boolean' } },
        showAdditionalInfo: { control: { type: 'boolean' } },
        onClear: { control: { type: 'boolean' } }
    }
};
export const RadioButtonGroupDemo = (args) => {
    const [selectedValue, setSelectedValue] = useState('Banana');
    const onClear = () => {
        setSelectedValue(null);
    };
    return args.showNestedAdditionalInfo ? (<RadioButtonGroup additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} label={args.label} name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info} onClick={args.onClick} onBlur={args.onBlur} onClear={selectedValue === null && args.onClear ? undefined : args.onClear && onClear}>
      <RadioButton label='Banana' id='Banana' checked={selectedValue === 'Banana'} additionalInfo={{
            content: 'Some additional info'
        }} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButton label='Apple' id='Apple' checked={selectedValue === 'Apple'} additionalInfo={{
            content: 'Some additional info'
        }} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButton label='Mango' id='Mango' checked={selectedValue === 'Mango'} additionalInfo={{
            content: 'Some additional info'
        }} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButton label='Orange' id='Orange' checked={selectedValue === 'Orange'} additionalInfo={{
            content: 'Some additional info'
        }} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
    </RadioButtonGroup>) : (<RadioButtonGroup additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} label={args.label} name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info} onClick={args.onClick} onBlur={args.onBlur} onClear={selectedValue === null && args.onClear ? undefined : args.onClear && onClear}>
      <RadioButton label='Banana' id='Banana' checked={selectedValue === 'Banana'} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButton label='Apple' id='Apple' checked={selectedValue === 'Apple'} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButton label='Mango' id='Mango' checked={selectedValue === 'Mango'} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButton label='Orange' id='Orange' checked={selectedValue === 'Orange'} onChange={e => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
    </RadioButtonGroup>);
};
RadioButtonGroupDemo.args = {
    status: undefined,
    info: 'You must select it',
    showNestedAdditionalInfo: false
};
RadioButtonGroupDemo.argTypes = {
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    showNestedAdditionalInfo: { control: { type: 'boolean' } }
};
export const RadioButtonCardGroupDemo = (args) => {
    const [selectedValue, setSelectedValue] = useState('creativity');
    const onClear = () => {
        setSelectedValue(null);
    };
    return (<RadioButtonGroup additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} variant='card-grid' label='Which visuals appear satisfying?' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info} onClear={selectedValue === null && args.onClear ? undefined : args.onClear && onClear}>
      <RadioButtonCard readOnly={args.readOnly} label='Creativity' image={{
            src: 'https://www.pega.com/sites/default/files/styles/640/public/media/images/2024-01/pega-hp-streamline-ops-card-img-v2.jpg?itok=WO_wAay2',
            alt: 'create',
            placement: 'inline-start',
            size: 'large'
        }} fields={[
            { id: 'service', name: 'Service length', value: '1 year' },
            { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
            { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
        ]} id='creativity' checked={selectedValue === 'creativity'} onChange={(e) => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButtonCard readOnly={args.readOnly} label='Engagement' image={{
            src: 'https://www.pega.com/sites/default/files/styles/640/public/media/images/2023-12/pega-hp-personalize-engagement-card-img-v3_0.jpg?itok=fN4uO1VZ',
            alt: 'engage',
            placement: 'inline-start',
            size: 'large'
        }} fields={[
            { id: 'service', name: 'Service length', value: '1 year' },
            { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
            { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
        ]} id='engagement' checked={selectedValue === 'engagement'} onChange={(e) => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
      <RadioButtonCard readOnly={args.readOnly} label='Automation' image={{
            src: 'https://www.pega.com/sites/default/files/styles/640/public/media/images/2023-12/pega-hp-automate-cs-card-img-v3.jpg?itok=aN38YgJq',
            alt: 'automate',
            placement: 'inline-start',
            size: 'large'
        }} fields={[
            { id: 'service', name: 'Service length', value: '1 year' },
            { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
            { id: 'total-cost', name: 'Total cost', value: '$2,160.00' },
            { id: 'roi', name: 'Est. annual ROI', value: '320%' },
            {
                id: 'link',
                name: 'Link',
                value: <Link href='https://www.pega.com/'>Pega</Link>
            }
        ]} id='automation' checked={selectedValue === 'automation'} onChange={(e) => {
            setSelectedValue(e.target.id);
        }} onClick={(e) => {
            const target = e.target;
            if (target instanceof HTMLInputElement && target.checked) {
                onClear();
            }
        }} onKeyDown={(e) => {
            if (e.target instanceof HTMLInputElement && e.target.checked && e.code === 'Space') {
                onClear();
                e.preventDefault();
            }
        }}/>
    </RadioButtonGroup>);
};
RadioButtonCardGroupDemo.args = {
    status: undefined,
    info: 'You must select it'
};
RadioButtonCardGroupDemo.argTypes = {
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    info: { control: { type: 'text', label: 'Helper text' } }
};
//# sourceMappingURL=RadioButtonGroup.stories.jsx.map