import { Button, IconButton, Menu } from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Menu',
  group: 'Interactables',
  section: 'components',
  icon: 'edit',
  component: Menu,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [rowHeight, setRowHeight] = useState('short')
      const [visibleFields, setVisibleFields] = useState(['name'])
      const [view, setView] = useState('table')

      return (
        <Menu>
          <Menu.Trigger>
            {({ open }) => (
              <Button
                variant="border"
                trailIcon={open ? 'tiny-chevron-up' : 'tiny-chevron-down'}
              >
                View
              </Button>
            )}
          </Menu.Trigger>
          <Menu.Items>
            <Menu.OptionCardGroup
              value={view}
              onChange={setView}
              options={[
                { label: 'Table', value: 'table', icon: 'sheet' },
                { label: 'Gallery', value: 'gallery', icon: 'gallery' },
              ]}
            />
            <Menu.Header>Row height</Menu.Header>
            <Menu.ToggleItem
              value={rowHeight === 'short'}
              onChange={() => {
                setRowHeight('short')
              }}
            >
              Short
            </Menu.ToggleItem>
            <Menu.ToggleItem
              value={rowHeight === 'tall'}
              onChange={() => {
                setRowHeight('tall')
              }}
            >
              Tall
            </Menu.ToggleItem>
            <Menu.Separator />
            <Menu>
              <Menu.TriggerItem leadIcon="columns">
                Visible fields
              </Menu.TriggerItem>
              <Menu.Items>
                <Menu.Header>Visible fields</Menu.Header>
                <Menu.ToggleItem value={true} disabled>
                  ID
                </Menu.ToggleItem>
                <Menu.ToggleItem
                  value={visibleFields.includes('name')}
                  onChange={() => {
                    setVisibleFields((p) =>
                      p.includes('name')
                        ? p.filter((e) => e !== 'name')
                        : [...p, 'name'],
                    )
                  }}
                >
                  Name
                </Menu.ToggleItem>
                <Menu.ToggleItem
                  value={visibleFields.includes('country')}
                  onChange={() => {
                    setVisibleFields((p) =>
                      p.includes('country')
                        ? p.filter((e) => e !== 'country')
                        : [...p, 'country'],
                    )
                  }}
                >
                  Country
                </Menu.ToggleItem>
                <Menu.Separator />
                <Menu.Item
                  leadIcon="show"
                  onClick={() => {
                    setVisibleFields(['name', 'country'])
                  }}
                >
                  Show all
                </Menu.Item>
              </Menu.Items>
            </Menu>
            <Menu.Separator />
            <Menu.Item
              leadIcon="revert"
              onClick={() => {
                setRowHeight('short')
                setVisibleFields(['name'])
                setView('table')
              }}
            >
              Reset view
            </Menu.Item>
            <Menu.Item leadIcon="delete" color="red">
              Delete view
            </Menu.Item>
          </Menu.Items>
        </Menu>
      )
    },
  },
  {
    name: 'Icon button',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [rowHeight, setRowHeight] = useState('short')
      const [visibleFields, setVisibleFields] = useState(['name'])
      const [view, setView] = useState('table')

      return (
        <Menu>
          <Menu.Trigger>
            {({ open }) => (
              <IconButton icon="sheet" trailChevron={open ? 'up' : 'down'} />
            )}
          </Menu.Trigger>
          <Menu.Items>
            <Menu.OptionCardGroup
              value={view}
              onChange={setView}
              options={[
                { label: 'Table', value: 'table', icon: 'sheet' },
                { label: 'Gallery', value: 'gallery', icon: 'gallery' },
              ]}
            />
            <Menu.Header>Row height</Menu.Header>
            <Menu.ToggleItem
              value={rowHeight === 'short'}
              onChange={() => {
                setRowHeight('short')
              }}
            >
              Short
            </Menu.ToggleItem>
            <Menu.ToggleItem
              value={rowHeight === 'tall'}
              onChange={() => {
                setRowHeight('tall')
              }}
            >
              Tall
            </Menu.ToggleItem>
            <Menu.Separator />
            <Menu>
              <Menu.TriggerItem leadIcon="columns">
                Visible fields
              </Menu.TriggerItem>
              <Menu.Items>
                <Menu.Header>Visible fields</Menu.Header>
                <Menu.ToggleItem value={true} disabled>
                  ID
                </Menu.ToggleItem>
                <Menu.ToggleItem
                  value={visibleFields.includes('name')}
                  onChange={() => {
                    setVisibleFields((p) =>
                      p.includes('name')
                        ? p.filter((e) => e !== 'name')
                        : [...p, 'name'],
                    )
                  }}
                >
                  Name
                </Menu.ToggleItem>
                <Menu.ToggleItem
                  value={visibleFields.includes('country')}
                  onChange={() => {
                    setVisibleFields((p) =>
                      p.includes('country')
                        ? p.filter((e) => e !== 'country')
                        : [...p, 'country'],
                    )
                  }}
                >
                  Country
                </Menu.ToggleItem>
                <Menu.Separator />
                <Menu.Item
                  leadIcon="show"
                  onClick={() => {
                    setVisibleFields(['name', 'country'])
                  }}
                >
                  Show all
                </Menu.Item>
              </Menu.Items>
            </Menu>
            <Menu.Separator />
            <Menu.Item
              leadIcon="revert"
              onClick={() => {
                setRowHeight('short')
                setVisibleFields(['name'])
                setView('table')
              }}
            >
              Reset view
            </Menu.Item>
            <Menu.Item leadIcon="delete" color="red">
              Delete view
            </Menu.Item>
          </Menu.Items>
        </Menu>
      )
    },
  },
]
