import { useState } from 'react';
import { PromotedFilters } from '@pega/cosmos-react-condition-builder';
import { Flex, Text } from '@pega/cosmos-react-core';
import { demoFields } from '../ConditionBuilder/props.mock';
import { demoCondition, demoFilters } from './PromotedFilters.mocks';
import { StyledCodeBlock } from './PromotedFilters.styles';
export default {
    title: 'Condition Builder/PromotedFilters',
    component: PromotedFilters
};
export const PromotedFiltersDemo = (args) => {
    const [condition, setCondition] = useState(demoCondition);
    return (<Flex container={{ direction: 'column' }}>
      <PromotedFilters filters={demoFilters} condition={condition} onChange={setCondition} orientation={args.orientation} fields={demoFields}/>
      <div>
        <Text variant='h4'>Output:</Text>
        <StyledCodeBlock>
          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}
        </StyledCodeBlock>
      </div>
    </Flex>);
};
PromotedFiltersDemo.args = {
    orientation: 'horizontal'
};
PromotedFiltersDemo.argTypes = {
    orientation: {
        options: ['horizontal', 'vertical'],
        control: { type: 'select' }
    }
};
//# sourceMappingURL=PromotedFilters.stories.jsx.map