import React from 'react'

import { emailValidator } from '../../validators'

export const getFormFieldsNotLoggedIn = (
  clientName?: string | number
): IFormFieldsSection[] => [
  {
    name: 'basic-info',
    groupLabel: (
      <>
        <span>
          If you want to enter your details manually, please type them below to create an
          account, then click on
        </span>
        <b> Confirm Registration:</b>
      </>
    ),
    groupLabelClassName: '',
    groupClassName: '',
    fields: [
      {
        className: 'half-width',
        name: 'firstName',
        label: 'First Name',
        type: 'text',
        required: true,
        onValidate: null,
      },
      {
        className: 'half-width',
        name: 'lastName',
        label: 'Last Name',
        type: 'text',
        required: true,
        onValidate: null,
      },
      {
        name: 'email',
        label: 'Email',
        type: 'email',
        required: true,
        onValidate: emailValidator,
      },
      {
        name: 'confirmEmail',
        label: 'Confirm Email',
        type: 'email',
        required: true,
        onValidate: emailValidator,
      },
    ],
  },
  {
    name: 'billing-info',
    groupLabel: '',
    groupLabelClassName: '',
    groupClassName: '',
    fields: [
      {
        className: 'half-width',
        name: 'zip',
        label: 'Post Code/Zip',
        type: 'text',
        required: true,
        onValidate: null,
      },
      {
        className: 'half-width',
        name: 'country',
        label: 'Country',
        type: 'select',
        required: true,
        onValidate: null,
      },
    ],
  },
  {
    name: 'password-info',
    groupLabel: (
      <div className="email-info-block">
        <span>Choose a password for your new</span>
        <b> {clientName || 'Mana Common'} </b>
        <span>account</span>
      </div>
    ),
    groupLabelClassName: '',
    groupClassName: '',
    fields: [
      {
        className: 'half-width',
        name: 'password',
        label: 'Password',
        type: 'password',
        required: true,
        onValidate: null,
      },
      {
        className: 'half-width',
        name: 'confirmPassword',
        label: 'Confirm Password',
        type: 'password',
        required: true,
        onValidate: null,
      },
    ],
  },
]

export const getFormFieldsLoggedIn = (
  clientName?: string | number
): IFormFieldsSection[] => [
  {
    name: 'basic-info-logged-in',
    groupLabel:
      'To confirm your pre-registration for {event_name} simply click on the confirmation button below.',
    groupLabelClassName: '',
    groupClassName: '',
    fields: [
      {
        name: 'email',
        label: 'Email',
        type: 'email',
        required: true,
        onValidate: emailValidator,
      },
      {
        name: 'confirmEmail',
        label: 'Confirm Email',
        type: 'email',
        required: true,
        onValidate: emailValidator,
      },
    ],
  },
  {
    name: 'billing-info-logged-in',
    groupLabel: '',
    groupLabelClassName: '',
    groupClassName: '',
    fields: [
      {
        name: 'numTickets',
        label: 'How many tickets do you want to buy?',
        type: 'select',
        required: true,
        options: new Array(10).fill(null).map((_, index) => ({
          label: index + 1,
          value: index + 1,
        })),
        onValidate: null,
      },
      {
        name: 'holderAge',
        label: 'Ticket Holder Age',
        type: 'date',
        required: true,
        onValidate: null,
      },
      {
        name: 'brandOptIn',
        label: `I would like to be updated on ${
          clientName || 'Mana Common'
        } news, events and offers.`,
        type: 'checkbox',
      },
    ],
  },
]