import {
  ErrorMessage,
  Field,
  Form,
  Formik,
  FormikHelpers,
  FormikValues
} from 'formik'
import type { Meta, StoryObj } from '@storybook/react'

import CheckRadioField from './CheckRadioField'
import Flex from '../Flex'
import FormField from './FormField.component'
import { IFormField } from './FormField.interface'
import Icon from '../Icon'
import React from 'react'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/FormField',
  component: FormField,
  tags: ['autodocs'],
  args: {
    name: 'nome',
    type: 'text',
    as: 'input'
  },
  argTypes: {
    as: {
      defaultValue: 'input',
      description: 'Overwritten description',
      options: ['input', 'textarea', 'select']
    },
    name: {
      defaultValue: 'texto',
      description: 'Required name property'
    },
    type: {
      defaultValue: 'text',
      control: 'select',
      description: 'Type of input element if as is input',
      options: [
        'button',
        'checkbox',
        'color',
        'date',
        'datetime-local',
        'email',
        'hidden',
        'image',
        'month',
        'number',
        'password',
        'radio',
        'range',
        'reset',
        'search',
        'submit',
        'tel',
        'text',
        'time',
        'url',
        'week'
      ]
    }
  }
} as Meta

export const Simple: StoryObj<IFormField> = {
  render: args => (
    <Formik
      initialValues={{}}
      onSubmit={function (
        values: FormikValues,
        formikHelpers: FormikHelpers<FormikValues>
      ): void | Promise<any> {
        throw new Error('Function not implemented.')
      }}
    >
      <Form>
        <FormField label={'My custom input'} id={'input-1'}>
          <Field
            label={'My custom input'}
            id={'input-1'}
            name={'input-1'}
            required={false}
            className={''}
          ></Field>
          <ErrorMessage name={'input-1'} />
        </FormField>
      </Form>
    </Formik>
  ),
  args: {}
}

export const WithIcon: StoryObj<IFormField> = {
  render: args => (
    <Formik
      initialValues={{}}
      onSubmit={function (
        values: FormikValues,
        formikHelpers: FormikHelpers<FormikValues>
      ): void | Promise<any> {
        throw new Error('Function not implemented.')
      }}
    >
      <Form>
        <FormField
          id={'input-1'}
          label={'My custom input'}
          rightIcon={<Icon icon={'icon-search'} />}
        >
          <Field
            label={'My custom input'}
            id={'input-1'}
            name={'input-1'}
            required={false}
            className={''}
          ></Field>
          <ErrorMessage name={'input-1'} />
        </FormField>
      </Form>
    </Formik>
  ),
  args: {}
}

export const FilterWithInputs: StoryObj<IFormField> = {
  render: args => (
    <Formik
      initialValues={{}}
      onSubmit={function (
        values: FormikValues,
        formikHelpers: FormikHelpers<FormikValues>
      ): void | Promise<any> {
        throw new Error('Function not implemented.')
      }}
    >
      <Form>
        <Flex align="center" style={{ gap: '8px' }}>
          <FormField
            id={'input-1'}
            label={'My custom input'}
            leftIcon={<Icon icon={'icon-search'} />}
          >
            <Field
              label={'My custom input'}
              id={'input-1'}
              name={'input-1'}
              placeholder="Procurar"
              onChange={e => console.log(e)}
            ></Field>
            <ErrorMessage name={'input-1'} />
          </FormField>

          <FormField
            id={'event_type'}
            label={'My custom input'}
            leftIcon={<Icon icon={'icon-search'} />}
          >
            <Field
              as="select"
              label={'My custom input'}
              id={'event_type'}
              name={'event_type'}
              placeholder="Procurar"
              onChange={e => console.log(e)}
            >
              <option value="text">Evento tipo 1</option>
              <option value="text2">Evento tipo 2</option>
              <option value="text3">Evento tipo 2</option>
            </Field>
            <ErrorMessage name={'event_type'} />
          </FormField>

          <FormField
            id={'date'}
            label={'Date'}
            leftIcon={<Icon icon={'icon-search'} />}
          >
            <Field
              type="date"
              label={'Date'}
              id={'date'}
              name={'date'}
              placeholder="DD/MM/YYYY"
              onChange={e => console.log(e)}
            ></Field>
            <ErrorMessage name={'date'} />
          </FormField>
        </Flex>
      </Form>
    </Formik>
  ),
  args: {}
}

