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

import { Board, BulletList, Graph } from '@planview/pv-icons'
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/ToolbarButtonGroup',
    tags: ['autodocs'],
    component: ToolbarButtonGroup,
    argTypes: {
        onHit: { action: 'hit button', table: { disable: true } },
        children: {
            control: false,
        },
        displayOn: {
            control: { type: 'radio' },
            defaultValue: DISPLAY_ON_TABLET_PORTRAIT,
            options: [
                DISPLAY_ON_PHONE,
                DISPLAY_ON_TABLET_PORTRAIT,
                DISPLAY_ON_TABLET_LANDSCAPE,
                DISPLAY_ON_DESKTOP,
                DISPLAY_ON_DESKTOP_HD,
            ],
        },
        groupLabel: {
            defaultValue: 'Group label',
        },
    },
} satisfies Meta<ToolbarButtonGroupProps & { onHit: (msg: string) => void }>

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

    return (
        <Toolbar label="Example">
            <ToolbarSectionLeft></ToolbarSectionLeft>
            <ToolbarSectionRight moreMenuLabel="More menu">
                <ToolbarButtonGroup
                    displayOn={displayOn}
                    groupLabel={groupLabel}
                >
                    <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>
            </ToolbarSectionRight>
        </Toolbar>
    )
}
Default.storyName = 'ToolbarButtonGroup'

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

export const ConditionallyAddItems: StoryFn<StoryToolbarButtonGroup> = ({
    onHit,
    displayOn,
    groupLabel,
}) => {
    const [active, setActive] = React.useState(0)
    const [show1, setShow1] = React.useState(true)
    const [show2, setShow2] = React.useState(true)
    return (
        <Toolbar label="Example">
            <ToolbarSectionLeft>
                <ToolbarButtonEmpty onClick={() => setShow1(!show1)}>
                    Toggle first button
                </ToolbarButtonEmpty>
                <ToolbarButtonEmpty onClick={() => setShow2(!show2)}>
                    Toggle second button
                </ToolbarButtonEmpty>
            </ToolbarSectionLeft>
            <ToolbarSectionRight moreMenuLabel="More menu">
                <ToolbarButtonGroup
                    displayOn={displayOn}
                    groupLabel={groupLabel}
                >
                    {show1 ? (
                        <ToolbarButtonEmpty
                            icon={<Board />}
                            activated={!active}
                            onClick={() => {
                                setActive(0)
                                onHit('Board view')
                            }}
                        >
                            Board view
                        </ToolbarButtonEmpty>
                    ) : null}
                    {show2 ? (
                        <ToolbarButtonEmpty
                            icon={<BulletList />}
                            activated={active === 1}
                            onClick={() => {
                                setActive(1)
                                onHit('List view')
                            }}
                        >
                            List view
                        </ToolbarButtonEmpty>
                    ) : null}
                    <ToolbarButtonEmpty
                        icon={<Graph />}
                        activated={active === 2}
                        onClick={() => {
                            setActive(2)
                            onHit('Chart view')
                        }}
                    >
                        Chart view
                    </ToolbarButtonEmpty>
                </ToolbarButtonGroup>
            </ToolbarSectionRight>
        </Toolbar>
    )
}

ConditionallyAddItems.parameters = {
    docs: {
        source: {
            code: `
const [active, setActive] = React.useState(0)
const [show1, setShow1] = React.useState(true)
const [show2, setShow2] = React.useState(true)
return (
    <Toolbar label="Example">
        <ToolbarSectionLeft>
            <ToolbarButtonEmpty onClick={() => setShow1(!show1)}>
                Toggle first button
            </ToolbarButtonEmpty>
            <ToolbarButtonEmpty onClick={() => setShow2(!show2)}>
                Toggle second button
            </ToolbarButtonEmpty>
        </ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More menu">
            <ToolbarButtonGroup
                displayOn={displayOn}
                groupLabel={groupLabel}
            >
                {show1 ? (
                    <ToolbarButtonEmpty
                        icon={<Board />}
                        activated={!active}
                        onClick={() => {
                            setActive(0)
                            onHit('Board view')
                        }}
                    >
                        Board view
                    </ToolbarButtonEmpty>
                ) : null}
                {show2 ? (
                    <ToolbarButtonEmpty
                        icon={<BulletList />}
                        activated={active === 1}
                        onClick={() => {
                            setActive(1)
                            onHit('List view')
                        }}
                    >
                        List view
                    </ToolbarButtonEmpty>
                ) : null}
                <ToolbarButtonEmpty
                    icon={<Graph />}
                    activated={active === 2}
                    onClick={() => {
                        setActive(2)
                        onHit('Chart view')
                    }}
                >
                    Chart view
                </ToolbarButtonEmpty>
            </ToolbarButtonGroup>
        </ToolbarSectionRight>
    </Toolbar>`,
        },
    },
}