import { compose, sortBy, reverse, indexBy, partial, prop, pipe, toLower } from 'ramda'

const search = (query, members) => {
  if (query === '' || query === 'all') {
    return members
  } else {
    const normalizedQuery = query.toLowerCase()
    return members.filter(
      (member) => member.name.toLowerCase().includes(normalizedQuery)
    )
  }
}

const filterByStatus = (status, members) => {
  if (status === '' || status === 'all') {
    return members
  } else {
    return members.filter(
      (member) => member.status === status
    )
  }
}

const filterByRole = (role, rolesByDisplayname, members) => {
  const getRoleNameFromDisplayName = (_role) => rolesByDisplayname[_role].name

  if (role === '' || role === 'all') {
    return members
  } else {
    return members.filter(
      (member) => getRoleNameFromDisplayName(member.role) === role
    )
  }
}

const sort = (sortInfo, members) => {
  if (sortInfo.columnName === '') {
    return members
  } else {
    const sortColumn = sortInfo.columns[sortInfo.columnName]
    const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members)

    return sortInfo.isAscending ?
      sortedMembers :
      reverse(sortedMembers)
    }
}

export default {
  name: 'members-list',

  props: {
    members: Array,
    choices: Array,
  },

  data: function () {
    const alphabeticalSort = (attr, members) => {
      const lowercaseProp = compose(toLower, prop(attr))
      return sortBy(lowercaseProp, members)
    }

    const numericSort = (attr, members) => sortBy(prop(attr), members)

    const columns = [
      {
        displayName: 'Name',
        attr: 'name',
        sortFunc: alphabeticalSort
      },
      {
        displayName: 'Environments',
        attr: 'num_env',
        sortFunc: numericSort
      },
      {
        displayName: 'Status',
        attr: 'status',
        sortFunc: alphabeticalSort
      },
      {
        displayName: 'Workspace Role',
        attr: 'role',
        sortFunc: alphabeticalSort
      },
    ]

    return {
      searchValue: '',
      status: '',
      role: '',
      rolesByDisplayName: indexBy(prop('display_name'), this.choices),
      sortInfo: {
        columnName: '',
        isAscending: true,
        columns: indexBy(prop('displayName'), columns)
      },
    }
  },

  computed: {
    searchedList: function () {
      return pipe(
        partial(search, [this.searchValue]),
        partial(filterByStatus, [this.status]),
        partial(filterByRole, [this.role, this.rolesByDisplayName]),
        partial(sort, [this.sortInfo])
      )(this.members)
    }
  },

  methods: {
    updateSort: function(columnName) {
      // clicking a column twice toggles ascending / descending
      if (columnName === this.sortInfo.columnName) {
        this.sortInfo.isAscending = !this.sortInfo.isAscending
      }

      this.sortInfo.columnName = columnName
    },
  }
}