import { useMemo, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Flex, Link, ListToolbar, MenuButton, listToolbarHelpers as helpers, Text, UnorderedList } from '@pega/cosmos-react-core';
import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
export default {
    title: 'Core/ListToolbar',
    component: ListToolbar,
    args: {
        required: false,
        info: undefined,
        status: undefined
    },
    argTypes: {
        required: { control: { type: 'boolean' } },
        info: { control: { type: 'text' } },
        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
    }
};
export const ListToolbarDemo = (args) => {
    const [stagedQueryOptionState, setStagedQueryOptionState] = useState(null);
    const [views, setViews] = useState(mockViews);
    const [currentSort, setCurrentSort] = useState(null);
    const [searchValue, setSearchValue] = useState('');
    const filterProp = useMemo(() => {
        return {
            value: stagedQueryOptionState,
            count: undefined,
            renderer: FilterRenderer,
            onCancel: () => {
                setStagedQueryOptionState(null);
            },
            onSubmit: () => {
                setStagedQueryOptionState(cur => {
                    console.table(cur);
                    return null;
                });
            }
        };
    }, [stagedQueryOptionState]);
    const sortProp = useMemo(() => {
        return {
            mode: 'single-select',
            count: currentSort ? 1 : undefined,
            items: [
                {
                    id: 'asc',
                    text: 'Ascending',
                    icon: 'arrow-up',
                    selected: currentSort === 'asc'
                },
                {
                    id: 'desc',
                    text: 'Descending',
                    icon: 'arrow-down',
                    selected: currentSort === 'desc'
                }
            ],
            onItemClick: id => {
                setCurrentSort(cur => {
                    return cur === id ? null : id;
                });
            }
        };
    }, [currentSort]);
    const groupProp = useMemo(() => {
        return {
            count: undefined,
            renderer: GroupRenderer,
            onCancel: () => { },
            onSubmit: () => { }
        };
    }, []);
    const listItems = [
        <p>
      <b>Arrow keys</b> - Navigate cells
    </p>,
        <p>
      <b>Enter</b> - When on a cell with interactive items, switches to Tab navigation mode. Tab key
      now navigates between interactive controls in the grid instead of arrows.
    </p>,
        <p>
      <b>Escape</b> - Restores arrow-based Grid navigation.
    </p>
    ];
    const keyboardInstructionsContent = (<Flex container={{ gap: 2, direction: 'column' }}>
      <Text>Tab or click into the grid to use key commands. </Text>
      <UnorderedList items={listItems}/>
    </Flex>);
    return (<StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>
      <ListToolbar name='Contacts' viewSelector={{
            views,
            onViewSelect: id => {
                setViews(cur => {
                    return helpers.selectView(cur, id);
                });
            },
            defaultId: '1',
            appDefaultId: '2'
        }} createNew={{
            onClick: action('Clicked Create New'),
            label: args.createNewLabel
        }} keyboardInstructions={args.showKeyboardInstructions ? keyboardInstructionsContent : undefined} search={{
            onSearchSubmit: action('Search submit'),
            value: searchValue,
            onSearchChange: setSearchValue
        }} count={{
            total: 1146,
            selected: args.numberOfSelected
        }} filter={filterProp} sort={sortProp} group={groupProp} actions={actions} additionalActions={args.bulkButton && <MenuButton text={args.bulkButtonLabel}/>} formControlProps={{
            required: args.required,
            info: args.info,
            status: args.status,
            additionalInfo: args.showAdditionalInfo
                ? {
                    content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
                      semper feugiat nibh sed pulvinar proin gravida.
                    </p>
                    <p>
                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim
                      nulla aliquet porttitor lacus.
                    </p>
                    <Link href='/' target='_blank'>
                      Neque vitae
                    </Link>
                  </Flex>)
                }
                : undefined
        }}/>
    </StagedStateDispatchContext.Provider>);
};
ListToolbarDemo.args = {
    createNewLabel: undefined,
    showAdditionalInfo: false,
    showKeyboardInstructions: true,
    numberOfSelected: 4,
    bulkButton: true,
    bulkButtonLabel: 'Edit'
};
ListToolbarDemo.argTypes = {
    createNewLabel: { control: { type: 'text' } },
    showAdditionalInfo: { control: { type: 'boolean' } },
    showKeyboardInstructions: { control: { type: 'boolean' } },
    numberOfSelected: { control: { type: 'number' } },
    bulkButton: { control: { type: 'boolean' } },
    bulkButtonLabel: { control: { type: 'text' } }
};
export const SimpleToolbarDemo = (args) => {
    return (<ListToolbar name='Top accounts in California' search={{ onSearchSubmit: action('Search submit') }} count={{ total: 212, totalHasMore: true }} actions={actions} formControlProps={{ required: args.required, info: args.info, status: args.status }}/>);
};
SimpleToolbarDemo.args = {
    required: true,
    info: 'Info message',
    status: 'error'
};
//# sourceMappingURL=ListToolbar.stories.jsx.map