import { Status, Table, ThemeOverride } from '@pega/cosmos-react-core';
import { tableData } from './Table.mocks';
import { StyledBalance } from './Table.styles';
export default {
    title: 'Core/Table',
    component: Table,
    excludeStories: ['ConfigurableTable'],
    args: {
        title: 'Accounts',
        hoverHighlight: false,
        loading: false,
        loadingMessage: 'Loading data',
        emptyTable: false
    },
    argTypes: {
        title: { control: { type: 'text' } },
        hoverHighlight: { control: { type: 'boolean' } },
        loading: { control: { type: 'boolean' } },
        loadingMessage: { control: { type: 'text' } },
        emptyTable: { control: { type: 'boolean' } }
    }
};
export const TableDemo = (args) => {
    const columns = [
        { renderer: 'name', label: 'Name' },
        { renderer: 'dob', label: 'Date of Birth' },
        { renderer: 'address', label: 'Address' },
        { renderer: 'email', label: 'Email' },
        { renderer: 'balance', label: 'Account Balance', align: 'right' }
    ];
    return (<Table title={args.title} hoverHighlight={args.hoverHighlight} loading={args.loading} loadingMessage={args.loadingMessage} data={args.emptyTable ? [] : tableData} columns={columns}/>);
};
export const StyledTableDemo = (args) => {
    const columns = [
        { renderer: data => <b>{data.name}</b>, label: 'Name' },
        { renderer: 'dob', label: 'Date of Birth' },
        { renderer: 'address', label: 'Address' },
        {
            renderer: data => {
                return (<>
            {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}
            {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}
          </>);
            },
            label: 'Email'
        },
        {
            renderer: data => {
                return (<StyledBalance negativeBalance={data.balance.startsWith('-')}>
            {data.balance}
          </StyledBalance>);
            },
            label: 'Account Balance',
            align: 'right'
        }
    ];
    return (<Table title={args.title} hoverHighlight={args.hoverHighlight} loading={args.loading} loadingMessage={args.loadingMessage} data={args.emptyTable ? [] : tableData} columns={columns}/>);
};
export const ConfigurableTable = (args) => {
    const columns = [
        { renderer: data => <b>{data.name}</b>, label: 'Name' },
        { renderer: 'dob', label: 'Date of Birth' },
        { renderer: 'address', label: 'Address' },
        {
            renderer: data => {
                return (<>
            {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}
            {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}
          </>);
            },
            label: 'Email'
        },
        {
            renderer: data => {
                return (<StyledBalance negativeBalance={data.balance.startsWith('-')}>
            {data.balance}
          </StyledBalance>);
            },
            label: 'Account Balance',
            align: 'right'
        }
    ];
    return (<ThemeOverride theme={{
            components: {
                table: {
                    header: {
                        'font-size': args.headerFontSize,
                        'font-weight': args.headerFontWeight,
                        'foreground-color': args.headerForegroundColor,
                        'background-color': args.headerBackgroundColor,
                        'vertical-spacing': args.headerVerticalSpacing,
                        'horizontal-spacing': args.headerHorizontalSpacing,
                        'border-width': args.headerBorderWidth,
                        'border-color': args.headerBorderColor
                    },
                    body: {
                        'foreground-color': args.bodyForegroundColor,
                        'background-color': args.bodyBackgroundColor,
                        'vertical-spacing': args.bodyVerticalSpacing,
                        'horizontal-spacing': args.bodyHorizontalSpacing,
                        'border-width': args.bodyBorderWidth,
                        'border-color': args.bodyBorderColor
                    },
                    border: {
                        'horizontal-inner': args.borderHorizontalInner,
                        'horizontal-outer': args.borderHorizontalOuter,
                        'vertical-inner': args.borderVerticalInner,
                        'vertical-outer': args.borderVerticalOuter
                    },
                    spacing: {
                        'horizontal-inner': args.spacingHorizontalInner,
                        'horizontal-outer': args.spacingHorizontalOuter,
                        'vertical-inner': args.spacingVerticalInner,
                        'vertical-outer': args.spacingVerticalOuter
                    }
                }
            }
        }}>
      <Table title='Accounts' data={tableData} columns={columns}/>
    </ThemeOverride>);
};
ConfigurableTable.args = {
    headerFontSize: 's',
    headerFontWeight: '600',
    headerForegroundColor: '#000000',
    headerBackgroundColor: '#71baff',
    headerVerticalSpacing: 1,
    headerHorizontalSpacing: 2,
    headerBorderWidth: '0.0625rem',
    headerBorderColor: '#cfcfcf',
    bodyForegroundColor: '#000000',
    bodyBackgroundColor: '#e2f1ff',
    bodyVerticalSpacing: 1,
    bodyHorizontalSpacing: 1,
    bodyBorderWidth: '0.0625rem',
    bodyBorderColor: '#cfcfcf',
    borderHorizontalInner: true,
    borderHorizontalOuter: true,
    borderVerticalInner: true,
    borderVerticalOuter: true,
    spacingHorizontalInner: true,
    spacingHorizontalOuter: true,
    spacingVerticalInner: true,
    spacingVerticalOuter: true
};
ConfigurableTable.argTypes = {
    headerFontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    headerFontWeight: { control: { type: 'text' } },
    headerForegroundColor: { control: { type: 'color' } },
    headerBackgroundColor: { control: { type: 'color' } },
    headerVerticalSpacing: { control: { type: 'number' } },
    headerHorizontalSpacing: { control: { type: 'number' } },
    headerBorderWidth: { control: { type: 'text' } },
    headerBorderColor: { control: { type: 'color' } },
    bodyForegroundColor: { control: { type: 'color' } },
    bodyBackgroundColor: { control: { type: 'color' } },
    bodyVerticalSpacing: { control: { type: 'number' } },
    bodyHorizontalSpacing: { control: { type: 'number' } },
    bodyBorderWidth: { control: { type: 'text' } },
    bodyBorderColor: { control: { type: 'color' } },
    borderHorizontalInner: { control: { type: 'boolean' } },
    borderHorizontalOuter: { control: { type: 'boolean' } },
    borderVerticalInner: { control: { type: 'boolean' } },
    borderVerticalOuter: { control: { type: 'boolean' } },
    spacingHorizontalInner: { control: { type: 'boolean' } },
    spacingHorizontalOuter: { control: { type: 'boolean' } },
    spacingVerticalInner: { control: { type: 'boolean' } },
    spacingVerticalOuter: { control: { type: 'boolean' } },
    title: { table: { disable: true } },
    hoverHighlight: { table: { disable: true } },
    loading: { table: { disable: true } },
    loadingMessage: { table: { disable: true } },
    emptyTable: { table: { disable: true } }
};
//# sourceMappingURL=Table.stories.jsx.map