import * as React from 'react'
import type { StoryFn, Meta, StoryObj } from '@storybook/react-webpack5'
import {
    Toolbar,
    ToolbarButtonEmpty,
    ToolbarButtonEmptyInverse,
    ToolbarButtonDestructive,
    ToolbarButtonAnviPrimary,
    ToolbarButtonAnviEmpty,
    ToolbarButtonAnviEmptyInverse,
    ToolbarButtonAnviGhost,
    ToolbarSectionLeft,
    NavigationBar,
    LogoProjectPlace,
} from '../'
import { AiAnvi, Filter } from '@planview/pv-icons'
import { BUTTONS_MD } from '../../docs/buttons'

export default {
    title: 'pv-toolbar/Components/Toolbar buttons',
    tags: ['autodocs'],
    component: ToolbarButtonEmpty,
    parameters: {
        docs: {
            description: {
                component: BUTTONS_MD,
            },
        },
    },
} satisfies Meta<typeof ToolbarButtonEmpty>
const Template: StoryFn<typeof ToolbarButtonEmpty> = (args) => (
    <>
        <NavigationBar logo={<LogoProjectPlace />}>
            <ToolbarSectionLeft>
                <ToolbarButtonEmptyInverse {...args}>
                    {args.children}
                </ToolbarButtonEmptyInverse>
            </ToolbarSectionLeft>
        </NavigationBar>
        <Toolbar label="demo">
            <ToolbarSectionLeft>
                <ToolbarButtonEmpty {...args}>
                    {args.children}
                </ToolbarButtonEmpty>
                <ToolbarButtonDestructive {...args}>
                    {args.children}
                </ToolbarButtonDestructive>
            </ToolbarSectionLeft>
        </Toolbar>
    </>
)

export const Default = Template.bind({})

Default.args = {
    onClick: () => console.log('hit button filter'),
    icon: <Filter />,
    children: 'Hello world',
}

export const OnlyText = Template.bind({})

OnlyText.args = {
    onClick: () => console.log('hit button filter'),
    children: 'Hello world',
}

export const OnlyIcon = Template.bind({})

OnlyIcon.args = {
    onClick: () => console.log('hit button filter'),
    icon: <Filter />,
    tooltip: 'Filter',
}

export const PreventCollapse = Template.bind({})

PreventCollapse.args = {
    onClick: () => console.log('hit button filter'),
    icon: <Filter />,
    preventLabelCollapse: true,
    tooltip: 'Filter',
    children: 'Label will always be present',
    'aria-label': 'Filter',
}

export const AnviToolbarButtons: StoryObj<typeof ToolbarButtonEmpty> = {
    render: (args) => (
        <>
            <NavigationBar logo={<LogoProjectPlace />}>
                <ToolbarSectionLeft>
                    <ToolbarButtonAnviPrimary {...args}>
                        {args.children}
                    </ToolbarButtonAnviPrimary>
                    <ToolbarButtonAnviEmpty {...args}>
                        {args.children}
                    </ToolbarButtonAnviEmpty>
                    <ToolbarButtonAnviEmptyInverse {...args}>
                        {args.children}
                    </ToolbarButtonAnviEmptyInverse>
                    <ToolbarButtonAnviGhost {...args}>
                        {args.children}
                    </ToolbarButtonAnviGhost>
                </ToolbarSectionLeft>
            </NavigationBar>
            <Toolbar label="demo">
                <ToolbarSectionLeft>
                    <ToolbarButtonAnviPrimary {...args}>
                        {args.children}
                    </ToolbarButtonAnviPrimary>
                    <ToolbarButtonAnviEmpty {...args}>
                        {args.children}
                    </ToolbarButtonAnviEmpty>
                    <ToolbarButtonAnviEmptyInverse {...args}>
                        {args.children}
                    </ToolbarButtonAnviEmptyInverse>
                    <ToolbarButtonAnviGhost {...args}>
                        {args.children}
                    </ToolbarButtonAnviGhost>
                </ToolbarSectionLeft>
            </Toolbar>
        </>
    ),
}

AnviToolbarButtons.args = {
    onClick: () => console.log('hit button filter'),
    icon: <AiAnvi />,
    children: 'Hello world',
}