const isCheckOut = () => oneRouter.get('pathname') === '/checkout'

const handleDropdownChange = (args) => {
  console.log('[stories/forms] select dropdown onChange called', args)
}
export const wording = {
  header: 'Add Payment Details',
  addPaymentText: 'Add Payment',
  saveButtonText: 'Add Card',
  editTileButtonText: 'Save Changes',
  paymentOption: 'Payment Option',
  newPayment: 'New Payment',
  selectPaymentCards: 'Select Payment Cards',
  addPaymentDetails: 'Add Payment Details',
  paymentMethods: 'Payment Methods',
  paymentSelection: 'SELECT',
  fullName: 'FULL NAME',
  firstName: 'First Name*',
  lastName: 'Last Name*',
  creditCardNumber: 'CREDIT CARD NUMBER',
  cardNumber: 'Card Number*',
  cvv: 'CVV/CID',
  // security: application.isTabletOrSmaller ? 'security code' : 'security',
  defaultAgreeText: 'Set to Default Payment Method',
  expirationDate: 'EXPIRATION DATE',
  expirationMonth: 'Month*',
  expirationYear: 'Year*',
  billingAddress: 'BILLING ADDRESS',
  secondaryAddress: 'APT,SUITE',
  phoneNumber: 'PHONE NUMBER',
  firstNameLabel: 'First Name*',
  middleNameLabel: 'M.I',
  lastNameLabel: 'Last Name*',
  userNameLabel: 'User Name with Icon',
  addressLineOneLabel: 'Address Line 1*',
  addressLineTwoLabel: 'Address Line 2 / Company Name',
  addressLineOnePlaceHolder: 'Street address, PO box, etc.',
  addressLineTwoPlaceHolder: 'Apt., suit, unit, building, floor, etc.',
  addressPhoneNumberPlaceholder: '8015564545',
  shippingAddressBookText: 'Addresses',
  cityLabel: 'City*',
  saveAddressText: 'Save Changes',
  stateLabel: 'State / Province*',
  // postalCodeLabel: 'Postal Code*',
  postalCodeLabel: 'ZipCode*',
  phoneNumberLabel: 'Phone Number*',
  emailAddressLabel: 'Email Address For Order Confirmation*',
  countryLabel: 'Country*',
  name: 'Name*',
  lastname: 'Last Name*',
  // complete
  registerTitle: 'CREATE YOUR ACCOUNT',
  emailAddress: 'Email*',
  password: 'Password*',
  reenterPassword: 'Re Enter Password*',
  emailNotify: 'Send Me Emails About My Orders',
  emailNotifyLabel: 'Send me email notifications about my orders',
  createmyaccount: 'Create My Account',
  showPasswordLabel: 'Show password',
  showPassword: 'showPassword',
  chooseYourQuestionLabel: 'Your custom question',
  yourAnswerLabel: 'Answer*',
  securityQuestion: 'Security Question*',
  questionOne: 'Select your question',
  passwordText: 'Password must contain at least 6 characters.',
  selectYourQuestion: 'Select your question',
}

export const securityQuestionsData = {
  securityQuestion: 'SECURITY QUESTION',
  questions: [
    {
      label: 'What was your High School Mascot?',
      value: 'What was your High School Mascot?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'In what city or town did you meet your spouse/partner?',
      value: 'In what city or town did you meet your spouse/partner?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'What was the name of your first pet?',
      value: 'What was the name of your first pet?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: `What is your oldest child's nickname?`,
      value: `What is your oldest child's nickname?`,
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'What is the name of your favorite childhood friend?',
      value: 'What is the name of your favorite childhood friend?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'What was the make and model of your first car?',
      value: 'What was the make and model of your first car?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'In what city or town were you born?',
      value: 'In what city or town were you born?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'What was the name of your elementary / primary school?',
      value: 'What was the name of your elementary / primary school?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'What was your childhood nickname?',
      value: 'What was your childhood nickname?',
      isDisabled: false,
      isSelected: false,
    },
    {
      label: 'What was your favorite place to visit as a child?',
      value: 'What was your favorite place to visit as a child?',
      isDisabled: false,
      isSelected: false,
    },
    // {
    //   'label': 'Create your custom questions',
    //   'value': 'Create your custom questions',
    //   'isDisabled': false,
    //   'isCustom': true,
    // },
  ],
  maxQuesToShow: 3,
}

const renderQuestion = index => {
  return securityQuestionsData.questions[index]
}

const renderAllQuestions = () => {
  const questions = []
  for (let index = 0; index < securityQuestionsData.questions.length; index++) {
    questions.push(renderQuestion(index))
  }
  return questions
}

