import {
  FormField,
  FormFieldGroup,
  MultiSelectInput,
  TextAreaInput,
  TextInput,
} from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Form Field Group',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: FormFieldGroup,
  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: 'Form field group with multiple fields.',
    style: {
      size: '100%',
      frame: false,
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const options = [
        {
          value: 'world',
          label: 'World',
        },
        {
          value: 'politics',
          label: 'Politics',
        },
      ]

      const [values, setValues] = useState<any[]>()

      return (
        <div style={{ width: 700 }}>
          <FormFieldGroup>
            <FormField label="Title">
              <TextInput placeholder="Add a title" onChange={() => {}} />
            </FormField>
            <FormField label="Body">
              <TextAreaInput
                rows={20}
                placeholder="Add article body here"
                onChange={() => {}}
              />
            </FormField>
            <FormField label="Categories">
              <MultiSelectInput
                values={values}
                options={options}
                onChange={setValues}
              />
            </FormField>
          </FormFieldGroup>
        </div>
      )
    },
  },
  {
    name: 'With Title And Description',
    type: 'component',
    description: 'Form field group with title and description.',
    style: {
      size: '100%',
      frame: false,
      flex: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    render: () => {
      const options = [
        {
          value: 'world',
          label: 'World',
        },
        {
          value: 'politics',
          label: 'Politics',
        },
      ]

      const [values, setValues] = useState<any[]>(options)

      return (
        <div style={{ width: 700 }}>
          <FormFieldGroup
            label="Content"
            description="Set up the content of your article"
          >
            <FormField label="Title">
              <TextInput placeholder="Add a title" onChange={() => {}} />
            </FormField>
            <FormField label="Body">
              <TextAreaInput
                rows={20}
                placeholder="Add article body here"
                onChange={() => {}}
              />
            </FormField>
            <FormField label="Categories">
              <MultiSelectInput
                values={values}
                options={options}
                onChange={setValues}
              />
            </FormField>
          </FormFieldGroup>
        </div>
      )
    },
  },
]
