import { useCallback, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Button, Flex } from '@pega/cosmos-react-core';
import { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';
import { StyledDemoDragDropList } from './DragDropList.styles';
import { createMockDataArray, DemoListItem, EmptyItem, itemType, mockDataArrayA, mockDataArrayB, sort } from './DragDropList.mocks';
export default {
    title: 'DnD/DragDropList',
    component: DragDropList,
    parameters: {
        layout: 'fullscreen'
    }
};
export const DragDropListDemo = (args) => {
    const [arrayA, setArrayA] = useState(mockDataArrayA);
    const [arrayB, setArrayB] = useState(mockDataArrayB);
    return (<>
      <Button onClick={useCallback(() => {
            setArrayA(items => {
                return [...items, ...createMockDataArray(1, itemType, 'A-new')];
            });
        }, [])}>
        Add to List A
      </Button>
      <Button onClick={useCallback(() => {
            setArrayB(items => {
                return [...items, ...createMockDataArray(1, itemType, 'B-new')];
            });
        }, [])}>
        Add to List B
      </Button>
      <DragDropManager>
        <Flex container style={{ minHeight: '100vh' }}>
          <DragDropList as={StyledDemoDragDropList} id='list1' accept={itemType} pullMode={args.pullMode} pushMode={args.pushMode === 'sort' ? sort : args.pushMode} items={arrayA} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
            setArrayA(newArray);
            action('List A changed')(newArray);
        }} style={{ background: 'palegreen' }}/>

          <DragDropList as={StyledDemoDragDropList} id='list2' accept={itemType} pullMode={args.pullMode} pushMode={args.pushMode === 'sort' ? sort : args.pushMode} items={arrayB} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
            setArrayB(newArray);
            action('List B changed')(newArray);
        }} style={{ background: 'lightblue' }}/>
        </Flex>
      </DragDropManager>
    </>);
};
DragDropListDemo.args = {
    pullMode: 'remove',
    pushMode: 'insert'
};
DragDropListDemo.argTypes = {
    pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },
    pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }
};
//# sourceMappingURL=DragDropList.stories.jsx.map