import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { GridCellButton } from '.'
import { PlusCircle } from '@planview/pv-icons'
import { Grid } from '..'
import { CellBoundsPreview } from '../../docs/helpers'

export default {
    title: 'pv-grid/Components/Cells/GridCellButton',
    tags: ['autodocs'],
    component: GridCellButton,
    args: {
        label: 'Cell content',
    },
    argTypes: {
        icon: {
            options: ['no icon', 'with custom icon'],
            mapping: {
                'no icon': null,
                'with custom icon': <PlusCircle />,
            },
            control: {
                type: 'radio',
            },
        },
    },
} satisfies Meta<typeof GridCellButton>

export const Default: StoryFn<typeof GridCellButton> = (props) => (
    <GridCellButton {...props} />
)

Default.decorators = [
    (Story) => <CellBoundsPreview>{Story()}</CellBoundsPreview>,
]

export const ExampleWithinGrid: StoryFn<typeof GridCellButton> = (props) => (
    <Grid
        selectionMode="none"
        columns={[
            {
                id: 'button',
                label: 'GridCellButton column',
                sortable: false,
                width: 300,
                cell: {
                    editable: false,
                    Renderer(gridProps) {
                        return <GridCellButton {...gridProps} {...props} />
                    },
                },
            },
        ]}
        rows={[{ id: '1' }, { id: '2' }]}
    />
)

ExampleWithinGrid.parameters = {
    docs: {
        source: {
            code: `
<Grid
    selectionMode="none"
    columns={[
        {
            id: 'button',
            label: 'GridCellButton column',
            sortable: false,
            width: 300,
            cell: {
                editable: false,
                Renderer(props) {
                    return <GridCellButton {...props} label="Cell content" />
                },
            },
        },
    ]}
    rows={[
        { id: '1' },
        { id: '2' },
    ]}
/>
            `,
        },
    },
}