import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import {
    Toolbar,
    ToolbarSectionLeft,
    ToolbarSectionRight,
    ToolbarDropdownMenu,
    ToolbarButtonEmpty,
    ToolbarButtonGhost,
} from '../'
import { Board, Help } from '@planview/pv-icons'
import { ListItem } from '@planview/pv-uikit'
import {
    DISPLAY_ON_PHONE,
    DISPLAY_ON_TABLET_PORTRAIT,
    DISPLAY_ON_TABLET_LANDSCAPE,
    DISPLAY_ON_DESKTOP,
    DISPLAY_ON_DESKTOP_HD,
} from '../utils'

export default {
    title: 'pv-toolbar/Components/ToolbarDropdownMenu',
    tags: ['autodocs'],
    component: ToolbarDropdownMenu,
    argTypes: {
        children: {
            control: false,
        },
        displayOn: {
            control: {
                type: 'radio',
                values: [
                    DISPLAY_ON_PHONE,
                    DISPLAY_ON_TABLET_PORTRAIT,
                    DISPLAY_ON_TABLET_LANDSCAPE,
                    DISPLAY_ON_DESKTOP,
                    DISPLAY_ON_DESKTOP_HD,
                ],
            },
            defaultValue: DISPLAY_ON_TABLET_PORTRAIT,
        },
        icon: {
            control: { type: 'radio' },
            options: ['without icon', 'with icon'],
            mapping: {
                'without icon': undefined,
                'with icon': <Board />,
            },
        },
    },
    args: {
        label: 'Label inside more menu',
    },
    parameters: {
        badges: ['intl'],
    },
} satisfies Meta<typeof ToolbarDropdownMenu>

export const Default: StoryFn<typeof ToolbarDropdownMenu> = (args) => (
    <Toolbar label="demo">
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More">
            <ToolbarDropdownMenu
                {...args}
                trigger={(props) => (
                    <ToolbarButtonEmpty
                        withCaret
                        activated={props['aria-expanded']}
                        {...props}
                    >
                        Open dropdown
                    </ToolbarButtonEmpty>
                )}
            >
                <ListItem label="item one" />
                <ListItem label="item two" />
            </ToolbarDropdownMenu>
        </ToolbarSectionRight>
    </Toolbar>
)
Default.storyName = 'ToolbarDropdownMenu'

export const TriggerAsConfiguration: StoryFn<typeof ToolbarDropdownMenu> = (
    args
) => (
    <Toolbar label="demo">
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More">
            <ToolbarDropdownMenu
                {...args}
                trigger={{
                    label: 'First',
                    withCaret: true,
                }}
            >
                <ListItem label="item one" />
                <ListItem label="item two" />
            </ToolbarDropdownMenu>
            <ToolbarDropdownMenu
                {...args}
                label={'second label'}
                trigger={{
                    elementType: ToolbarButtonGhost,
                    label: 'Second',
                    fluid: true,
                    withCaret: true,
                }}
            >
                <ListItem label="item one" />
                <ListItem label="item two" />
            </ToolbarDropdownMenu>
            <ToolbarButtonGhost tooltip="help" icon={<Help />} />
            <ToolbarButtonGhost>One more button</ToolbarButtonGhost>
        </ToolbarSectionRight>
    </Toolbar>
)

TriggerAsConfiguration.parameters = {
    docs: {
        source: {
            code: `
<Toolbar label="demo">
    <ToolbarSectionLeft></ToolbarSectionLeft>
    <ToolbarSectionRight moreMenuLabel="More">
        <ToolbarDropdownMenu
            {...args}
            trigger={{
                /**
                 * The trigger configuration takes any attribute from ToolbarButtonProps except these:
                 * 'aria-haspopup','aria-controls','aria-expanded','aria-disabled' and 'children'
                 *
                 * Extending ToolbarButtonProps, the configuration takes label: (string), fluid (boolean) and elementType
                 */
                label: 'First',
                withCaret: true,
            }}
        >
            <ListItem label="item one" />
            <ListItem label="item two" />
        </ToolbarDropdownMenu>
        <ToolbarDropdownMenu
            {...args}
            label={'second label'}
            trigger={{
                /**
                 * You can override the default button type (ToolbarButtonEmpty) by using the elementType attribute.
                 */
                elementType: ToolbarButtonGhost,
                label: 'Second',
                fluid: true,
                withCaret: true,
            }}
        >
            <ListItem label="item one" />
            <ListItem label="item two" />
        </ToolbarDropdownMenu>
        <ToolbarButtonGhost tooltip="help" icon={<Help />} />
        <ToolbarButtonGhost>One more button</ToolbarButtonGhost>
    </ToolbarSectionRight>
</Toolbar>
            `,
        },
    },
}