export const DarkStyle: StoryObj<IFormField> = {
  render: args => (
    <div className="style-dark color-white bg-primary70">
      <Formik
        initialValues={{}}
        onSubmit={function (
          values: FormikValues,
          formikHelpers: FormikHelpers<FormikValues>
        ): void | Promise<any> {
          throw new Error('Function not implemented.')
        }}
      >
        <Form>
          <Flex align="center" style={{ gap: '8px' }}>
            <FormField
              id={'input-1'}
              label={'My custom input'}
              leftIcon={<Icon icon={'icon-search'} />}
            >
              <Field
                label={'My custom input'}
                id={'input-1'}
                name={'input-1'}
                placeholder="Procurar"
                onChange={e => console.log(e)}
              ></Field>
              <ErrorMessage name={'input-1'} />
            </FormField>

            <FormField
              id={'event_type'}
              label={'My custom input'}
              leftIcon={<Icon icon={'icon-search'} />}
            >
              <Field
                as="select"
                label={'My custom input'}
                id={'event_type'}
                name={'event_type'}
                placeholder="Procurar"
                onChange={e => console.log(e)}
              >
                <option value="text">Evento tipo 1</option>
                <option value="text2">Evento tipo 2</option>
                <option value="text3">Evento tipo 2</option>
              </Field>
              <ErrorMessage name={'event_type'} />
            </FormField>

            <FormField
              id={'date'}
              label={'Date'}
              leftIcon={<Icon icon={'icon-search'} />}
            >
              <Field
                type="date"
                label={'Date'}
                id={'date'}
                name={'date'}
                placeholder="DD/MM/YYYY"
                onChange={e => console.log(e)}
              ></Field>
              <ErrorMessage name={'date'} />
            </FormField>

            <FormField id={'upload'} label={'Upload'}>
              <Field
                type="file"
                label={'Upload'}
                id={'upload'}
                name={'upload'}
                onChange={e => console.log(e)}
              ></Field>
              <ErrorMessage name={'upload'} />
            </FormField>

            <FormField
              id={'checkboxes'}
              label={'Checkboxes'}
              isCheckRadio={true}
            >
              <CheckRadioField id={`checkbox-1`} label={'Option 1'}>
                <Field
                  type={'checkbox'}
                  id={`checkbox-1`}
                  name={'checkboxes'}
                  value={'1'}
                />
              </CheckRadioField>
              <CheckRadioField id={`checkbox-2`} label={'Option 2'}>
                <Field
                  type={'checkbox'}
                  id={`checkbox-2`}
                  name={'checkboxes'}
                  value={'2'}
                />
              </CheckRadioField>
              <CheckRadioField id={`checkbox-3`} label={'Option 3'}>
                <Field
                  type={'checkbox'}
                  id={`checkbox-2`}
                  name={'checkboxes'}
                  value={'2'}
                />
              </CheckRadioField>
              <ErrorMessage name={'checkboxes'} />
            </FormField>

            <FormField id={'radios'} label={'Radios'} isCheckRadio={true}>
              <CheckRadioField id={`radio-1`} label={'Option 1'}>
                <Field
                  type={'radio'}
                  id={`radio-1`}
                  name={'radios'}
                  value={'1'}
                />
              </CheckRadioField>
              <CheckRadioField id={`radio-2`} label={'Option 2'}>
                <Field
                  type={'radio'}
                  id={`radio-2`}
                  name={'radios'}
                  value={'2'}
                />
              </CheckRadioField>
              <CheckRadioField id={`radio-3`} label={'Option 3'}>
                <Field
                  type={'radio'}
                  id={`radio-3`}
                  name={'radios'}
                  value={'3'}
                />
              </CheckRadioField>
              <ErrorMessage name={'radios'} />
            </FormField>

            <FormField id={'description'} label={'Description'}>
              <Field
                as="textarea"
                id={'description'}
                name={'description'}
                placeholder="Your message"
                onChange={e => console.log(e)}
              ></Field>
              <ErrorMessage name={'description'} />
            </FormField>
          </Flex>
        </Form>
      </Formik>
    </div>
  ),
  args: {}
}

