import type { Meta } from '@storybook/react-webpack5'
import React from 'react'
import { ListGrid } from '.'
import { GridCellButton } from '../../components'
import type { Column } from '../../types'
import { Column as ColumnConfig } from './__columns'
import { Cancel } from '@planview/pv-icons'

const sizingCategory = {
    control: {},
    table: {
        category: 'Sizing',
    },
}

export default {
    title: 'pv-grid/Components/ListGrid/Columns',
    component: ColumnConfig,
    parameters: {
        badges: ['intl'],
    },
    argTypes: {
        width: { ...sizingCategory },
    },
} satisfies Meta<typeof ColumnConfig>

type Entry = {
    id: string
    name: string
}

export const Default = () => (
    <ListGrid
        columns={React.useMemo<Column<Entry>[]>(
            () => [
                {
                    id: 'name',
                    label: 'Name',
                },
                {
                    id: 'actions',
                    label: 'Actions',
                    width: 36,

                    cell: {
                        Renderer({ tabIndex }) {
                            return (
                                <GridCellButton
                                    tabIndex={tabIndex}
                                    icon={<Cancel />}
                                    tooltip="Remove user"
                                />
                            )
                        },
                    },
                },
            ],
            []
        )}
        rows={React.useMemo<Entry[]>(
            () => [
                { id: '123', name: 'First row' },
                { id: '234', name: 'Second row' },
                { id: '345', name: 'Third row' },
            ],
            []
        )}
    />
)