import { Badge, Button, Form } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Form',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: Form,
  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: 'Complex',
    type: 'component',
    description: 'A complex form example with grouped fields.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      return (
        <Form
          groups={[
            { label: 'Content', fields: ['title', 'body', 'categories'] },
            {
              label: 'Publication',
              fields: ['pubDate', 'subExclusive'],
            },
          ]}
          fields={{
            title: { type: 'text', label: 'Title' },
            body: { type: 'textarea', label: 'Body' },
            categories: {
              type: 'select',
              label: 'Categories',
              options: [
                {
                  value: 'world',
                  label: <Badge color="neutral-subtle">World</Badge>,
                },
                {
                  value: 'politics',
                  label: <Badge color="neutral-subtle">Politics</Badge>,
                },
              ],
            },
            pubDate: { type: 'date', label: 'Publication date' },
            subExclusive: {
              type: 'switch',
              label: 'Subscriber exclusive',
              note: {
                title: 'What is subscriber exclusivity?',
                description:
                  'If turned on, this article will only be accessible by logged in monthly subscribers. It will appear on the landing page, but opening it will prompt visitors to subscribe.',
              },
            },
          }}
          onSubmit={console.log}
        >
          {({ submitForm, resetForm }) => (
            <div
              style={{
                width: 700,
                margin: 'auto',
                display: 'flex',
                flexDirection: 'column',
                gap: 24,
                paddingTop: 32,
                paddingBottom: 32,
              }}
            >
              <Form.Tabs />
              <Form.Fields />
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Button onClick={resetForm} variant="border">
                  Reset form
                </Button>
                <Button
                  onClick={() => {
                    submitForm()
                  }}
                >
                  Submit form
                </Button>
              </div>
            </div>
          )}
        </Form>
      )
    },
  },
  {
    name: 'Nested',
    type: 'component',
    description: 'An example of nested fields in a form.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      return (
        <Form
          fields={{
            title: { type: 'text', label: 'Title' },
            isbn: { type: 'number', label: 'ISBN number' },
            Author: {
              fname: { type: 'text', label: 'First name' },
              lname: { type: 'text', label: 'Last name' },
              birthday: { type: 'datetime', label: 'Date of birth' },
              highlighted: {
                type: 'checkbox',
                checkboxLabel: 'Off',
                label: 'Highlighted',
              },
            },
          }}
          onSubmit={console.log}
        >
          {({ submitForm, resetForm }) => (
            <div
              style={{
                width: 700,
                margin: 'auto',
                display: 'flex',
                flexDirection: 'column',
                gap: 24,
                paddingTop: 32,
                paddingBottom: 32,
              }}
            >
              <Form.Fields />
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Button onClick={resetForm} variant="border">
                  Reset form
                </Button>
                <Button
                  onClick={() => {
                    submitForm()
                  }}
                >
                  Submit form
                </Button>
              </div>
            </div>
          )}
        </Form>
      )
    },
  },
]
