import Popover from '../popover/popover.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import RichContent from '../rich_content/rich_content.jsx'
import { map } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faRightToBracket,
  faUserPen
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faRightToBracket,
  faUserPen
)

const AccountSwitcher = {
  components: {
    Popover,
    UserAvatar,
    RichContent
  },
  computed: {
    currentUser () {
      return this.$store.state.users.currentUser
    },
    accounts () {
      return map(Object.keys(this.$store.state.oauth.userToken), username => (
        this.$store.getters.findUser(username)
      ))
    },
    registrationOpen () {
      return this.$store.state.instance.registrationOpen
    }
  },
  methods: {
    login () {
      this.$store.commit('beginAccountSwitch')
      this.$router.push({ name: 'login' })
    },
    switchAccount (username, token) {
      // don't switch to same user
      if (username !== this.currentUser.screen_name) {
        this.$store.commit('beginAccountSwitch')
        this.$store.dispatch('loginUser', this.$store.state.oauth.userToken[username]).then(() => {
          this.$router.push({ name: 'friends' })
        })
      }
    }
  }
}

export default AccountSwitcher