<template>
  <div
    class="btn-group btn-group-lg w-100 mobile_button_select_group"
    role="group"
    aria-label="Basic example"
    v-if="isMobileView"
  >
    <button
      type="button"
      class="btn btn-primary"
      :class="{ active: rootState.mobileSelectedScreen === SCREEN_LEFT }"
      @click="setMobileScreen(SCREEN_LEFT)"
    >
      Cards
    </button>
    <button
      type="button"
      class="btn btn-primary"
      @click="setMobileScreen(SCREEN_CENTER)"
      :class="{ active: rootState.mobileSelectedScreen === SCREEN_CENTER }"
      :disabled="rootState.selectedLeadID === null"
    >
      Interactions
    </button>
    <button
      type="button"
      class="btn btn-primary"
      @click="setMobileScreen(SCREEN_RIGHT)"
      :class="{ active: rootState.mobileSelectedScreen === SCREEN_RIGHT }"
      :disabled="
        !(rootState.showProfileScreen && rootState.leadProfileData !== null)
      "
    >
      Details
    </button>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import {
  ROOT_ACTION_SET_MOBILE_SCREEN,
  SCREEN_LEFT,
  SCREEN_CENTER,
  SCREEN_RIGHT,
  ROOT_GETTER_ISMOBILE_VIEW,
  ROOT_GETTER,
} from '../constants';
export default {
  data() {
    return {
      SCREEN_LEFT,
      SCREEN_CENTER,
      SCREEN_RIGHT,
    };
  },
  methods: {
    ...mapActions('root', {
      setMobileScreen: ROOT_ACTION_SET_MOBILE_SCREEN,
    }),
  },
  computed: {
    ...mapGetters('root', {
      rootState: ROOT_GETTER,
      isMobileView: ROOT_GETTER_ISMOBILE_VIEW,
    }),
  },
};
</script>