<template>
  <div>
    <div class="d-lg-flex panel-container">
      <work-list v-if="isVisible(SCREEN_LEFT)"></work-list>
      <work-view v-if="isVisible(SCREEN_CENTER)"></work-view>
      <lead-view v-if="isVisible(SCREEN_RIGHT)"></lead-view>
    </div>
    <mobile-tabs></mobile-tabs>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import {
  ROOT_ACTION_SET_WINDOW_WIDTH,
  ROOT_GETTER_ISMOBILE_VIEW,
  ROOT_ACTION_SET_MOBILE_SCREEN,
  SCREEN_LEFT,
  SCREEN_CENTER,
  SCREEN_RIGHT,
  ROOT_GETTER_GET_MOBILE_SCREEN_SELECTED,
  TASK_ACTION_GET_TASK_LIST,
} from './constants';
import VueDraggableResizable from 'vue-draggable-resizable';
import VueResizable from 'vue-resizable';
import LeadView from './components/LeadView.vue';
import ChatView from './components/ChatView.vue';
import WorkList from './components/WorkList.vue';
import MobileTabs from './components/MobileTabs.vue';
import WorkView from './components/WorkView.vue';
export default {
  components: {
    VueDraggableResizable,
    VueResizable,
    LeadView,
    ChatView,
    WorkList,
    MobileTabs,
    WorkView,
  },
  data() {
    return {
      SCREEN_LEFT,
      SCREEN_CENTER,
      SCREEN_RIGHT,
    };
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    });
    this.getAllTasks();
  },

  methods: {
    ...mapActions('root', {
      setWindowWidth: ROOT_ACTION_SET_WINDOW_WIDTH,
      setMobileScreen: ROOT_ACTION_SET_MOBILE_SCREEN,
    }),
    ...mapActions('tasks', {
      getAllTasks: TASK_ACTION_GET_TASK_LIST,
    }),
    onResize() {
      this.setWindowWidth(window.innerWidth);
    },
    isVisible(screenName) {
      if (!this.isMobileView) {
        return true;
      }
      if (
        screenName === this.SCREEN_LEFT &&
        this.selectedMobileScreen === SCREEN_LEFT
      ) {
        return true;
      }
      if (
        screenName === this.SCREEN_CENTER &&
        this.selectedMobileScreen === SCREEN_CENTER
      ) {
        return true;
      }
      if (
        screenName === this.SCREEN_RIGHT &&
        this.selectedMobileScreen === SCREEN_RIGHT
      ) {
        return true;
      }
      return false;
    },
  },
  computed: {
    ...mapGetters('root', {
      isMobileView: ROOT_GETTER_ISMOBILE_VIEW,
      selectedMobileScreen: ROOT_GETTER_GET_MOBILE_SCREEN_SELECTED,
    }),
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
};
</script>