<template>
  <div class="screen-unset">
    <welcome-screen v-if="isWelcomeScreen"></welcome-screen>
    <call-screen v-if="isCallScreen"></call-screen>
    <message-screen v-if="isMessageScreen"></message-screen>
    <email-screen v-if="isEmailScreen"></email-screen>
    <chat-screen v-if="isChatScreen"></chat-screen>
    <business-info></business-info>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
  ROOT_SELECT_SCREEN_INFO,
  SCREEN_WELCOME,
  SCREEN_CALL,
  SCREEN_TEXT_MESSAGE,
  SCREEN_EMAIL,
  SCREEN_CHAT,
} from '../constants';
import Card from './Card.vue';
import WelcomeScreen from './WelcomeScreen.vue';
import CallScreen from './CallScreen.vue';
import MessageScreen from './MessageScreen.vue';
import EmailScreen from './EmailScreen.vue';
import ChatScreen from './ChatScreen.vue';
import BusinessInfo from './BusinessInfo.vue';
export default {
  components: {
    Card,
    WelcomeScreen,
    CallScreen,
    MessageScreen,
    EmailScreen,
    ChatScreen,
    BusinessInfo,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters('root', {
      screnInfo: ROOT_SELECT_SCREEN_INFO,
    }),
    isWelcomeScreen() {
      return this.screnInfo.name === SCREEN_WELCOME;
    },
    isCallScreen() {
      return this.screnInfo.name === SCREEN_CALL;
    },
    isMessageScreen() {
      return this.screnInfo.name === SCREEN_TEXT_MESSAGE;
    },
    isEmailScreen() {
      return this.screnInfo.name === SCREEN_EMAIL;
    },
    isChatScreen() {
      return this.screnInfo.name === SCREEN_CHAT;
    },
  },
};
</script>