import React from 'react'
import figma from '@figma/code-connect'
import { GridEditorInput } from './input'
import { GridEditorInputNumeric } from './input-numeric'
import { GridEditorInputTime } from './input-time'
import { GridEditorDatePicker } from './datepicker'
import { GridEditorCombobox } from './combobox/single'
import { GridEditorComboboxMulti } from './combobox/multi'
import { GridEditorComboboxTree } from './combobox-tree/single'
import { GridEditorComboboxTreeMulti } from './combobox-tree/multi'
import { GridEditorSwitch } from './switch'
import { GridEditorRadio } from './radio'
import { Grid } from '../grids/grid'

const GRID_EDITOR = '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=5113:14425'

figma.connect(GridEditorInput, GRID_EDITOR, {
    variant: { 'Editor type': 'Input' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'name',
                    label: 'Name',
                    cell: { Editor: GridEditorInput, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorInputNumeric, GRID_EDITOR, {
    variant: { 'Editor type': 'Input numeric' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'count',
                    label: 'Count',
                    cell: { Editor: GridEditorInputNumeric, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorInputTime, GRID_EDITOR, {
    variant: { 'Editor type': 'Input time' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'time',
                    label: 'Time',
                    cell: { Editor: GridEditorInputTime, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorDatePicker, GRID_EDITOR, {
    variant: { 'Editor type': 'Date picker' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'date',
                    label: 'Date',
                    cell: { Editor: GridEditorDatePicker, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorCombobox, GRID_EDITOR, {
    variant: { 'Editor type': 'Combobox' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'category',
                    label: 'Category',
                    cell: { Editor: GridEditorCombobox, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorComboboxMulti, GRID_EDITOR, {
    variant: { 'Editor type': 'Combobox multi' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'tags',
                    label: 'Tags',
                    cell: { Editor: GridEditorComboboxMulti, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorComboboxTree, GRID_EDITOR, {
    variant: { 'Editor type': 'Combobox tree' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'category',
                    label: 'Category',
                    cell: { Editor: GridEditorComboboxTree, editable: true },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(GridEditorComboboxTreeMulti, GRID_EDITOR, {
    variant: { 'Editor type': 'Combobox tree multi' },
    example: () => (
        <Grid
            columns={[
                {
                    id: 'tags',
                    label: 'Tags',
                    cell: {
                        Editor: GridEditorComboboxTreeMulti,
                        editable: true,
                    },
                },
            ]}
            rows={[]}
        />
    ),
})

figma.connect(
    GridEditorSwitch,
    '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=3261:21508',
    {
        example: () => (
            <Grid
                columns={[
                    {
                        id: 'enabled',
                        label: 'Enabled',
                        cell: {
                            Editor: GridEditorSwitch,
                            editable: true,
                            hybridEditor: true,
                        },
                    },
                ]}
                rows={[]}
            />
        ),
    }
)

figma.connect(
    GridEditorRadio,
    '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=17360-34111',
    {
        example: () => (
            <Grid
                columns={[
                    {
                        id: 'isDefault',
                        label: 'Default',
                        cell: {
                            Editor: GridEditorRadio,
                            editable: true,
                            hybridEditor: true,
                        },
                    },
                ]}
                rows={[]}
            />
        ),
    }
)