import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as ComboboxMultiStories from './multi.stories.tsx'

<Meta of={ComboboxMultiStories} />

# GridEditorComboboxTreeMulti

```tsx
import { GridEditorComboboxTreeMulti } from '@planview/pv-grid'
```

The combobox tree multi-select cell editor uses the [ComboboxTree](?path=/docs/pv-uikit-comboboxtree--docs) component internally (With `multiSelectable` set to `true`). It lets users add or edit multiple values from a set of predefined options, by either typing a value directly or by selecting them from the list.

**Note:** When using the `GridEditorComboboxTreeMulti` it is [good practice](https://design.planview.com/components/grid/grid-editors#combobox-tree-multi-editor) to use the `GridCellChips` in the `Renderer` function.

<Canvas of={ComboboxMultiStories.Default} />

### Props provided by the Grid (via `Editor`)

Additional props are provided by the grid that are not used by this editor.

<Controls include={['onConfirm', 'onCancel', 'tabIndex']} />

### Props to customize behavior

<Controls exclude={['onConfirm', 'onCancel', 'tabIndex']} />

## Usage with Column definition

This component should be used as part of a custom `Editor` method on the Column configuration. To prevent combobox from being unmounted and remounted during editing, it is important your `Editor` function does not get redefined. This can be accomplished by memoizing the column definition (`useMemo`) or by keeping the `Editor` defined outside of the component as shown in this example.

```tsx
const options: ComboboxTreeOption[] = [
    {
        label: 'Team A',
        value: 'avatar-1',
        avatar: 'img/avatars/400-8.jpg',
        children: [
            {
                label: 'Alice',
                value: 'avatar-1-1',
                avatar: 'img/avatars/400-8.jpg',
            },
            {
                label: 'Bob',
                value: 'avatar-1-2',
                avatar: 'img/avatars/400-8.jpg',
            },
        ],
    },
    {
        label: 'Team B',
        value: 'avatar-2',
        avatar: 'img/avatars/400-9.jpg',
        children: [
            {
                label: 'Charlie',
                value: 'avatar-2-1',
                avatar: 'img/avatars/400-9.jpg',
            },
            {
                label: 'David',
                value: 'avatar-2-2',
                avatar: 'img/avatars/400-9.jpg',
            },
        ],
    },
]

type UserRow = {
    id: string
    user: ComboboxTreeOption[]
}

function UserComboboxEditor(
    props: CellEditorParams<UserRow>
): React.JSX.Element {
    return (
        <GridEditorComboboxTreeMulti
            {...props}
            value={props.value}
            options={options}
        />
    )
}

export const Default: StoryObj<typeof GridEditorComboboxTreeMulti<UserRow>> = {
    render: function Component(args) {
        const [rows, setRows] = React.useState<UserRow[]>([
            {
                id: '1',
                user: [
                    {
                        label: 'Bob',
                        value: 'avatar-1-2',
                        avatar: 'img/avatars/400-8.jpg',
                    },
                ],
            },
            { id: '2', user: [] },
            {
                id: '3',
                user: [
                    {
                        label: 'Charlie',
                        value: 'avatar-2-1',
                        avatar: 'img/avatars/400-9.jpg',
                    },
                    {
                        label: 'David',
                        value: 'avatar-2-2',
                        avatar: 'img/avatars/400-9.jpg',
                    },
                ],
            },
        ])

        return (
            <Grid
                selectionMode="none"
                columns={[
                    {
                        id: 'user',
                        label: 'Combobox Tree Multi Editor',
                        sortable: false,
                        width: 300,
                        cell: {
                            editable: true,
                            Renderer(props) {
                                return <GridCellChips {...props} />
                            },
                            Editor: UserComboboxEditor,
                        },
                    },
                ]}
                rows={rows}
                onCellChange={(
                    confirm: GridConfirmPayload<
                        UserRow,
                        'user',
                        ComboboxTreeOption[]
                    >
                ) => {
                    setRows((r) =>
                        r.map((row) => {
                            if (row.id === confirm.rowId) {
                                return {
                                    ...row,
                                    user: confirm.nextValue,
                                }
                            }
                            return row
                        })
                    )
                }}
            />
        )
    },
}
```