<template>
  <chat-icon>
    <screen v-if="widgetIsOpen"></screen>
  </chat-icon>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import ChatIcon from './components/Icon.vue';
import Screen from './components/Screen.vue';
import {
  ROOT_SELECT_IS_OPEN,
  ROOT_ACTION_GET_WIDGET_CONFIGURATIONS,
  CHAT_SELECT,
  CHAT_ACTION_SET_SESSIONID,
  ROOT_ACTION_SET_WIDGET_ID,
  CHAT_ACTION_SET_LEAD_ID,
  ROOT_ACTION_SET_SCREEN_INFO,
  SCREEN_CHAT,
  SCREEN_WELCOME,
  ROOT_ACTION_SET_WIDGET_VISIBILITY,
  CHAT_ACTION_SET_MESSAGES,
  ROOT_ACTION_SET_WINDOW_WIDTH,
  ROOT_ACTION_GET_AGENTS,
  ROOT_ACTION_GET_RASA_INITIAL_MESSAGES,
} from './constants';
import socket from './socket';
import * as _ from 'lodash';
export default {
  props: {
    guid: {
      type: String,
      required: true,
    },
  },
  components: {
    ChatIcon,
    Screen,
  },
  data() {
    return {
      leadConnectedToChat: false,
    };
  },
  mounted() {
    // this.getAgents();
    this.setWidgetID(this.guid);
    this.getRasaInitialMessages({
      sender: 'id3',
      message: 'hi, consumerIDvalue1 has an enquiry for companyIDvalue9',
    });
    this.getWidgetConfigurations(this.guid);
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    });
  },
  created() {
    if (this.chat.chatSessionId) {
      socket.auth = { sessionID: this.chat.chatSessionId };
      socket.connect();
    }
    socket.on('session', ({ sessionID, userData }) => {
      // attach the session ID to the next reconnection attempts
      socket.auth = { sessionID };
      // store it in the localStorage
      localStorage.setItem('bc_chat_sessionID', sessionID);

      this.setSessionID(sessionID);
      console.log('on session userData', userData);
      this.setChatLeadID(userData);
      this.setScreenInfo({
        name: SCREEN_CHAT,
        prev: SCREEN_WELCOME,
      });
      this.setVisibility(true);
      // save the ID of the user
      // socket.userID = userID;
    });

    // socket.on('users', (users) => {
    //   this.setMessages(users);
    // });

    socket.on('connect', () => {
      console.log('connect');
    });
    socket.on('disconnect', () => {
      console.log('disconnect');
    });

    socket.on('connect_error', (err) => {
      this.setSessionID(null);
      this.setChatLeadID(null);
      localStorage.removeItem('bc_chat_sessionID');
      console.log('connect_error', err.message);
    });
  },
  computed: {
    ...mapGetters('root', {
      widgetIsOpen: ROOT_SELECT_IS_OPEN,
    }),
    ...mapGetters('chat', {
      chat: CHAT_SELECT,
    }),
  },
  methods: {
    ...mapActions('root', {
      getWidgetConfigurations: ROOT_ACTION_GET_WIDGET_CONFIGURATIONS,
      setWidgetID: ROOT_ACTION_SET_WIDGET_ID,
      setVisibility: ROOT_ACTION_SET_WIDGET_VISIBILITY,
      setScreenInfo: ROOT_ACTION_SET_SCREEN_INFO,
      setWindowWidth: ROOT_ACTION_SET_WINDOW_WIDTH,
      getAgents: ROOT_ACTION_GET_AGENTS,
      getRasaInitialMessages: ROOT_ACTION_GET_RASA_INITIAL_MESSAGES,
    }),
    ...mapActions('chat', {
      setSessionID: CHAT_ACTION_SET_SESSIONID,
      setChatLeadID: CHAT_ACTION_SET_LEAD_ID,
      setMessages: CHAT_ACTION_SET_MESSAGES,
    }),
    onResize() {
      this.setWindowWidth(window.innerWidth);
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
};
</script>