const securityQuestions = renderAllQuestions()

export const inputList = [
  {
    identity: 'firstname',
    type: 'text',
    value: '',
    className: 'address-first-name',
    name: 'firstname',
    labelText: wording.firstNameLabel,
    maxLength: '50',
    wrapperClassName: 'address-first-name-container',
    validationType: 'name',
    errorMessageFor: 'firstName',
    // onBlur: handleAddressFormBlur,
    // onFocus: handleAddressFormFocus,
    dataQa: 'qa-first-name',
    autocomplete: 'given-name',
    ariaLabel: wording.firstNameLabel,
  },
  {
    identity: 'middlename',
    type: 'text',
    value: '',
    className: 'address-middle-name',
    name: 'middlename',
    labelText: wording.middleNameLabel,
    maxLength: '50',
    validationType: 'emptyorname',
    errorMessageFor: 'middleName',
    wrapperClassName: 'address-middle-name-container',
    // onBlur: handleAddressFormBlur,
    // onFocus: handleAddressFormFocus,
    dataQa: 'qa-additional-name',
  },
  {
    identity: 'lastname',
    type: 'text',
    value: '',
    className: 'address-last-name',
    name: 'lastname',
    labelText: wording.lastNameLabel,
    maxLength: '50',
    wrapperClassName: 'address-last-name-container',
    validationType: 'name',
    errorMessageFor: 'lastName',
    // onBlur: handleAddressFormBlur,
    // onFocus: handleAddressFormFocus,
    dataQa: 'qa-last-name',
    autocomplete: 'family-name',
  },
  {
    identity: 'username',
    type: 'text',
    value: '',
    className: 'user-name',
    name: 'username',
    labelText: wording.userNameLabel,
    maxLength: '50',
    wrapperClassName: 'user-name-container',
    validationType: 'name',
    errorMessageFor: 'username',
    dataQa: '',
    autocomplete: 'given-name',
    ariaLabel: '',
    icon: {
      breedType: 'account',
      type: '',
      breed: 'solid',
      className: '',
      position: '', // left
    },
  },
  {
    type: 'groupElements',
    validationType: 'groupElements',
    className: 'address-one-container',
    name: 'addressOneContainer',
    elementList: [
      // @todo !!! UGH NEED BROWSER AUTOCOMPLETE - form types are wrong...
      // {
      //   identity: 'addresslineone',
      //   type: 'text',
      //   value: '',
      //   className: 'address-line-one',
      //   name: 'addressline1',
      //   animatePlaceholder: false,
      //   autocomplete: true,
      //   placeholderText: wording.addressLineOnePlaceHolder,
      //   maxLength: '80',
      //   wrapperClassName: 'address-line-one-container',
      //   validationType: 'required',
      //   errorMessageFor: 'required',
      //   onBlur: handleAddressFormBlur,
      //   onFocus: handleAddressFormFocus,
      // },
      {
        identity: 'addresslineone',
        type: 'googleAutoSugggest',
        value: '',
        className: 'address-line-one',
        name: 'addressline1',
        labelText: wording.addressLineOneLabel,
        animatePlaceholder: false,
        placeholderText: wording.addressLineOnePlaceHolder,
        maxLength: '256',
        wrapperClassName: 'address-line-one-container',
        validationType: 'required',
        errorMessageFor: 'addressLine1',
        // onBlur: handleAddressFormBlur,
        // onFocus: handleAddressFormFocus,
        dataQa: 'qa-address1',
        autocomplete: 'shipping street-address',
      },
    ],
  },
  {
    type: 'groupElements',
    validationType: 'groupElements',
    className: 'address-two-container',
    name: 'addressTwoContainer',
    elementList: [
      {
        identity: 'addresslinetwo',
        type: 'text',
        value: '',
        className: 'address-line-two',
        name: 'addressline2',
        labelText: wording.addressLineTwoLabel,
        animatePlaceholder: false,
        placeholderText: wording.addressLineTwoPlaceHolder,
        maxLength: '256',
        validationType: 'none',
        wrapperClassName: 'address-line-two-container',
        errorMessageFor: 'addressLine2',
        // onBlur: handleAddressFormBlur,
        // onFocus: handleAddressFormFocus,
        dataQa: 'qa-address2',
      },
    ],
  },
  {
    type: 'groupElements',
    validationType: 'groupElements',
    className: 'city-state-postal-container',
    name: 'cityStatePostalContainer',
    elementList: [
      {
        identity: 'city',
        type: 'text',
        value: '',
        className: 'address-city',
        name: 'city',
        maxLength: '189',
        labelText: wording.cityLabel,
        wrapperClassName: 'address-city-container',
        validationType: 'city',
        errorMessageFor: 'city',
        // onBlur: handleAddressFormBlur,
        // onFocus: handleAddressFormFocus,
        dataQa: 'qa-city',
        autocomplete: 'shipping locality',
      },
      {
        identity: 'state',
        type: 'text',
        value: '',
        className: 'addresse-state',
        name: 'state',
        maxLength: '2',
        labelText: wording.stateLabel,
        wrapperClassName: 'address-state-container',
        validationType: 'alphabet',
        errorMessageFor: 'state',
        // onBlur: handleAddressFormBlur,
        // onFocus: handleAddressFormFocus,
        dataQa: 'qa-state',
        autocomplete: 'shipping region',
      },
      {
        identity: 'postalcode',
        className: 'address-postalcode',
        type: 'text',
        value: '',
        name: 'zipcode',
        maxLength: '10',
        labelText: wording.postalCodeLabel,
        wrapperClassName: 'address-postalcode-container',
        validationType: 'zipcode',
        errorMessageFor: 'postalCode',
        // onBlur: handleAddressFormBlur,
        // onFocus: handleAddressFormFocus,
        dataQa: 'qa-code',
        autocomplete: 'shipping postal-code',
      },
    ],
  },
  {
    identity: 'country',
    className: 'address-country',
    type: 'text',
    value: '',
    name: 'country',
    maxLength: '90',
    labelText: wording.countryLabel,
    wrapperClassName: 'address-country-container',
    validationType: 'alphabet',
    errorMessageFor: 'country',
    // onBlur: handleAddressFormBlur,
    // onFocus: handleAddressFormFocus,
    dataQa: 'qa-country',
    autocomplete: 'shipping country',
  },
  {
    identity: 'phonenumber',
    // telephone
    className: 'address-phone-number',
    type: 'telephone',
    value: '',
    // telephone
    name: 'phonenumber',
    maxLength: '15',
    labelText: wording.phoneNumberLabel,
    animatePlaceholder: false,
    placeholderText: wording.addressPhoneNumberPlaceholder,
    wrapperClassName: 'address-phone-number-container',
    validationType: 'telephone',
    errorMessageFor: 'phoneNumber',
    // onBlur: handleAddressFormBlur,
    // onFocus: handleAddressFormFocus,
    dataQa: 'qa-telephone',
    autocomplete: 'tel',
  },
  {
    identity: 'email',
    type: 'text',
    value: '',
    className: 'email-address',
    name: 'email',
    maxLength: '254',
    labelText: wording.emailAddressLabel,
    wrapperClassName: 'email-address-container',
    validationType: 'email',
    errorMessageFor: 'email',
    // onBlur: handleAddressFormBlur,
    // onFocus: handleAddressFormFocus,
    dataQa: 'qa-email',
    autocomplete: 'email',
  },
  {
    type: 'groupElements',
    // className: classes.nameContainer,
    name: 'fullNameContainer',
    validationType: 'groupElements',
    elementList: [
      {
        identity: 'firstName',
        value: '',
        name: 'firstName',
        labelText: wording.firstName,
        labelClass: 'first-name-label',
        // className: classes.firtName,
        // wrapperClassName: classes.firstNameWrapper,
        animatePlaceholder: false,
        maxLength: 50,
        validationType: 'name',
        errorMessageFor: 'firstName',
        // onBlur: handlePaymentFormBlur,
        // onFocus: handlePaymentFormFocus,
        autocomplete: 'cc-name',
        dataQa: 'qa-payment-first-name',
      },
      {
        identity: 'lastName',
        value: '',
        name: 'lastName',
        labelText: wording.lastName,
        // className: classes.lastName,
        // wrapperClassName: classes.lastNameWrapper,
        animatePlaceholder: false,
        maxLength: 50,
        validationType: 'name',
        errorMessageFor: 'lastName',
        // onBlur: handlePaymentFormBlur,
        // onFocus: handlePaymentFormFocus,
        autocomplete: 'cc-family-name',
        dataQa: 'qa-payment-last-name',
      },
    ],
  },
  {
    type: 'groupElements',
    // className: classes.cardDetailsContainer,
    name: 'cardDetailsContainer',
    validationType: 'groupElements',
    elementList: [
      {
        identity: 'cardNumber',
        type: 'cardType',
        value: '',
        name: 'cardNumber',
        labelText: wording.cardNumber,
        // className: classes.cardNumber,
        // wrapperClassName: classes.cardNumberWrapper,
        animatePlaceholder: false,
        maxLength: 16,
        validationType: 'creditCard',
        errorMessageFor: 'creditCard',
        // onBlur: handlePaymentFormBlur,
        // onFocus: handlePaymentFormFocus,
        autocomplete: 'cc-number',
        dataQa: 'qa-payment-card-no',
      },
      {
        identity: 'expiryMonth',
        // @todo type
        // @todo blocked with textbox render so reverting back the type number
        type: 'expirydate',
        name: 'expirationMonth',
        value: '',
        labelText: wording.expirationMonth,
        // className: classes.expiryMonth,
        // wrapperClassName: classes.expiryMonthWrapper,
        animatePlaceholder: false,
        minLength: '2',
        maxLength: '2',
        validationType: 'month',
        errorMessageFor: 'expirationMonth',
        // onBlur: handlePaymentFormBlur,
        // onFocus: handlePaymentFormFocus,
        autocomplete: 'cc-exp-month',
        dataQa: 'qa-payment-month',
      },
      {
        identity: 'expiryYear',
        name: 'expirationYear',
        // @todo type
        // @todo blocked with textbox render so reverting back the type number
        type: 'expirydate',
        maxLength: '4',
        minLength: '2',
        value: '',

        labelText: wording.expirationYear,
        // className: classes.expiryYear,
        // wrapperClassName: classes.expiryYearWrapper,
        animatePlaceholder: false,
        validationType: 'year',
        errorMessageFor: 'expirationYear',
        // onBlur: handlePaymentFormBlur,
        // onFocus: handlePaymentFormFocus,
        autocomplete: 'cc-exp-year',
        dataQa: 'qa-payment-year',
      },
    ],
  },

  {
    identity: 'password',
    type: 'password',
    value: '',
    className: 'register-password',
    name: 'password',
    labelText: wording.password,
    maxLength: 90,
    wrapperClassName: 'register-password-container',
    // doesMatchesUserName: this.doesMatchesUserName,
    validationType: 'password',
    errorMessageFor: 'password',
    dataQa: 'qa-create-account-password',
  },
  {
    type: 'label',
    name: 'password-rules',
    labelText: wording.passwordText,
    classes: 'password-rules-label',
    dataQa: 'password-rules-label',
  },
  {
    identity: 'confirmPassword',
    type: 'password',
    value: '',
    className: 'register-confirm-password',
    name: 'confirmPassword',
    labelText: wording.reenterPassword,
    maxLength: 90,
    wrapperClassName: 'register-confirm-password-container',
    validationType: 'confirmPassword',
    // onFormValidation: this.validateConfirmPassword,
    errorMessageFor: 'confirmPassword',
    dataQa: 'qa-create-account-confirm-password',
  },
  {
    type: 'select',
    value: '',
    className: 'security-question-1',
    name: 'securityquestion1',
    isFormView: true,
    labelText: wording.securityQuestion,
    label: wording.selectYourQuestion,
    options: securityQuestions,
    validationType: 'required',
    errorMessageFor: 'selectSecurityQuestion',
    onDropdownChange: handleDropdownChange,
  },
  {
    isHidden: true,
    type: 'text',
    value: '',
    className: 'custom-security-question',
    name: 'custom-security-question-1',
    maxLength: 60,
    validationType: 'required',
    errorMessageFor: 'customSecurityQuestion',
    placeholderText: wording.chooseYourQuestionLabel,
  },
  {
    type: 'text',
    value: '',
    className: 'security-question-1-answer',
    name: 'securityanswer1',
    labelText: wording.yourAnswerLabel,
    maxLength: 20,
    wrapperClassName: 'security-question-1-answer-wrapper',
    validationType: 'required',
    errorMessageFor: 'securityQuestionAnswer',
    dataQa: 'qa-create-account-answers',
    autocomplete: 'off',
  },
  {
    identity: 'notifyMe',
    type: 'checkbox',
    name: wording.emailNotify,
    checkBoxClass: 'notify-me-input',
    labelClass: 'notify-me-input-label',
    classes: 'label-wrap-checkbox',
    labelText: wording.emailNotify,
    dataQa: 'qa-create-account-notifyme',
  },
  {
    identity: 'makeDefaultCard',
    type: 'checkbox',
    label: wording.defaultAgreeText,
    // checkBoxClass: classes.checkBoxWrapper,
    // labelClass: classes.checkBoxLabel,
    name: 'makeDefaultCard',
    isSelected: true,
    dataQa: 'qa-set-default-checkbox-label',
  },
]