import { BasedForm } from './index.js'
import { Button } from '../Button/index.js'
import { colors } from '../../utils/colors.js'
import { FormErrors } from '../Form/types.js'

export const Default = () => {
  return (
    <BasedForm
      type="article"
      onSubmit={(values, type) => {
        console.log('onsubmit lefut', values, type)
      }}
      id="ar0000"
      endpoints={{
        query: 'get-demo-data',
        schema: 'get-demo-schema',
        totalQuery: 'get-demo-total',
      }}
      validate={async (values, type) => {
        const errors: FormErrors = {}

        if (type === 'article') {
          if (!values['title']) {
            errors['title'] = 'Title is required'
          }
        }

        if (type === 'author') {
          if (!values['name']) {
            errors['name'] = 'Name is required'
          }
        }

        await new Promise((resolve) => {
          setTimeout(resolve, 500)
        })
        return errors
      }}
      groups={[
        {
          label: 'Content',
          description: 'All content related fields',
          fields: ['title', 'abstract', 'body'],
        },
        {
          label: 'SEO',
          description: 'SEO related settings',
          fields: ['keywords', 'abstract', 'image'],
        },
        {
          label: 'Publish & monetize',
          description: 'Lorem ipsum settings for publication',
          fields: ['authors', 'publishedAt', 'format', 'monetized'],
        },
      ]}
      transformFields={(fields) => {
        // fields['excerpt'].type = 'textarea'
        // fields['body'].type = 'richtext'

        return fields
      }}
    >
      {({
        submitForm,
        validateForm,
        resetForm,
        isSubmitting,
        isValidating,
        isDirty,
      }) => (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div
            style={{
              height: 64,
              display: 'flex',
              justifyContent: 'flex-end',
              alignItems: 'center',
              background: colors.neutralInverted100,
              boxShadow: `inset 0 -1px 0 0 ${colors.neutral20Adjusted}`,
              gap: 12,
              paddingLeft: 16,
              paddingRight: 16,
            }}
          >
            <Button variant="ghost" onClick={resetForm} disabled={isSubmitting}>
              Reset form
            </Button>
            <Button
              variant="border"
              onClick={() => {
                validateForm('article')
              }}
              disabled={isSubmitting}
              loading={isValidating}
            >
              Validate form
            </Button>
            <Button
              onClick={() => {
                submitForm('article')
              }}
              disabled={isSubmitting || !isDirty}
              loading={isSubmitting}
            >
              Submit form
            </Button>
          </div>

          <div
            style={{
              paddingTop: 16,
              paddingBottom: 64,
              paddingLeft: 16,
              paddingRight: 16,
              width: '100%',
              maxWidth: 700,
              marginLeft: 'auto',
              marginRight: 'auto',
            }}
          >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <BasedForm.Tabs />
              <BasedForm.Fields />
            </div>
          </div>
        </div>
      )}
    </BasedForm>
  )
}
