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

import {
    BoardHealth,
    Filter,
    Legend,
    PlusCircle,
    History,
    HierarchyParent,
    DotsVertical,
    FileCode,
    Board,
    Card,
    CollapseRows,
    Swimlanes,
    ListBullet,
    Graph,
    DotsHorizontal,
    Help,
    ResizeFull,
} from '@planview/pv-icons'
import { ListGroup, ListItem, ListItemDivider } from '@planview/pv-uikit'

export default {
    title: 'pv-toolbar/Toolbar',
    tags: ['autodocs'],
    component: Toolbar,
    parameters: {
        controls: { disabled: true, hideNoControlsWarning: true },
    },
} satisfies Meta<typeof Toolbar>

export const Default: StoryFn<typeof Toolbar> = () => (
    <Toolbar label="Example toolbar">
        <ToolbarSectionLeft>
            <ToolbarButtonEmpty icon={<Filter />} tooltip="Filter" />
        </ToolbarSectionLeft>
    </Toolbar>
)

export const ExampleLeanKit: StoryFn<any> = () => (
    <Toolbar label="AgilePlace kanban board">
        <ToolbarSectionLeft>
            <ToolbarButtonEmpty icon={<PlusCircle />}>
                New Card
            </ToolbarButtonEmpty>
        </ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More menu">
            <ToolbarButtonGroup groupLabel="Group">
                <ToolbarButtonEmpty
                    icon={<Filter />}
                    tooltip="Filter cards on this board"
                />
                <ToolbarButtonEmpty
                    icon={<BoardHealth />}
                    tooltip="View statistics on this board"
                />
                <ToolbarButtonEmpty
                    icon={<Legend />}
                    tooltip="View the boards legend"
                />
                <ToolbarButtonEmpty
                    icon={<History />}
                    tooltip="View the activity stream"
                />
            </ToolbarButtonGroup>
            <ToolbarButtonEmpty
                icon={<HierarchyParent />}
                tooltip="View connections"
            />
            <ToolbarMoreMenu icon={<DotsVertical />}>
                <ListGroup label="Download snapshot">
                    <ListItem icon={<Board />} label="Board" />
                    <ListItem icon={<Card />} label="Cards" />
                </ListGroup>
                <ListItemDivider />
                <ListItem label="Export board history" icon={<History />} />
                <ListItemDivider />
                <ListItem label="Toggle API mode" icon={<FileCode />} />
            </ToolbarMoreMenu>
        </ToolbarSectionRight>
    </Toolbar>
)

ExampleLeanKit.storyName = 'AgilePlace toolbar'

export const ExampleProjectplace: StoryFn<any> = () => (
    <Toolbar label="ProjectPlace boards">
        <ToolbarSectionLeft>
            <ToolbarButtonEmpty tooltip="Toggle filter" icon={<Filter />} />
            <ToolbarSeparator />
            <ToolbarDropdownMenu
                label="Boards"
                trigger={(props) => (
                    <ToolbarButtonEmpty
                        activated={props['aria-expanded']}
                        {...props}
                        withCaret
                    >
                        Board name
                    </ToolbarButtonEmpty>
                )}
            >
                <ListItem label="Board 1" />
                <ListItem label="Board 2" />
                <ListItem label="Board 3" />
                <ListItem label="Board 4" />
            </ToolbarDropdownMenu>
        </ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More menu">
            <ToolbarButtonEmpty
                tooltip="Collapse all swimlanes"
                icon={<CollapseRows />}
            />
            <ToolbarDropdownMenu
                icon={<Swimlanes />}
                label="Group by"
                disabled
                trigger={(props) => (
                    <ToolbarButtonEmpty
                        tooltip="Group by: Activity"
                        withCaret
                        icon={<Swimlanes />}
                        activated={props['aria-expanded']}
                        {...props}
                    >
                        Activity
                    </ToolbarButtonEmpty>
                )}
            >
                <ListItem label="None" />
                <ListItem label="Activity" />
                <ListItem label="Assignee" />
                <ListItem label="Label" />
                <ListItem label="Due date" />
            </ToolbarDropdownMenu>
            <ToolbarButtonGroup groupLabel="Toggle view">
                <ToolbarButtonEmpty icon={<Board />} tooltip="Board view" />
                <ToolbarButtonEmpty icon={<ListBullet />} tooltip="List view" />
                <ToolbarButtonEmpty icon={<Graph />} tooltip="Chart view" />
            </ToolbarButtonGroup>
            <ToolbarSeparator />
            <ToolbarDropdownMenu
                icon={<DotsHorizontal />}
                label="More options"
                trigger={(props) => (
                    <ToolbarButtonEmpty
                        withCaret
                        icon={<DotsHorizontal />}
                        activated={props['aria-expanded']}
                        {...props}
                    />
                )}
            >
                <ListItem label="Settings" />
                <ListItem label="Copy board" />
                <ListItem label="Share board" />
                <ListItem label="Print board" />
                <ListItem label="Import cards" />
                <ListItem label="Download board" />
                <ListItem label="Hide board" />
            </ToolbarDropdownMenu>
            <ToolbarButtonEmpty
                tooltip="Help"
                displayOn="desktop"
                icon={<Help />}
            />
            <ToolbarButtonEmpty
                tooltip="Resize"
                displayOn="desktop"
                icon={<ResizeFull />}
            />
        </ToolbarSectionRight>
    </Toolbar>
)

ExampleProjectplace.storyName = 'ProjectPlace boards toolbar'