<template>
  <div class="chat" :style="rootStyles">
    <div
      :class="`chat-icn ${!widgetIsOpen ? '' : 'close-main'}`"
      :style="themeStyles"
      @click="setVisibility(!widgetIsOpen)"
    >
      <img :src="widgetIsOpen ? ChatCloseIcon : ChatIcon" />
      <div class="green-icn"></div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import ChatIcon from '../../../../styles/2021-theme/images/comm_widget/chat-icn.png';
import ChatCloseIcon from '../../../../styles/2021-theme/images/comm_widget/close.png';

import { mapGetters, mapActions } from 'vuex';
import {
  ROOT_SELECT_WIDGET_POSITION,
  ROOT_ACTION_SET_WIDGET_VISIBILITY,
  ROOT_SELECT_IS_OPEN,
  ROOT_SELECT_IS_MOBILE_VIEW,
  ROOT_SELECT_WIDGET_THEME_COLOR,
} from '../constants';

export default {
  data() {
    return {
      ChatIcon,
      ChatCloseIcon,
    };
  },
  computed: {
    ...mapGetters('root', {
      position: ROOT_SELECT_WIDGET_POSITION,
      widgetIsOpen: ROOT_SELECT_IS_OPEN,
      isMobileView: ROOT_SELECT_IS_MOBILE_VIEW,
      themeColor: ROOT_SELECT_WIDGET_THEME_COLOR,
    }),
    themeStyles() {
      return {
        background: `${this.themeColor} 0% 0% no-repeat padding-box`,
      };
    },
    rootStyles() {
      if (this.isMobileView) {
        return {};
      }
      if (this.position === 'LEFT') {
        return {
          left: '100px',
        };
      }
      return {
        right: '100px',
      };
    },
  },
  methods: {
    ...mapActions('root', {
      setVisibility: ROOT_ACTION_SET_WIDGET_VISIBILITY,
    }),
  },
};
</script>