export const All: StoryObj<IFormField> = {
  render: args => (
    <Formik
      initialValues={{}}
      onSubmit={function (
        values: FormikValues,
        formikHelpers: FormikHelpers<FormikValues>
      ): void | Promise<any> {
        throw new Error('Function not implemented.')
      }}
    >
      <Form>
        <Flex align="center" style={{ gap: '8px' }}>
          <FormField
            id={'input-1'}
            label={'My custom input'}
            leftIcon={<Icon icon={'icon-search'} />}
          >
            <Field
              label={'My custom input'}
              id={'input-1'}
              name={'input-1'}
              placeholder="Procurar"
              onChange={e => console.log(e)}
            ></Field>
            <ErrorMessage name={'input-1'} />
          </FormField>

          <FormField
            id={'event_type'}
            label={'My custom input'}
            leftIcon={<Icon icon={'icon-search'} />}
          >
            <Field
              as="select"
              label={'My custom input'}
              id={'event_type'}
              name={'event_type'}
              placeholder="Procurar"
              onChange={e => console.log(e)}
            >
              <option value="text">Evento tipo 1</option>
              <option value="text2">Evento tipo 2</option>
              <option value="text3">Evento tipo 2</option>
            </Field>
            <ErrorMessage name={'event_type'} />
          </FormField>

          <FormField
            id={'date'}
            label={'Date'}
            leftIcon={<Icon icon={'icon-search'} />}
          >
            <Field
              type="date"
              label={'Date'}
              id={'date'}
              name={'date'}
              placeholder="DD/MM/YYYY"
              onChange={e => console.log(e)}
            ></Field>
            <ErrorMessage name={'date'} />
          </FormField>

          <FormField id={'upload'} label={'Upload'}>
            <Field
              type="file"
              label={'Upload'}
              id={'upload'}
              name={'upload'}
              onChange={e => console.log(e)}
            ></Field>
            <ErrorMessage name={'upload'} />
          </FormField>

          <FormField id={'checkboxes'} label={'Checkboxes'} isCheckRadio={true}>
            <CheckRadioField id={`checkbox-1`} label={'Option 1'}>
              <Field
                type={'checkbox'}
                id={`checkbox-1`}
                name={'checkboxes'}
                value={'1'}
              />
            </CheckRadioField>
            <CheckRadioField id={`checkbox-2`} label={'Option 2'}>
              <Field
                type={'checkbox'}
                id={`checkbox-2`}
                name={'checkboxes'}
                value={'2'}
              />
            </CheckRadioField>
            <CheckRadioField id={`checkbox-3`} label={'Option 3'}>
              <Field
                type={'checkbox'}
                id={`checkbox-3`}
                name={'checkboxes'}
                value={'3'}
              />
            </CheckRadioField>
            <ErrorMessage name={'checkboxes'} />
          </FormField>

          <FormField id={'radios'} label={'Radios'} isCheckRadio={true}>
            <CheckRadioField id={`radio-1`} label={'Option 1'}>
              <Field
                type={'radio'}
                id={`radio-1`}
                name={'radios'}
                value={'1'}
              />
            </CheckRadioField>
            <CheckRadioField id={`radio-2`} label={'Option 2'}>
              <Field
                type={'radio'}
                id={`radio-2`}
                name={'radios'}
                value={'2'}
              />
            </CheckRadioField>
            <CheckRadioField id={`radio-3`} label={'Option 3'}>
              <Field
                type={'radio'}
                id={`radio-3`}
                name={'radios'}
                value={'3'}
              />
            </CheckRadioField>
            <ErrorMessage name={'radios'} />
          </FormField>

          <FormField id={'description'} label={'Description'}>
            <Field
              as="textarea"
              id={'description'}
              name={'description'}
              placeholder="Your message"
              onChange={e => console.log(e)}
            ></Field>
            <ErrorMessage name={'description'} />
          </FormField>
        </Flex>
      </Form>
    </Formik>
  ),
  args: {}
}