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

import { Filter, Help, Recent } from '@planview/pv-icons'

export default {
    title: 'pv-toolbar/Components/ToolbarDatePicker',
    tags: ['autodocs'],
    component: ToolbarDatePicker,
    argTypes: {
        icon: {
            control: false,
        },
        onChange: {
            control: false,
        },
        onClose: {
            control: false,
        },
    },
    args: {
        icon: <Recent />,
        defaultValue: '2022-06-25',
        placeholder: 'Set date',
    },
} satisfies Meta<typeof ToolbarDatePicker>

export const Default: StoryFn<typeof ToolbarDatePicker> = (args) => (
    <Toolbar label="demo">
        <ToolbarSectionLeft>
            <ToolbarButtonEmpty icon={<Filter />} tooltip="Open filter panel" />
            <ToolbarDatePicker {...args} />
        </ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More">
            <ToolbarDatePicker {...args} />
            <ToolbarButtonEmpty icon={<Help />} tooltip="Go to help" />
        </ToolbarSectionRight>
    </Toolbar>
)
Default.storyName = 'ToolbarDatePicker'