import { useState } from 'react';
import { Card, ThemeOverride, Switch } from '@pega/cosmos-react-core';
import { StyledCard } from './Switch.styles';
export default {
    title: 'Core/Switch',
    component: Switch,
    excludeStories: ['ConfigurableSwitch'],
    args: {
        label: 'Toggle on/off',
        disabled: false
    },
    argTypes: {
        label: { control: { type: 'text' } },
        disabled: { control: { type: 'boolean' } }
    }
};
export const SwitchDemo = (args) => {
    const [on, setOn] = useState(false);
    return (<Switch id='switch' on={on} onChange={() => setOn(curr => !curr)} label={args.label} disabled={args.disabled}/>);
};
export const SwitchInCard = (args) => {
    const [on, setOn] = useState(false);
    return (<Card as={StyledCard}>
      <Switch id='switch' on={on} onChange={() => setOn(curr => !curr)} label={args.label} disabled={args.disabled}/>
    </Card>);
};
export const ConfigurableSwitch = (args) => {
    const [on, setOn] = useState(false);
    return (<ThemeOverride theme={{
            components: {
                switch: {
                    height: args.height,
                    width: args.width,
                    on: {
                        color: args.onColor
                    },
                    off: {
                        color: args.offColor
                    }
                }
            }
        }}>
      <Switch on={on} onChange={() => setOn(curr => !curr)} label='Toggle on/off'/>
    </ThemeOverride>);
};
ConfigurableSwitch.args = {
    height: '1.5rem',
    width: '3rem',
    onColor: '#076bc9',
    offColor: '#939393'
};
ConfigurableSwitch.argTypes = {
    height: { control: { type: 'text' } },
    width: { control: { type: 'text' } },
    onColor: { control: { type: 'color' } },
    offColor: { control: { type: 'color' } },
    label: { table: { disable: true } },
    disabled: { table: { disable: true } }
};
//# sourceMappingURL=Switch.stories.jsx.map