import { MultiSelectInput } from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Multi Select Input',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: MultiSelectInput,
  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: 'MultiSelectInput handling string values.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <MultiSelectInput
            values={value}
            onChange={(value) => {
              setValue(value as string[])
            }}
            options={[
              { label: 'High', value: 'high' },
              { label: 'Medium', value: 'medium' },
              { label: 'Low', value: 'low' },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Number',
    type: 'component',
    description: 'MultiSelectInput handling number values.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<number[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <MultiSelectInput
            values={value}
            onChange={(value) => {
              setValue(value as number[])
            }}
            options={[
              { label: '1', value: 1 },
              { label: '2', value: 2 },
              { label: '3', value: 3 },
              { label: '4', value: 4 },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Filterable',
    type: 'component',
    description: 'MultiSelectInput with filterable options.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string[]>([])
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <MultiSelectInput
            values={value}
            onChange={(value) => {
              setValue(value as string[])
            }}
            options={[
              { label: 'Francesco', value: '1' },
              { label: 'Bence', value: '2' },
              { label: 'Kyle', value: '3' },
              { label: 'Yves', value: '4' },
              { label: 'Youri', value: '5' },
            ]}
            placeholder="Pick option"
            filterable
          />
        </div>
      )
    },
  },
  {
    name: 'Error',
    type: 'component',
    description: 'MultiSelectInput with error state.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string[]>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <MultiSelectInput
            error
            values={value}
            onChange={(value) => {
              setValue(value as string[])
            }}
            options={[
              { label: 'Automatic', value: 'auto' },
              { label: 'Manual', value: 'manual' },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
  {
    name: 'Disabled',
    type: 'component',
    description: 'Disabled MultiSelectInput.',
    style: {
      frame: false,
      size: 'small',
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const [value, setValue] = useState<string[]>()
      return (
        <div
          style={{
            width: 360,
          }}
        >
          <MultiSelectInput
            values={value}
            onChange={(value) => {
              setValue(value as string[])
            }}
            disabled
            options={[
              { label: 'Automatic', value: 'auto' },
              { label: 'Manual', value: 'manual' },
            ]}
            placeholder="Pick option"
          />
        </div>
      )
    },
  },
]
