import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import {
    Toolbar,
    ToolbarButtonEmpty,
    ToolbarButtonPrimary,
    ToolbarSectionLeft,
    ToolbarSectionRight,
    ToolbarButtonGroup,
    ToolbarMoreMenu,
} from '..'

import {
    Board,
    BulletList,
    DotsVertical,
    Graph,
    Help,
    ResizeFull,
} from '@planview/pv-icons'
import {
    ListSectionExpandable,
    ListItemDivider,
    ListGroup,
    ListItem,
} from '@planview/pv-uikit'
import type { ToolbarMoreMenuProps } from './more'

export default {
    title: 'pv-toolbar/Components/ToolbarMoreMenu',
    tags: ['autodocs'],
    component: ToolbarMoreMenu,
    argTypes: {
        onHit: { action: 'hit button', table: { disable: true } },
        children: {
            control: false,
        },
        icon: {
            control: false,
        },
    },
} satisfies Meta<ToolbarMoreMenuProps & { onHit: (msg: string) => void }>

type StoryToolbarMoreMenu = React.ComponentProps<typeof ToolbarMoreMenu> & {
    onHit: (msg: string) => void
}

export const Default: StoryFn<StoryToolbarMoreMenu> = ({ onHit, collapse }) => {
    const [active, setActive] = React.useState(0)

    return (
        <Toolbar label="Example">
            <ToolbarSectionLeft></ToolbarSectionLeft>
            <ToolbarSectionRight moreMenuLabel="More menu">
                <ToolbarButtonGroup groupLabel="View Mode">
                    <ToolbarButtonEmpty
                        icon={<Board />}
                        activated={!active}
                        onClick={() => {
                            setActive(0)
                            onHit('Board view')
                        }}
                    >
                        Board view
                    </ToolbarButtonEmpty>
                    <ToolbarButtonEmpty
                        icon={<BulletList />}
                        activated={active === 1}
                        onClick={() => {
                            setActive(1)
                            onHit('List view')
                        }}
                    >
                        List view
                    </ToolbarButtonEmpty>
                    <ToolbarButtonEmpty
                        icon={<Graph />}
                        activated={active === 2}
                        onClick={() => {
                            setActive(2)
                            onHit('Chart view')
                        }}
                    >
                        Chart view
                    </ToolbarButtonEmpty>
                </ToolbarButtonGroup>
                <ToolbarButtonPrimary
                    onClick={() => onHit('help')}
                    tooltip="Help"
                    displayOn="desktop"
                    icon={<Help />}
                />
                <ToolbarButtonEmpty
                    onClick={() => onHit('resize')}
                    tooltip="Resize"
                    displayOn="desktop"
                    icon={<ResizeFull />}
                />
                <ToolbarMoreMenu collapse={collapse} icon={<DotsVertical />}>
                    <ListGroup label="Group">
                        <ListItem
                            onActivate={() => onHit('group item 1')}
                            label="group item 1"
                        />
                        <ListItem
                            onActivate={() => onHit('group item 2')}
                            label="group item 2"
                        />
                    </ListGroup>
                    <ListItemDivider />
                    <ListSectionExpandable label="Expandable section">
                        <ListItem
                            onActivate={() => onHit('accordion item 1')}
                            label="accordion item 1"
                        />
                        <ListItem
                            onActivate={() => onHit('accordion item 2')}
                            label="accordion item 2"
                        />
                    </ListSectionExpandable>
                </ToolbarMoreMenu>
            </ToolbarSectionRight>
        </Toolbar>
    )
}
Default.storyName = 'ToolbarMoreMenu'