import React from 'react'
import figma from '@figma/code-connect'
import {
    GridCellDefault,
    GridCellChips,
    GridCellButton,
    GridCellDropdownMenu,
} from '.'
import { GridEditorSwitch } from '../editors'
import { Grid } from '../grids/grid'
import { ListItem } from '@planview/pv-uikit'

const GRID_CELL = '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=3261:21348'

figma.connect(GridCellDefault, GRID_CELL, {
    variant: { Type: 'Default renderer' },
    example: () => <GridCellDefault tabIndex={0} label="Cell value" />,
})

figma.connect(GridCellDefault, GRID_CELL, {
    variant: { Type: 'Tree renderer' },
    example: () => (
        <Grid columns={[{ id: 'name', label: 'Name', tree: true }]} rows={[]} />
    ),
})

figma.connect(GridCellChips, GRID_CELL, {
    variant: { Type: 'Chips renderer' },
    example: () => <GridCellChips tabIndex={0} value={['Tag 1', 'Tag 2']} />,
})

figma.connect(GridCellButton, GRID_CELL, {
    variant: { Type: 'Button renderer' },
    example: () => (
        <GridCellButton tabIndex={0} label="Action" onClick={() => {}} />
    ),
})

figma.connect(GridCellDropdownMenu, GRID_CELL, {
    variant: { Type: 'Dropdown renderer' },
    example: () => (
        <GridCellDropdownMenu
            tabIndex={0}
            label="Options"
            trigger={{ label: 'Options', withCaret: true }}
        >
            <ListItem label="Item 1" />
            <ListItem label="Item 2" />
        </GridCellDropdownMenu>
    ),
})

figma.connect(GridEditorSwitch, GRID_CELL, {
    variant: { Type: 'Switch' },
    example: () => (
        <GridEditorSwitch
            label="Switch label"
            value={true}
            rowId={1}
            tabIndex={0}
            columnId="Enabled"
            mode="editing"
            onCancel={() => {}}
            onConfirm={() => {}}
        />
    ),
})