import * as React from 'react'
import type { StoryObj, Meta } from '@storybook/react-webpack5'
import { GridEditorInputNumeric } from '.'
import { Grid } from '../grids'
import { GridCellDefault } from '../components'
import { Arrange } from '@planview/pv-icons'
import { theme } from '@planview/pv-utilities'
import type { GridConfirmPayload } from '../types'
import type { InputType } from '@storybook/csf'

const hideControl: InputType = { control: false }

export default {
    title: 'pv-grid/Components/Editors/GridEditorInputNumeric',
    component: GridEditorInputNumeric,
    parameters: {
        controls: {
            exclude: ['label', 'mode', 'rowId', 'columnId'],
        },
    },
    argTypes: {
        columnId: hideControl,
        rowId: hideControl,
        tabIndex: hideControl,
        value: hideControl,
    },
} satisfies Meta<typeof GridEditorInputNumeric>

type NumberRow = {
    id: string
    input: number
}

export const Default: StoryObj<typeof GridEditorInputNumeric> = {
    render: function Component(args) {
        const [rows, setRows] = React.useState<NumberRow[]>([
            { id: '1', input: 2300 },
            { id: '2', input: 5600 },
            { id: '3', input: 34566 },
        ])

        return (
            <Grid
                selectionMode="none"
                columns={[
                    {
                        id: 'input',
                        label: 'Input numeric Editor',
                        sortable: false,
                        header: {
                            align: 'right',
                        },
                        width: 300,
                        cell: {
                            editable: true,
                            Renderer(props) {
                                if (args.icon) {
                                    return (
                                        <GridCellDefault
                                            {...props}
                                            icon={args.icon || undefined}
                                        />
                                    )
                                } else {
                                    return (
                                        <GridCellDefault numeric {...props} />
                                    )
                                }
                            },
                            Editor(props) {
                                return (
                                    <GridEditorInputNumeric
                                        {...args}
                                        {...props}
                                    />
                                )
                            },
                        },
                    },
                ]}
                rows={rows}
                onCellChange={(
                    confirm: GridConfirmPayload<
                        NumberRow,
                        'input',
                        string,
                        number
                    >
                ) => {
                    setRows((r) =>
                        r.map((row) => {
                            if (row.id === confirm.rowId) {
                                return {
                                    ...row,
                                    input: Number(confirm.nextValue),
                                }
                            }
                            return row
                        })
                    )
                }}
            />
        )
    },
    args: {
        placeholder: 'This is a placeholder',
        icon: 'no icon' as any,
    },
    argTypes: {
        icon: {
            control: { type: 'radio' },
            options: ['no icon', 'with icon', 'with coloured icon'],
            mapping: {
                'no icon': null,
                'with icon': <Arrange color={theme.iconNormal} />,
                'with coloured icon': <Arrange color={theme.iconWarning} />,
            },
        },
    },
    parameters: {
        docs: {
            source: {
                code: `
const [rows, setRows] = React.useState<NumberRow[]>([
    { id: '1', input: 2300 },
    { id: '2', input: 5600 },
    { id: '3', input: 34566 },
])

return (
    <Grid
        selectionMode="none"
        columns={[
            {
                id: 'input',
                label: 'Input numeric Editor',
                sortable: false,
                header: {
                    align: 'right',
                },
                width: 300,
                cell: {
                    editable: true,
                    Renderer(props) {
                        if (args.icon) {
                            return (
                                <GridCellDefault
                                    {...props}
                                    icon={args.icon || undefined}
                                />
                            )
                        } else {
                            return <GridCellDefault numeric {...props} />
                        }
                    },
                    Editor(props) {
                        return (
                            <GridEditorInputNumeric
                                {...args}
                                {...props}
                            />
                        )
                    },
                },
            },
        ]}
        rows={rows}
        onCellChange={(
            confirm: GridConfirmPayload<
                NumberRow,
                'input',
                string,
                number
            >
        ) => {
            setRows((r) =>
                r.map((row) => {
                    if (row.id === confirm.rowId) {
                        return {
                            ...row,
                            input: Number(confirm.nextValue),
                        }
                    }
                    return row
                })
            )
        }}
    />
)
                `,
            },
        },
    },
}