import * as React from 'react'
import type { StoryObj, StoryFn, Meta } from '@storybook/react-webpack5'
import { GridEditorSwitch } from '.'
import { Grid } from '../grids'
import type { Column, GridConfirmPayload } from '../types'
import type { InputType } from '@storybook/csf'

const hideControl: InputType = { control: false }

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

type Team = {
    id: string
    title: string
    enabled: boolean
}

export const Default: StoryObj<typeof GridEditorSwitch> = {
    render: function Component() {
        const [rows, setRows] = React.useState<Team[]>([
            { id: '1', title: 'All users team', enabled: true },
            { id: '2', title: 'Developer team', enabled: false },
            { id: '3', title: 'Quality Assurance Team', enabled: true },
        ])

        return (
            <Grid
                selectionMode="none"
                columns={[
                    {
                        id: 'title',
                        label: 'Team',
                        width: 300,
                        cell: {
                            editable: true,
                        },
                    },
                    {
                        id: 'enabled',
                        label: 'Enabled',
                        width: 70,
                        cell: {
                            editable: true,
                            hybridEditor: true,
                            Editor: GridEditorSwitch,
                        },
                    },
                ]}
                rows={rows}
                onCellChange={(
                    confirm: GridConfirmPayload<Team, keyof Team>
                ) => {
                    setRows((r) =>
                        r.map((row) => {
                            if (row.id === confirm.rowId) {
                                return {
                                    ...row,
                                    [confirm.columnId]: confirm.nextValue,
                                }
                            }
                            return row
                        })
                    )
                }}
            />
        )
    },
    parameters: {
        docs: {
            source: {
                code: `
const [rows, setRows] = React.useState<Team[]>([
    { id: '1', title: 'All users team', enabled: true },
    { id: '2', title: 'Developer team', enabled: false },
    { id: '3', title: 'Quality Assurance Team', enabled: true },
])

return (
    <Grid
        selectionMode="none"
        columns={[
            {
                id: 'title',
                label: 'Team',
                width: 300,
                cell: {
                    editable: true,
                },
            },
            {
                id: 'enabled',
                label: 'Enabled',
                width: 70,
                cell: {
                    editable: true,
                    hybridEditor: true,
                    Editor: GridEditorSwitch,
                },
            },
        ]}
        rows={rows}
        onCellChange={(
            confirm: GridConfirmPayload<Team, keyof Team>
        ) => {
            setRows((r) =>
                r.map((row) => {
                    if (row.id === confirm.rowId) {
                        return {
                            ...row,
                            [confirm.columnId]: confirm.nextValue,
                        }
                    }
                    return row
                })
            )
        }}
    />
)
                `,
            },
        },
    },
}

export const Disabled: StoryFn = () => {
    const [rows, setRows] = React.useState<Team[]>([
        { id: '1', title: 'All users team', enabled: true },
        { id: '2', title: 'Developer team', enabled: false },
        { id: '3', title: 'Quality Assurance Team', enabled: true },
    ])

    const columns: Column<Team>[] = React.useMemo(
        () => [
            {
                id: 'title',
                label: 'Team',
                width: 300,
                cell: {
                    editable: true,
                },
            },
            {
                id: 'enabled',
                label: 'Enabled',
                width: 70,
                cell: {
                    editable: ({ row }) => row.id !== '2',
                    hybridEditor: 'always',
                    Editor: GridEditorSwitch,
                },
            },
        ],
        []
    )

    return (
        <Grid
            selectionMode="none"
            columns={columns}
            rows={rows}
            onCellChange={(confirm: GridConfirmPayload<Team, keyof Team>) => {
                setRows((r) =>
                    r.map((row) => {
                        if (row.id === confirm.rowId) {
                            return {
                                ...row,
                                [confirm.columnId]: confirm.nextValue,
                            }
                        }
                        return row
                    })
                )
            }}
        />
    )
}