text: const util = require('util')
  
  module.exports = {
    url: function () {
      return this.api.launchUrl + '/accounts'
    },
  
    commands: {
      navigateAndWaitUntilMounted: async function () {
        const url = this.url()
        return this.navigate(url).waitForElementVisible('@accountsApp')
      },
      accountsList: function () {
        return this.waitForElementVisible('@accountsListTable')
      },
      isUserListed: async function (username) {
        const usernameInTable = util.format(this.elements.userInAccountsList.selector, username)
        await this.useXpath().waitForElementVisible(usernameInTable)
        return true
      },
      isUserDeleted: async function (username) {
        const usernameInTable = util.format(this.elements.userInAccountsList.selector, username)
        await this.useXpath().waitForElementNotPresent(usernameInTable)
        return true
      },
  
      selectRole: function (username, role) {
        const roleTrigger =
            util.format(this.elements.rowByUsername.selector, username) +
            this.elements.rolesDropdownTrigger.selector
        const roleSelector =
          util.format(this.elements.rowByUsername.selector, username) +
          util.format(this.elements.roleInRolesDropdown.selector, role)
  
        return this
          .initAjaxCounters()
          .waitForElementVisible(roleTrigger)
          .click(roleTrigger)
          .waitForElementVisible(roleSelector)
          .click(roleSelector)
          .waitForOutstandingAjaxCalls()
      },
  
      checkUsersRole: function (username, role) {
        const roleSelector =
          util.format(this.elements.rowByUsername.selector, username) +
          util.format(this.elements.currentRole.selector, role)
  
        return this.useXpath().expect.element(roleSelector).to.be.visible
      },
  
      setUserActivated: function (usernames, activated) {
        this.selectUsers(usernames)
        return this.click(activated === true ? this.elements.batchActionEnable : this.elements.batchActionDisable)
      },
  
      checkUsersStatus: function (usernames, status) {
        usernames = usernames.split(',')
  
        for (const username of usernames) {
          const indicatorSelector =
            util.format(this.elements.rowByUsername.selector, username) +
            util.format(this.elements.statusIndicator.selector, status)
  
          this.useXpath().waitForElementVisible(indicatorSelector)
        }
  
        return this
      },
  
      deleteUsers: function (usernames) {
        this.selectUsers(usernames)
        return this.click(this.elements.batchActionDelete)
          .waitForElementVisible(this.elements.batchActionDeleteConfirm)
          .click(this.elements.batchActionDeleteConfirm)
      },
  
      selectUsers: function (usernames) {
        usernames = usernames.split(',')
  
        for (const username of usernames) {
          const checkboxSelector =
            util.format(this.elements.rowByUsername.selector, username) +
            this.elements.rowCheckbox.selector
  
          this.useXpath().click(checkboxSelector)
        }
  
        return this
      },
  
      createUser: function (username, email, password) {
        return this
          .click('@accountsNewAccountTrigger')
          .setValue('@newAccountInputUsername', username)
          .setValue('@newAccountInputEmail', email)
          .setValue('@newAccountInputPassword', password)
          .click('@newAccountButtonConfirm')
      }
    },
  
    elements: {
      accountsApp: {
        selector: '#accounts-app'
      },
      accountsListTable: {
        selector: '#accounts-user-list'
      },
      userInAccountsList: {
        selector: '//table[@id="accounts-user-list"]//td[text()="%s"]',
        locateStrategy: 'xpath'
      },
      rowByUsername: {
        selector: '//table[@id="accounts-user-list"]//td[text()="%s"]/ancestor::tr',
        locateStrategy: 'xpath'
      },
      currentRole: {
        selector: '//span[contains(@class, "accounts-roles-current-role") and normalize-space()="%s"]',
        locateStrategy: 'xpath'
      },
      roleInRolesDropdown: {
        selector: '//span[contains(@class, "accounts-roles-dropdown-role")]/label[normalize-space()="%s"]',
        locateStrategy: 'xpath'
      },
      rolesDropdownTrigger: {
        selector: '//button[contains(@class, "accounts-roles-select-trigger")]',
        locateStrategy: 'xpath'
      },
      loadingAccountsList: {
        selector: '#accounts-list-loader'
      },
      loadingAccountsListFailed: {
        selector: '#accounts-list-loading-failed'
      },
      rowCheckbox: {
        selector: '//input[contains(@class, "oc-checkbox")]',
        locateStrategy: 'xpath'
      },
      batchActionDisable: {
        selector: '#accounts-batch-action-disable'
      },
      batchActionEnable: {
        selector: '#accounts-batch-action-enable'
      },
      batchActionDelete: {
        selector: '#accounts-batch-action-delete'
      },
      batchActionDeleteCancel: {
        selector: '#accounts-batch-action-delete-cancel'
      },
      batchActionDeleteConfirm: {
        selector: '#accounts-batch-action-delete-confirm'
      },
      statusIndicator: {
        selector: '//span[contains(@class, "accounts-status-indicator-%s")]',
        locateStrategy: 'xpath'
      },
      newAccountInputUsername: {
        selector: '#accounts-new-account-input-username'
      },
      newAccountInputEmail: {
        selector: '#accounts-new-account-input-email'
      },
      newAccountInputPassword: {
        selector: '#accounts-new-account-input-password'
      },
      newAccountButtonConfirm: {
        selector: '#accounts-new-account-button-confirm'
      },
      accountsNewAccountTrigger: {
        selector: '#accounts-new-account-trigger'
      }
    }
  }
  