import { Checkbox, CheckboxCard, CheckboxGroup, Link } from '@pega/cosmos-react-core';
export default {
    title: 'Core/CheckboxGroup',
    component: CheckboxGroup,
    args: {
        label: 'What do you want to eat?',
        labelHidden: false,
        inline: false,
        autoStack: true,
        required: false,
        disabled: false,
        readOnly: false,
        showAdditionalInfo: false
    },
    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' } }
    }
};
export const CheckboxGroupDemo = (args) => {
    return args.showNestedAdditionalInfo ? (<CheckboxGroup 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} info={args.info} status={args.status}>
      <Checkbox additionalInfo={{
            content: 'Some additional info'
        }} label='Banana' id='Banana' defaultChecked/>
      <Checkbox additionalInfo={{
            content: 'Some additional info'
        }} label='Apple' id='Apple'/>
      <Checkbox additionalInfo={{
            content: 'Some additional info'
        }} label='Mango' id='Mango'/>
      <Checkbox additionalInfo={{
            content: 'Some additional info'
        }} label='Orange' id='Orange'/>
    </CheckboxGroup>) : (<CheckboxGroup 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} info={args.info} status={args.status}>
      <Checkbox label='Banana' id='Banana' defaultChecked/>
      <Checkbox label='Apple' id='Apple'/>
      <Checkbox label='Mango' id='Mango'/>
      <Checkbox label='Orange' id='Orange'/>
    </CheckboxGroup>);
};
CheckboxGroupDemo.args = {
    status: undefined,
    info: 'You must select it',
    showNestedAdditionalInfo: false
};
CheckboxGroupDemo.argTypes = {
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    showNestedAdditionalInfo: { control: { type: 'boolean' } }
};
export const CheckboxCardGroupDemo = (args) => {
    return (<CheckboxGroup additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} variant='card-grid' label='Which visuals appear satisfying?' inline={args.inline} autoStack={args.autoStack} labelHidden={args.labelHidden} required={args.required} readOnly={args.readOnly} info={args.info} status={args.status}>
      <CheckboxCard label='Creativity' disabled={args.disabled} readOnly={args.readOnly} image={args.showImg
            ? {
                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',
                size: args.imgSize,
                alt: 'create',
                placement: args.imgPlacement
            }
            : undefined} fields={args.showFields
            ? [
                { 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' }
            ].map(({ name, ...restProps }) => ({
                ...(args.removeLabels ? {} : { name }),
                ...restProps
            }))
            : undefined}/>

      <CheckboxCard label='Engagement' disabled={args.disabled} readOnly={args.readOnly} image={args.showImg
            ? {
                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',
                size: args.imgSize,
                alt: 'engage',
                placement: args.imgPlacement
            }
            : undefined} fields={args.showFields
            ? [
                { 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' }
            ].map(({ name, ...restProps }) => ({
                ...(args.removeLabels ? {} : { name }),
                ...restProps
            }))
            : undefined}/>

      <CheckboxCard label='Automation' disabled={args.disabled} readOnly={args.readOnly} image={args.showImg
            ? {
                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',
                size: args.imgSize,
                alt: 'automate',
                placement: args.imgPlacement
            }
            : undefined} fields={args.showFields
            ? [
                { 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>
                }
            ].map(({ name, ...restProps }) => ({
                ...(args.removeLabels ? {} : { name }),
                ...restProps
            }))
            : undefined}/>
    </CheckboxGroup>);
};
CheckboxCardGroupDemo.args = {
    imgPlacement: 'inline-start',
    imgSize: 'large',
    showImg: true,
    showFields: true,
    removeLabels: false,
    status: undefined,
    info: 'You must select it'
};
CheckboxCardGroupDemo.argTypes = {
    imgPlacement: {
        options: ['inline-start', 'inline-end', 'block-start'],
        control: { type: 'select' }
    },
    imgSize: {
        options: ['large', 'small', 'flexible'],
        control: { type: 'select' }
    },
    showFields: { control: { type: 'boolean' } },
    removeLabels: { control: { type: 'boolean' } },
    showImg: { control: { type: 'boolean' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    info: { control: { type: 'text', label: 'Helper text' } }
};
//# sourceMappingURL=CheckboxGroup.stories.jsx.map