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

export default {
    title: 'pv-grid/Components/Cells/GridCellChips',
    tags: ['autodocs'],
    component: GridCellChips,
    args: {
        value: 'array of strings' as any,
    },
    argTypes: {
        value: {
            options: ['array of strings', 'array of objects'],
            mapping: {
                'array of strings': ['one', 'two', 'three'],
                'array of objects': [
                    { id: 1, label: 'one', icon: <History /> },
                    { id: 2, label: 'two', icon: <Refresh /> },
                    { id: 3, label: 'three', icon: <Save /> },
                ],
            },
            control: {
                type: 'radio',
            },
            table: {
                type: {
                    summary: 'string[] | GridCellChipsItem[]',
                },
            },
        },
    },
} satisfies Meta<typeof GridCellChips>

export const Default: StoryFn<typeof GridCellChips> = ({ tabIndex, value }) => (
    <GridCellChips tabIndex={tabIndex} value={value} />
)

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

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

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