import { wording } from 'src/words'
import { replaceSpaceWithHyphen } from 'src/forms/views'
import { paymentWithBillingAddressFormState } from './state'

export const inputList = [
  {
    identity: 'firstName',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'cardFirstName',
    labelText: `${wording.firstNameLabel}*`,
    maxLength: '100',
    wrapperClassName: 'form-item-wrapper card-first-name',
    validationType: 'name',
    errorMessageFor: 'firstName',
    dataQa: 'qa-payment-first-name',
    autocomplete: 'first-name',
    ariaLabel: replaceSpaceWithHyphen(wording.firstNameLabel),
    animatePlaceholder: false,
    onBlur: paymentWithBillingAddressFormState.handleBlur,
  },
  {
    identity: 'lastName',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'cardLastName',
    labelText: `${wording.lastNameLabel}*`,
    maxLength: '100',
    wrapperClassName: 'form-item-wrapper card-last-name',
    validationType: 'name',
    errorMessageFor: 'lastName',
    dataQa: 'qa-payment-last-name',
    autocomplete: 'last-name',
    ariaLabel: replaceSpaceWithHyphen(wording.lastNameLabel),
    animatePlaceholder: false,
    onBlur: paymentWithBillingAddressFormState.handleBlur,
  },
  {
    identity: 'cardNumber',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'cardNumber',
    labelText: `${wording.cardNumber}*`,
    maxLength: '16',
    wrapperClassName: 'form-item-wrapper card-number',
    validationType: 'creditCard',
    errorMessageFor: 'creditCard',
    dataQa: 'qa-payment-card-number',
    autocomplete: 'card-number',
    ariaLabel: replaceSpaceWithHyphen(wording.cardNumber),
    animatePlaceholder: false,
    onBlur: paymentWithBillingAddressFormState.handleBlur,
  },
  {
    identity: 'month',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'expirationMonth',
    labelText: `${wording.month}*`,
    maxLength: '2',
    wrapperClassName: 'form-item-wrapper card-month',
    validationType: 'month',
    errorMessageFor: 'expirationMonth',
    dataQa: 'qa-payment-month',
    autocomplete: 'month',
    ariaLabel: wording.month,
    animatePlaceholder: false,
    onBlur: paymentWithBillingAddressFormState.handleBlur,
  },
  {
    identity: 'year',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'expirationYear',
    labelText: `${wording.year}*`,
    maxLength: '4',
    wrapperClassName: 'form-item-wrapper card-expire-year',
    validationType: 'year',
    errorMessageFor: 'expirationYear',
    dataQa: 'qa-payment-year',
    autocomplete: 'year',
    ariaLabel: wording.year,
    animatePlaceholder: false,
    onBlur: paymentWithBillingAddressFormState.handleBlur,
  },
  {
    identity: 'defaultPaymentMethod',
    type: 'checkbox',
    label: wording.setToDefaultPaymentMethod,
    className: 'form-item-wrapper checkbox-label default-address',
    name: 'defaultPaymentMethod',
    isSelected: true,
    bgColor: '#00a0db',
    dataQa: 'qa-set-default-checkbox',
    ariaLabel: wording.setToDefaultPaymentMethod,
  },

  {
    identity: 'billingAddressSameAsShipping',
    type: 'checkbox',
    label: wording.billingAddressSameAsShipping,
    className: 'form-item-wrapper checkbox-label default-address',
    name: 'billingAddressSameAsShipping',
    isSelected: true,
    bgColor: '#00a0db',
    dataQa: 'qa-ship-billing-address',
    ariaLabel: wording.billingAddressSameAsShipping,
  },

  {
    type: 'groupElements',
    name: 'billing-address',
    className: 'billing-address-wrapper',
    validationType: 'groupElements',
    isHidden: false,
    elementList: [
      {
        identity: 'billingAddress',
        type: 'label',
        value: wording.billingAddress,
        wrapperClass: 'form-item-wrapper billing-address-heading',
        className: '',
        dataQa: 'qa-billing-title',
      },
      {
        identity: 'firstName',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'addressFirstName',
        labelText: `${wording.firstNameLabel}*`,
        maxLength: '100',
        wrapperClassName: 'form-item-wrapper first-name',
        validationType: 'name',
        errorMessageFor: 'firstName',
        dataQa: 'qa-first-name',
        autocomplete: 'first-name',
        ariaLabel: replaceSpaceWithHyphen(wording.firstNameLabel),
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'lastName',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'addressLastName',
        labelText: `${wording.lastNameLabel}*`,
        maxLength: '100',
        wrapperClassName: 'form-item-wrapper last-name',
        validationType: 'name',
        errorMessageFor: 'lastName',
        dataQa: 'qa-last-name',
        autocomplete: 'family-name',
        ariaLabel: replaceSpaceWithHyphen(wording.lastNameLabel),
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'addressLine1',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'addressLine1',
        labelText: 'address line 1*',
        maxLength: '150',
        wrapperClassName: 'form-item-wrapper address',
        placeholderText: 'Street address, PO box, ect.',
        validationType: 'shippingAddress',
        errorMessageFor: 'addressLine1',
        dataQa: 'qa-address1',
        autocomplete: 'address-line1',
        ariaLabel: replaceSpaceWithHyphen('address line 1'),
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'addressLine2',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'addressLine2',
        labelText: 'address line 2 / company name',
        maxLength: '150',
        wrapperClassName: 'form-item-wrapper address',
        placeholderText: 'Apt., suite, unit, building, floor, etc.',
        validationType: 'emptyOrShippingAddress',
        errorMessageFor: 'addressLine2',
        dataQa: 'qa-address2',
        autocomplete: 'address-line2',
        ariaLabel: replaceSpaceWithHyphen('address line 2'),
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'city',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'city',
        labelText: `${wording.cityLabel}*`,
        maxLength: '80',
        wrapperClassName: 'form-item-wrapper city',
        validationType: 'city',
        errorMessageFor: 'city',
        dataQa: 'qa-city',
        autocomplete: 'given-name',
        ariaLabel: wording.cityLabel,
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },

      {
        identity: 'state',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'state',
        labelText: `${wording.stateOrProvince}*`,
        maxLength: '80',
        wrapperClassName: 'form-item-wrapper state',
        validationType: 'state',
        errorMessageFor: 'state',
        dataQa: 'qa-state',
        autocomplete: 'state',
        ariaLabel: wording.stateLabel,
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'postalCode',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'postalCode',
        labelText: `${wording.zipCode}*`,
        maxLength: '6',
        wrapperClassName: 'form-item-wrapper zip-code',
        validationType: 'zipCode',
        errorMessageFor: 'zipCode',
        dataQa: 'qa-code',
        autocomplete: 'zip-code',
        ariaLabel: replaceSpaceWithHyphen(wording.zipCode),
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'country',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'country',
        labelText: `${wording.countryLabel}*`,
        maxLength: '80',
        wrapperClassName: 'form-item-wrapper country',
        validationType: 'country',
        errorMessageFor: 'country',
        dataQa: 'qa-country',
        autocomplete: 'country',
        ariaLabel: wording.countryLabel,
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
      {
        identity: 'phoneNumber',
        type: 'telephone',
        value: '',
        className: 'form-inputs',
        name: 'phoneNumber',
        labelText: `${wording.phoneNumber}*`,
        maxLength: '10',
        wrapperClassName: 'form-item-wrapper phone',
        validationType: 'telephone',
        errorMessageFor: 'phoneNumber',
        dataQa: 'qa-telephone',
        autocomplete: 'tel',
        ariaLabel: replaceSpaceWithHyphen(wording.phoneNumber),
        animatePlaceholder: false,
        onBlur: paymentWithBillingAddressFormState.handleBlur,
      },
    ],
  },
]