<template>
  <div
    class="btn-group btn-group-lg w-100"
    role="group"
    aria-label="Basic example"
    v-if="isMobileView"
  >
    <button
      type="button"
      class="btn btn-primary"
      :class="{ active: selectedMobileScreen === SCREEN_LEFT }"
      @click="setMobileScreen(SCREEN_LEFT)"
    >
      Left
    </button>
    <button
      type="button"
      class="btn btn-primary"
      @click="setMobileScreen(SCREEN_CENTER)"
      :class="{ active: selectedMobileScreen === SCREEN_CENTER }"
    >
      Center
    </button>
    <button
      type="button"
      class="btn btn-primary"
      @click="setMobileScreen(SCREEN_RIGHT)"
      :class="{ active: selectedMobileScreen === SCREEN_RIGHT }"
    >
      Right
    </button>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import {
  ROOT_GETTER_ISMOBILE_VIEW,
  ROOT_ACTION_SET_MOBILE_SCREEN,
  SCREEN_LEFT,
  SCREEN_CENTER,
  SCREEN_RIGHT,
  ROOT_GETTER_GET_MOBILE_SCREEN_SELECTED,
} from '../constants';
export default {
  data() {
    return {
      SCREEN_LEFT,
      SCREEN_CENTER,
      SCREEN_RIGHT,
    };
  },
  methods: {
    ...mapActions('root', {
      setMobileScreen: ROOT_ACTION_SET_MOBILE_SCREEN,
    }),
  },
  computed: {
    ...mapGetters('root', {
      isMobileView: ROOT_GETTER_ISMOBILE_VIEW,
      selectedMobileScreen: ROOT_GETTER_GET_MOBILE_SCREEN_SELECTED,
    }),
  },
};
</script>