import React from 'react'
import type { Meta, StoryObj } from '@storybook/react-webpack5'
import { GridCellDropdownMenu } from './cell-dropdown-menu'
import { DotFilled } from '@planview/pv-icons'
import { GridStoriesProvider } from '../utils/grid-stories-provider'
import { ListItem } from '@planview/pv-uikit'
import { theme } from '@planview/pv-utilities'
import { CellBoundsPreview } from '../../docs/helpers'

export default {
    title: 'pv-grid/Components/Cells/GridCellDropdownMenu',
    component: GridCellDropdownMenu,
    parameters: {
        badges: ['intl'],
    },
    argTypes: {
        children: {
            control: false,
        },
    },
    decorators: [
        (Story) => (
            <GridStoriesProvider>
                <CellBoundsPreview>
                    <Story />
                </CellBoundsPreview>
            </GridStoriesProvider>
        ),
    ],
} satisfies Meta<typeof GridCellDropdownMenu>

type Story = StoryObj<typeof GridCellDropdownMenu>

export const Default: Story = {
    args: {
        trigger: {
            label: 'Review Actions',
            withCaret: true,
        },
        children: (
            <>
                <ListItem
                    icon={<DotFilled color={theme.iconError} />}
                    label="Reject review"
                />
                <ListItem
                    icon={<DotFilled color={theme.iconSuccess} />}
                    label="Approve review"
                />
            </>
        ),
    },
}