import { wording } from 'src/words'

const wordings = {
  weeklyEmailLabel: 'weekly emails with new sales and special offers',
  allEmailLabel: 'all emails about sales and special offers',
  sendSaleNotifications: 'send sale notifications',
  sendAllNotifications: 'send all notifications',
}

const MyProfileInputList = [
  {
    identifier: 'first-name',
    type: 'text',
    value: '',
    name: 'firstName',
    labelText: `${wording.firstNameLabel}*`,
    className: 'form-input first-name',
    wrapperClassName: 'form-input-wrapper',
    maxLength: '50',
    validationType: 'name',
    errorMessageFor: 'firstName',
    autocomplete: 'given-name',
    ariaLabel: wording.firstNameLabel,
    dataQa: 'qa-first-name',
    animatePlaceholder: false,
  },
  {
    identifier: 'last-name',
    type: 'text',
    value: '',
    name: 'lastName',
    labelText: `${wording.lastNameLabel}*`,
    className: 'form-input last-name',
    wrapperClassName: 'form-input-wrapper',
    maxLength: '50',
    validationType: 'name',
    errorMessageFor: 'lastName',
    autocomplete: 'given-name',
    ariaLabel: wording.lastNameLabel,
    dataQa: 'qa-last-name',
    animatePlaceholder: false,
  },
  {
    identifier: 'email',
    type: 'text',
    value: '',
    name: 'email',
    labelText: `${wording.emailLabel}*`,
    className: 'form-input email-address',
    wrapperClassName: 'form-input-wrapper email-address-wrapper',
    maxLength: '254',
    validationType: 'email',
    errorMessageFor: 'email',
    autocomplete: 'given-email',
    ariaLabel: wording.emailLabel,
    dataQa: 'qa-my-profile-email',
    animatePlaceholder: false,
  },
  {
    identity: 'phone-number',
    type: 'telephone',
    value: '',
    className: 'form-input phone-number',
    name: 'phoneNumber',
    labelText: `${wording.phoneNumber}*`,
    maxLength: '10',
    wrapperClassName: 'form-input-wrapper phone-number-wrapper',
    validationType: 'telephone',
    errorMessageFor: 'phoneNumber',
    dataQa: 'qa-telephone',
    autocomplete: 'tel',
    ariaLabel: wording.phoneNumber,
    animatePlaceholder: false,
  },
]

const emailPreferenceInputList = [
  {
    identity: 'weeklyEmail',
    type: 'checkbox',
    label: wordings.allEmailLabel,
    className: 'email-preference-option',
    name: 'weeklyEmailPreference',
    isSelected: false,
    bgColor: 'var(--color-blue)',
    ariaLabel: wordings.allEmailLabel,
  },
  {
    identity: 'allEmail',
    type: 'checkbox',
    label: wordings.weeklyEmailLabel,
    className: 'email-preference-option all-email-option',
    name: 'allEmailPreference',
    isSelected: true,
    bgColor: 'var(--color-blue)',
  },
]

const smsNotificationInputList = [
  {
    type: 'groupElements',
    validationType: 'groupElements',
    className: 'group-container',
    name: 'group-container',
    elementList: [
      {
        identity: 'phone-number',
        type: 'telephone',
        value: '',
        className: 'input-form phone-number',
        name: 'phoneNumber',
        labelText: wording.phoneNumber,
        maxLength: '50',
        wrapperClassName: 'input-form-wrapper phone-number-wrapper',
        validationType: 'emptyOrTelephone',
        errorMessageFor: 'phoneNumber',
        dataQa: 'qa-telephone',
        autocomplete: 'tel',
        ariaLabel: wording.phoneNumber,
        animatePlaceholder: false,
      },
      {
        identity: 'extension',
        type: 'text',
        value: '',
        className: 'input-form extension',
        name: 'extension',
        labelText: wording.extension,
        maxLength: '50',
        wrapperClassName: 'input-form-wrapper extension-wrapper',
        validationType: 'emptyOrNumber',
        dataQa: 'qa-telephone-ext',
        ariaLabel: wording.extension,
        animatePlaceholder: false,
      },
    ],
  },
  {
    identity: 'send-sale-notifications',
    type: 'checkbox',
    label: wordings.sendSaleNotifications,
    className: 'input-form-wrapper send-sale-wrapper',
    name: 'sendSaleNotifications',
    bgColor: 'var(--color-blue)',
    dataQa: 'qa-send-sale-notifications',
    ariaLabel: wordings.sendSaleNotifications,
  },
  {
    identity: 'send-all-notifications',
    type: 'checkbox',
    label: wordings.sendAllNotifications,
    className: 'input-form-wrapper send-all-wrapper',
    name: 'sendAllNotifications',
    isSelected: true,
    bgColor: 'var(--color-blue)',
    dataQa: 'qa-send-all-notifications',
    ariaLabel: wordings.sendAllNotifications,
  },
]

export {
  MyProfileInputList,
  emailPreferenceInputList,
  smsNotificationInputList,
}