import { Badge, TagInput } from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Tag Input',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: TagInput,
  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: 'String',
    type: 'component',
    description: 'TagInput for string values.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TagInput value={value} onChange={setValue} variant="string" />
        </div>
      )
    },
  },
  {
    name: 'Number',
    type: 'component',
    description: 'TagInput for number values.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<number[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TagInput value={value} onChange={setValue} variant="number" />
        </div>
      )
    },
  },
  {
    name: 'Enum',
    type: 'component',
    description: 'TagInput for enum values.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TagInput
            value={value}
            onChange={setValue}
            variant="enum"
            options={[
              {
                value: 'draft',
                label: <Badge color="orange-subtle">Draft</Badge>,
              },
              {
                value: 'published',
                label: <Badge color="green-subtle">Published</Badge>,
              },
            ]}
          />
        </div>
      )
    },
  },
  {
    name: 'DateTime',
    type: 'component',
    description: 'TagInput for date-time values.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<number[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <TagInput value={value} onChange={setValue} variant="date-time" />
        </div>
      )
    },
  },
]
