import * as React from 'react'
import type { StoryObj, Meta } from '@storybook/react-webpack5'
import { GridEditorComboboxTree } from '.'
import { Grid } from '../../grids'
import { GridCellDefault } from '../../components'
import { PlusCircle } from '@planview/pv-icons'
import type { GridConfirmPayload } from '../../types'
import type { InputType } from '@storybook/csf'
import type { ComboboxTreeOption } from '@planview/pv-uikit'

const hideControl: InputType = { control: false }

export default {
    title: 'pv-grid/Components/Editors/GridEditorComboboxTree',
    component: GridEditorComboboxTree,
    parameters: {
        controls: {
            exclude: ['label', 'mode', 'rowId', 'columnId'],
        },
    },
    argTypes: {
        columnId: hideControl,
        rowId: hideControl,
        tabIndex: hideControl,
        value: hideControl,
        icon: {
            options: ['no icon', 'with custom icon'],
            mapping: {
                'no icon': undefined,
                'with custom icon': <PlusCircle />,
            },
            control: {
                type: 'radio',
            },
        },
    },
} satisfies Meta<typeof GridEditorComboboxTree>

const LANES: ComboboxTreeOption[] = [
    { label: 'Inbox', value: '1' },
    {
        label: 'Backlog',
        value: '2',
        children: [
            { label: 'Activities', value: '2-1' },
            { label: 'Design', value: '2-2' },
            { label: 'Development', value: '2-3' },
        ],
    },
    {
        label: 'Up next',
        value: '3',
        children: [
            { label: 'Activities', value: '3-1' },
            { label: 'Design', value: '3-2' },
            { label: 'Development', value: '3-3' },
        ],
    },
    {
        label: 'Working',
        value: '4',
        children: [
            {
                label: 'Design',
                value: '4-1',
                children: [
                    { label: 'Working', value: '4-1-1' },
                    {
                        label: 'Needs review with a really long label that will most likely ellipse',
                        value: '4-1-2',
                    },
                    { label: 'Reviewing', value: '4-1-3' },
                    { label: 'Finalizing', value: '4-1-4' },
                ],
            },
            {
                label: 'Development',
                value: '4-2',
                children: [
                    { label: 'Working', value: '4-2-1' },
                    { label: 'Needs review', value: '4-2-2' },
                    { label: 'Reviewing', value: '4-2-3' },
                    { label: 'Finalizing', value: '4-2-4' },
                ],
            },
        ],
    },
    {
        label: 'Finished',
        value: '5',
        children: [
            { label: 'Activities', value: '5-1' },
            { label: 'Finished as planned', value: '5-2' },
            { label: 'Discarded requests / ideas', value: '5-3' },
            { label: 'Discussed / No immediate action', value: '5-4' },
        ],
    },
] as const

type LaneRow = {
    id: string
    lane: ComboboxTreeOption | null
}

export const Default: StoryObj<typeof GridEditorComboboxTree> = {
    render: function Component(args) {
        const [rows, setRows] = React.useState<LaneRow[]>([
            { id: '1', lane: LANES[0] },
            { id: '2', lane: LANES[1].children?.[0] || null },
            { id: '3', lane: LANES[0] },
        ])

        return (
            <Grid
                selectionMode="none"
                columns={[
                    {
                        id: 'lane',
                        label: 'Combobox Editor Tree',
                        sortable: false,
                        width: 300,
                        cell: {
                            editable: true,
                            label(props) {
                                return props.value?.label || 'Select lane'
                            },
                            Renderer(props) {
                                return (
                                    <GridCellDefault
                                        {...props}
                                        icon={args.icon}
                                        label={props.label}
                                        withCaret
                                    />
                                )
                            },
                            Editor(props) {
                                return (
                                    <GridEditorComboboxTree
                                        {...args}
                                        {...props}
                                        options={LANES}
                                        clearable={false}
                                        value={props.value}
                                    />
                                )
                            },
                        },
                    },
                ]}
                rows={rows}
                onCellChange={(
                    confirm: GridConfirmPayload<
                        LaneRow,
                        'lane',
                        ComboboxTreeOption | null
                    >
                ) => {
                    setRows((r) =>
                        r.map((row) => {
                            console.log(confirm)
                            if (row.id === confirm.rowId) {
                                return {
                                    ...row,
                                    lane: confirm.nextValue || null,
                                }
                            }
                            return row
                        })
                    )
                }}
            />
        )
    },
}