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

export const inputList = [
  {
    identity: 'firstName',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'firstName',
    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: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    identity: 'middleName',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'middleName',
    labelText: wording.middleNameLabel,
    maxLength: '100',
    wrapperClassName: 'form-item-wrapper middle-name',
    validationType: 'emptyOrName',
    dataQa: 'qa-additional-name',
    autocomplete: 'given-name',
    ariaLabel: replaceSpaceWithHyphen(wording.middleNameLabel),
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    identity: 'lastName',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'lastName',
    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: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    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',
    validationType: 'shippingAddress',
    errorMessageFor: 'addressLine1',
    dataQa: 'qa-address1',
    autocomplete: 'address-line1',
    ariaLabel: replaceSpaceWithHyphen('address line 1'),
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    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('company name'),
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    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: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    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: 'given-name',
    ariaLabel: wording.stateLabel,
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    identity: 'postalCode',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'postalCode',
    labelText: `${wording.postalCode}*`,
    maxLength: '80',
    wrapperClassName: 'form-item-wrapper postal-code',
    validationType: 'zipCode',
    errorMessageFor: 'zipCode',
    dataQa: 'qa-code',
    autocomplete: 'postal-code',
    ariaLabel: replaceSpaceWithHyphen(wording.postalCode),
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    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: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    identity: 'telephone',
    type: 'telephone',
    value: '',
    className: 'form-inputs',
    name: 'telephone',
    labelText: `${wording.phoneNumber}*`,
    maxLength: '80',
    wrapperClassName: 'form-item-wrapper phone',
    validationType: 'telephone',
    errorMessageFor: 'phoneNumber',
    dataQa: 'qa-telephone',
    autocomplete: 'tel',
    ariaLabel: wording.telephone,
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    identity: 'email',
    type: 'text',
    value: '',
    className: 'form-inputs',
    name: 'emailAddress',
    labelText: `${wording.emailForOrderConfirmation}*`,
    wrapperClassName: 'form-item-wrapper email',
    validationType: 'email',
    errorMessageFor: 'email',
    dataQa: 'qa-email',
    autocomplete: 'email',
    ariaLabel: wording.emailForOrderConfirmation,
    animatePlaceholder: false,
    onBlur: shippingAddressFormState.handleShippingAddressFormBlur,
  },
  {
    type: 'label',
    name: 'required',
    labelText: `* ${wording.requiredLabel}`,
    className: 'required',
    wrapperClass: 'form-item-wrapper required-label',
    dataQa: 'qa-required',
  },
]