import { Checkbox, ThemeOverride, CheckboxCard as CheckboxCardComp, Link, Flex } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Checkbox',
    component: Checkbox,
    excludeStories: ['ConfigurableCheckbox'],
    args: {
        status: undefined,
        label: 'Check me, please',
        required: false,
        disabled: false,
        readOnly: false,
        showAdditionalInfo: false
    },
    argTypes: {
        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
        label: { control: { type: 'text' } },
        required: { control: { type: 'boolean' } },
        disabled: { control: { type: 'boolean' } },
        readOnly: { control: { type: 'boolean' } },
        showAdditionalInfo: { control: { type: 'boolean' } }
    }
};
export const DefaultCheckbox = (args) => {
    return (<Checkbox additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} info={args.info} status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly} indeterminate={args.indeterminate}/>);
};
DefaultCheckbox.args = {
    info: 'You must check this',
    indeterminate: false
};
DefaultCheckbox.argTypes = {
    info: { control: { type: 'text', label: 'Helper text' } },
    indeterminate: { control: { type: 'boolean' } }
};
export const CheckboxCard = (args) => {
    const imgAltText = 'The image alternative text';
    return (<Flex container={{ gap: 1, direction: 'column' }}>
      <CheckboxCardComp required={args.required} label={args.label} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo ? { content: 'Some additional info' } : undefined} actions={args.showActions
            ? [
                {
                    id: 'id',
                    text: 'First action',
                    onClick: () => { }
                }
            ]
            : undefined} image={args.imageUrl
            ? {
                src: args.imageUrl,
                size: args.imageSize,
                alt: imgAltText,
                placement: args.imagePlacement
            }
            : undefined} fields={args.noOfFields > 0
            ? [
                { id: 'service', name: 'Service length', value: '1 year' },
                {
                    id: 'monthly-cost',
                    name: 'Monthly cost',
                    value: <Link href='https://www.pega.com/'>https://www.pega.com/</Link>
                },
                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' },
                {
                    id: 'text',
                    name: 'Text',
                    value: 'Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content.'
                },
                {
                    id: 'phone',
                    name: 'Phone',
                    value: '1-800-123-456'
                }
            ]
                .slice(0, args.noOfFields)
                .map(field => args.removeFieldLabels ? { id: field.id, value: field.value } : field)
            : undefined}/>
    </Flex>);
};
CheckboxCard.args = {
    imagePlacement: 'inline-start',
    imageSize: 'flexible',
    imageUrl: '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',
    noOfFields: 5,
    showActions: false,
    status: undefined,
    label: 'Creativity',
    removeFieldLabels: false
};
CheckboxCard.argTypes = {
    imagePlacement: {
        options: ['inline-start', 'inline-end', 'block-start'],
        control: { type: 'select' }
    },
    imageSize: { options: ['large', 'small', 'flexible'], control: { type: 'select' } },
    noOfFields: { control: { type: 'number' } },
    imageUrl: { control: { type: 'text' } },
    status: { table: { disable: true } },
    label: { control: { type: 'text' } },
    showActions: { control: { type: 'boolean' } },
    removeFieldLabels: { control: { type: 'boolean' } }
};
export const ConfigurableCheckbox = (args) => {
    return (<ThemeOverride theme={{
            components: {
                checkbox: {
                    'border-radius': args.borderRadius
                },
                'radio-check': {
                    'border-color': args.borderColor,
                    'border-width': args.borderWidth,
                    'background-color': args.backgroundColor,
                    label: {
                        color: args.labelColor,
                        'font-weight': args.labelFontWeight
                    },
                    size: args.size,
                    ':checked': {
                        'background-color': args.checkedBackgroundColor,
                        'border-color': args.checkedBorderColor
                    }
                }
            }
        }}>
      <Checkbox additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} label='Configurable Checkbox'/>
    </ThemeOverride>);
};
ConfigurableCheckbox.args = {
    size: '1.25rem',
    backgroundColor: '#ffffff',
    borderColor: '#939393',
    borderWidth: '0.0625rem',
    borderRadius: '0.5',
    labelColor: '#939393',
    labelFontWeight: '400',
    checkedBackgroundColor: '#076bc9',
    checkedBorderColor: '#076bc9',
    indeterminate: false,
    showAdditionalInfo: false
};
ConfigurableCheckbox.argTypes = {
    size: { control: { type: 'text' } },
    backgroundColor: { control: { type: 'color' } },
    borderColor: { control: { type: 'color' } },
    borderWidth: { control: { type: 'text' } },
    borderRadius: { control: { type: 'text' } },
    labelColor: { control: { type: 'color' } },
    labelFontWeight: { control: { type: 'text' } },
    checkedBackgroundColor: { control: { type: 'color' } },
    checkedBorderColor: { control: { type: 'color' } },
    status: { table: { disable: true } },
    label: { table: { disable: true } },
    required: { table: { disable: true } },
    disabled: { table: { disable: true } },
    readOnly: { table: { disable: true } },
    indeterminate: { table: { disable: true } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Checkbox.stories.jsx.map