<template>
  <breadcrumb
    :rootState="rootState"
    :breadCrumbs="breadCrumbs"
    @onpropagate="onNavPropagate"
  >
    <div
      class="height-set"
      :style="{
        height: mobileHeightSet,
      }"
    >
      <div class="spinner-main">
        <Loader :loading="widgetLoading"> </Loader>
      </div>
      <div class="d-lg-flex panel-container inbox">
        <lead-driven-inbox
          :isMobileView="isMobileView"
          :resetCards="resetCards"
          v-if="isVisible(SCREEN_LEFT)"
          @lead_selected="onLeadSelect"
          @onChangeSelectedFilters="onChangeSelectedFilters"
          @onChangeDBFilters="onChangeDBFilters"
          @onLeadSortChange="onLeadSortChange"
          @onChangeSearchTerm="onChangeSearchTerm"
          :leadDrivenBoxFilters="leadDrivenBoxFilters"
        ></lead-driven-inbox>
        <interaction
          :isMobileView="isMobileView"
          v-if="isVisible(SCREEN_CENTER)"
          :emailtemplates="emailtemplates"
        ></interaction>
        <lead-data v-if="isVisible(SCREEN_RIGHT)"></lead-data>
      </div>
      <mobile-tabs></mobile-tabs>
    </div>
  </breadcrumb>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import {
  ROOT_GETTER,
  ROOT_ACTION_SET_WINDOW_WIDTH,
  ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
  ROOT_GETTER_GET_BREADCRUMBS,
  ROOT_ACTION_SET_BREADCRUMB,
  SCREEN_CENTER,
  SCREEN_RIGHT,
  SCREEN_LEFT,
  ROOT_ACTION_SET_LOADING_LEAD_DATA_REALTIME,
  ROOT_ACTION_SET_LEAD_DATA_REALTIME,
  ROOT_ACTION_SET_LOADING_LEAD_SPECIFIC_DATA,
  ROOT_ACTION_SET_LEAD_SPECIFIC_DATA_REALTIME,
  ROOT_ACTION_SELECT_LEAD_ID,
  ROOT_ACTION_SET_LEAD_CARD_UPDATE,
  ROOT_ACTION_UPDATE_SELECTED_LEAD_INTERACTIONS,
  ROOT_ACTION_UPDATE_LEAD_INERMEDIATE_STATUS,
  ROOT_ACTION_SET_LOADING_LEAD_SPECIFIC_DATA_HISTORY,
  ROOT_ACTION_SET_LEAD_DRIVEN_BOX_FILTERS_DB,
  ROOT_ACTION_GET_LEAD_DATA,
  ROOT_ACTION_SET_LOADING_LEAD_CARDS_DATA_REALTIME,
  ROOT_ACTION_GET_INBOX_TYPE_COUNTS,
  ROOT_ACTION_SET_LEAD_STATUS_CHANGE_TRIGGERKEY,
  ROOT_ACTION_GET_NEW_LEADS,
  ROOT_ACTION_GET_DB_FILTERED_LEADS,
  ROOT_ACTION_SET_LEAD_DB_FILTERS,
  ROOT_ACTION_GET_SELECTED_LEAD_PROFILE_DATA,
  ROOT_GETTER_ISMOBILE_VIEW,
  ROOT_ACTION_SET_MOBILE_SCREEN,
  ROOT_ACTION_SET_AGENTS,
  ROOT_ACTION_RESET_SELECTED_LEAD,
  ROOT_ACTION_GET_CONTACT_TAGS,
} from './constants';
import { toastConfig } from '../../utils/util';
import Loader from '../../components/Loader/loader.vue';
import Breadcrumb from '../../components/Breadcrumb.vue';
import Interaction from './components/Interactions/index.vue';
import LeadData from './components/Lead/index.vue';
import LeadDrivenInbox from './components/LeadDrivenBox/index.vue';
import MobileTabs from './components/MobileTabs.vue';
import socket from '../../widgets/CommWidget/socket';
import EmailTemplateService from '../../service/emailTemplatesService';
import WorkFlowService from '../../service/workflowService';

import MainService from '../../service/mainService';
import * as _ from 'lodash';
export default {
  mounted() {
    this.getContactTags();
    this.getAgents();
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    });
    // this.getInboxTypeCounts();
    this.getNewLeads();
    setInterval(() => {
      // this.getInboxTypeCounts();
      this.getNewLeads();
    }, 10000);
    this.getEmailtemplates();
  },
  components: {
    Breadcrumb,
    Loader,
    Interaction,
    LeadData,
    LeadDrivenInbox,
    MobileTabs,
  },
  data() {
    return {
      emailtemplates: [],
      SCREEN_CENTER,
      SCREEN_RIGHT,
      SCREEN_LEFT,
      resetCards: false,
      loadingAgents: false,
      loadingContactTags: false,
      leadDrivenBoxFilters: {
        sources: [],
        channelTypes: [],
        sort: null,
        searchTerm: '',
      },
    };
  },
  computed: {
    mobileHeightSet() {
      if (!this.isMobileView) {
        return 'calc(100vh - 210px)';
      }
      if (this.rootState.mobileSelectedScreen === SCREEN_LEFT) {
        return 'calc(100vh - 250px)';
      }
      if (this.rootState.mobileSelectedScreen === SCREEN_CENTER) {
        return 'auto';
      }
      if (this.rootState.mobileSelectedScreen === SCREEN_RIGHT) {
        return 'calc(100vh - 300px)';
      }
    },
    ...mapGetters('root', {
      rootState: ROOT_GETTER,
      breadCrumbs: ROOT_GETTER_GET_BREADCRUMBS,
      isMobileView: ROOT_GETTER_ISMOBILE_VIEW,
    }),
    leadDrivenBoxFiltersDB() {
      return this.rootState.leadDrivenBoxFiltersDB;
    },
    widgetLoading() {
      return false;
    },
    isReadyToConnectSocket() {
      return (
        // !_.isEmpty(this.rootState.leadData) &&
        !_.isEmpty(this.rootState.profileData) &&
        !_.isEmpty(this.rootState.channels)
      );
    },
    successMessage() {
      return this.rootState.successMessage;
    },
    errorMessage() {
      return this.rootState.errorMessage;
    },
    selectedLeadId() {
      return this.rootState.selectedLeadID;
    },
    activeTab() {
      return this.rootState.leadDrivenBoxActiveTab;
    },
    leadStatusChanged() {
      return this.rootState.leadStatusChanged;
    },
    newLeads() {
      return this.rootState.newLeads;
    },
    dbFiltersForleads() {
      return this.rootState.leadDrivenBoxDBFilters;
    },
    showProfileScreen() {
      return this.rootState.showProfileScreen;
    },
  },
  methods: {
    async getContactTags() {
      this.loadingContactTags = true;
      const {
        data: { data, message, success },
      } = await WorkFlowService.getContactTags();
      if (!success) {
        // this.setErrorMessage(message);
      } else {
        this.setContactTags(
          _.map(data, ({ sid: value, name: label }) => ({ label, value })),
        );
      }
      this.loadingContactTags = false;
    },
    async getAgents() {
      this.loadingAgents = true;
      const {
        data: { data, message, success },
      } = await MainService.getAgents();
      if (!success) {
        // this.setErrorMessage(message);
      } else {
        this.setAgents(
          _.map(
            _.filter(
              data,
              ({ isTeam = false, userId }) => !isTeam && !_.isNull(userId),
            ),
            (d) => ({
              ...d,
              profilePic: d.userAvatar
                ? d.userAvatar
                : 'https://helostatus.com/wp-content/uploads/2021/09/2021-profile-WhatsApp-hd.jpg',
            }),
          ),
        );
      }
      this.loadingAgents = false;
    },
    async getEmailtemplates() {
      const {
        data: { data, message, success },
      } = await EmailTemplateService.getEmailtemplates();
      if (!success) {
      } else {
        this.emailtemplates = _.isEmpty(data) ? [] : data;
      }
    },
    ...mapActions('root', {
      setAgents: ROOT_ACTION_SET_AGENTS,
      setWindowWidth: ROOT_ACTION_SET_WINDOW_WIDTH,
      resetToastMessages: ROOT_ACTION_RESET_SUCCESS_AND_ERROR_MESSAGE,
      onBreadCrumbEventFire: ROOT_ACTION_SET_BREADCRUMB,
      setLoadingLeadRealTimeAggs: ROOT_ACTION_SET_LOADING_LEAD_DATA_REALTIME,
      setLoadingLeadCards: ROOT_ACTION_SET_LOADING_LEAD_CARDS_DATA_REALTIME,
      setLeadRealTimeAggs: ROOT_ACTION_SET_LEAD_DATA_REALTIME,
      setLoadingLeadSpecificData: ROOT_ACTION_SET_LOADING_LEAD_SPECIFIC_DATA,
      setLoadingLeadSpecificDataHistory:
        ROOT_ACTION_SET_LOADING_LEAD_SPECIFIC_DATA_HISTORY,
      setLeadSpecificData: ROOT_ACTION_SET_LEAD_SPECIFIC_DATA_REALTIME,
      selectLead: ROOT_ACTION_SELECT_LEAD_ID,
      updateLeadCard: ROOT_ACTION_SET_LEAD_CARD_UPDATE,
      updateSelectedLeadInteractions:
        ROOT_ACTION_UPDATE_SELECTED_LEAD_INTERACTIONS,
      updateLeadCardIntermediateStatus:
        ROOT_ACTION_UPDATE_LEAD_INERMEDIATE_STATUS,
      setLeadDrivenFiltersDB: ROOT_ACTION_SET_LEAD_DRIVEN_BOX_FILTERS_DB,
      getLeads: ROOT_ACTION_GET_LEAD_DATA,
      getInboxTypeCounts: ROOT_ACTION_GET_INBOX_TYPE_COUNTS,
      setLeadStatusChangeTriggerKey:
        ROOT_ACTION_SET_LEAD_STATUS_CHANGE_TRIGGERKEY,
      getNewLeads: ROOT_ACTION_GET_NEW_LEADS,
      rootActionSetInboxTypeCounts: ROOT_ACTION_GET_INBOX_TYPE_COUNTS,
      getDbFilteredLeads: ROOT_ACTION_GET_DB_FILTERED_LEADS,
      setLeadDBFilters: ROOT_ACTION_SET_LEAD_DB_FILTERS,
      getSelectedLeadProfileData: ROOT_ACTION_GET_SELECTED_LEAD_PROFILE_DATA,
      setMobileScreen: ROOT_ACTION_SET_MOBILE_SCREEN,
      resetSelectedLead: ROOT_ACTION_RESET_SELECTED_LEAD,
      setContactTags: ROOT_ACTION_GET_CONTACT_TAGS,
    }),
    onLeadSelect(payload) {
      this.selectLead(payload.leadId);
      if (this.isMobileView) {
        this.setMobileScreen(SCREEN_CENTER);
      }
    },
    connectSocket() {
      socket.auth = {
        isLead: false,
        partnershipID: this.rootState.profileData.partnershipSid,
        userId: this.rootState.profileData.userSid,
        partnershipAccountId: this.rootState.profileData.partnershipAccountSid,
      };
      // Try to connect a socket
      socket.connect();
      // On connection success
      socket.on('connect', () => {
        console.log('Agent Connected');
        socket.emit('GET_LEAD_CARDS', {
          flters: {},
          searchterm: undefined,
          showLoader: true,
          activeTab: this.rootState.leadDrivenBoxActiveTab,
        });
      });
      // On connection disconnect
      socket.on('disconnect', () => {
        console.log('Agent Disconnected');
      });
      // On connection error
      socket.on('connect_error', (err) => {
        console.log('Agent connect_error', err.message);
      });

      // WHen Node returns a particular lead data
      socket.on('GET_LEADS_AGENT_INTERACTIONS', () => {});
      // Listen to chat messages and all other webhook interactions
      socket.on('private agent interaction', (payload) => {
        console.log('private agent interaction', payload);
      });

      // When Node returns lead driven box data
      socket.on(
        'GET_LEADS_AGGREGATED_INTERACTIONS',
        (payload, filters, searchLeads) => {
          this.setLeadRealTimeAggs({
            payload,
            filters,
            searchLeads: searchLeads
              ? _.map(searchLeads, ({ leadId }) => leadId)
              : [],
          });
        },
      );

      // When Node returns lead driven box data (Individual lead card update)
      socket.on('LEAD_CARD_UPDATE', (payload) => {
        this.updateLeadCard(payload);
      });
      socket.on('ON_ASSIGN_AGENTS_CHANGE', () => {
        this.resetSelectedLead();
        setTimeout(() => {
          socket.emit('GET_LEAD_CARDS', {
            flters: _.omit(this.leadDrivenBoxFilters, ['searchTerm']),
            searchterm: this.leadDrivenBoxFilters.searchTerm,
            showLoader: false,
            activeTab: this.rootState.leadDrivenBoxActiveTab,
          });
          socket.emit('GET_INBOX_TYPE_COUNTS', {
            leads: this.newLeads,
            agentId: this.rootState.profileData.userSid,
          });
          // socket.emit('LEAD_SELECTED', {
          //   leadId: this.selectedLeadId,
          //   doFiltering: true,
          // });
        }, 1000);
      });
      socket.on(
        'GET_LEADS_AGGREGATED_CARDS_ONLY_INTERACTIONS_LOADING',
        (payload) => {
          this.setLoadingLeadCards(payload);
        },
      );

      socket.on('GET_LEADS_AGGREGATED_INTERACTIONS_LOADING', (payload) => {
        this.setLoadingLeadRealTimeAggs(payload);
      });

      socket.on('SET_LEAD_SPECIFIC_INTERACTIONS_LOADING', (payload) => {
        this.setLoadingLeadSpecificData(payload);
      });
      socket.on(
        'SET_LEAD_SPECIFIC_INTERACTIONS',
        (payload, prependData, aggsResp) => {
          this.setLeadSpecificData({
            data: payload,
            prependData,
            aggsResp,
          });
        },
      );

      socket.on('private message agent', (payload) => {
        this.updateSelectedLeadInteractions(payload);
      });
      socket.on('ON_INBOX_TYPE_COUNTS', (payload) => {
        console.log('ON_INBOX_TYPE_COUNTS', payload);
        this.rootActionSetInboxTypeCounts(payload);
      });

      socket.on('LEAD_ACTIVE_STATUS_UPDATE', (payload) => {
        //check if this is a new user
        if (
          _.filter(
            this.rootState.leadRealTimeData,
            ({ leadId }) => leadId === payload.leadID,
          ).length === 0
        ) {
          // socket.emit('GET_LEAD_CARDS', {
          //   flters: {},
          //   searchterm: undefined,
          //   showLoader: false,
          //   activeTab: this.rootState.leadDrivenBoxActiveTab,
          // });

          socket.emit('GET_LEAD_CARDS', {
            flters: _.omit(this.leadDrivenBoxFilters, ['searchTerm']),
            searchterm: this.leadDrivenBoxFilters.searchTerm,
            showLoader: false,
            activeTab: this.rootState.leadDrivenBoxActiveTab,
          });
          this.getLeads();
        }

        this.updateLeadCardIntermediateStatus(payload);
      });
      socket.on('lead typing', (payload) => {
        this.updateLeadCardIntermediateStatus(payload);
      });
      socket.on('SET_LEAD_SPECIFIC_INTERACTIONS_HISTORY_LOADING', (payload) => {
        this.setLoadingLeadSpecificDataHistory(payload);
      });
    },
    onResize() {
      this.setWindowWidth(window.innerWidth);
    },
    onNavPropagate(e) {
      this.onBreadCrumbEventFire(e);
    },
    isVisible(screenName) {
      if (!this.isMobileView) {
        return true;
      }
      if (
        screenName === SCREEN_LEFT &&
        this.rootState.mobileSelectedScreen === SCREEN_LEFT
      ) {
        return true;
      }
      if (
        screenName === SCREEN_CENTER &&
        this.rootState.mobileSelectedScreen === SCREEN_CENTER
      ) {
        return true;
      }
      if (
        screenName === SCREEN_RIGHT &&
        this.rootState.mobileSelectedScreen === SCREEN_RIGHT
      ) {
        return true;
      }
      return false;
    },
    onLeadSortChange(e) {
      console.log('event', e);
      if (e === null) {
        this.leadDrivenBoxFilters = {
          ...this.leadDrivenBoxFilters,
          sort: null,
        };
        this.setLeadDrivenFiltersDB({
          ...this.rootState.leadDrivenBoxFiltersDB,
          sort: null,
        });
      } else if (e.type === 'ELASTIC') {
        this.leadDrivenBoxFilters = {
          ...this.leadDrivenBoxFilters,
          sort: e.value,
        };
        this.setLeadDrivenFiltersDB({
          ...this.rootState.leadDrivenBoxFiltersDB,
          sort: null,
        });
      } else {
        // this.setLeadDrivenFiltersDB({
        //   ...this.rootState.leadDrivenBoxFiltersDB,
        //   sort: e.value,
        // });
        this.leadDrivenBoxFilters = {
          ...this.leadDrivenBoxFilters,
          sort: null,
        };
      }
    },
    onChangeSearchTerm(e) {
      // this.setLeadDrivenFiltersDB({
      //   ...this.rootState.leadDrivenBoxFiltersDB,
      //   searchTerm: e.target.value,
      // });
      this.leadDrivenBoxFilters = {
        ...this.leadDrivenBoxFilters,
        searchTerm: e.target.value,
      };
    },
    onChangeSelectedFilters(e) {
      this.leadDrivenBoxFilters = {
        ...this.leadDrivenBoxFilters,
        sources: e.sources,
        channelTypes: e.channelTypes,
      };
    },
    onChangeDBFilters(e) {
      this.setLeadDBFilters({
        intentScore: e.intentScore,
      });
    },
  },
  watch: {
    newLeads: {
      deep: true,
      handler(v) {
        console.log('v', v);
        socket.emit('GET_INBOX_TYPE_COUNTS', {
          leads: v,
          agentId: this.rootState.profileData.userSid,
        });
      },
    },
    successMessage(v) {
      if (v !== null) {
        this.$toast.open(toastConfig.toastSuccess(v));
        this.resetToastMessages();
      }
    },
    errorMessage(v) {
      if (v !== null) {
        this.$toast.open(toastConfig.toastError(v));
        this.resetToastMessages();
      }
    },
    isReadyToConnectSocket(v) {
      if (v) {
        this.connectSocket();
      }
    },
    selectedLeadId(v) {
      if (v) {
        socket.emit('LEAD_SELECTED', { leadId: v, doFiltering: true });
        this.getSelectedLeadProfileData(this.rootState.selectedLeadID);
      } else {
      }
    },
    leadStatusChanged(v) {
      if (v) {
        socket.emit('GET_LEAD_CARDS', {
          flters: _.omit(this.leadDrivenBoxFilters, ['searchTerm']),
          searchterm: this.leadDrivenBoxFilters.searchTerm,
          showLoader: false,
          activeTab: this.rootState.leadDrivenBoxActiveTab,
        });
        this.resetCards = true;
        this.setLeadStatusChangeTriggerKey(false);
      }
    },
    dbFiltersForleads: {
      deep: true,
      handler(v) {
        console.log('dbFiltes', v);
        this.getDbFilteredLeads(v);
      },
    },
    leadDrivenBoxFilters: {
      handler: function (v, prevV) {
        console.log('GET_LEAD_CARDS');
        socket.emit('GET_LEAD_CARDS', {
          flters: _.omit(v, ['searchTerm']),
          searchterm: v.searchTerm,
          showLoader: false,
          activeTab: this.rootState.leadDrivenBoxActiveTab,
        });
      },
      deep: true,
    },
    activeTab() {
      this.leadDrivenBoxFilters = {
        sources: [],
        channelTypes: [],
        sort: null,
        searchTerm: '',
      };
    },
    leadDrivenBoxFiltersDB(v) {
      // this.getLeads();
      // console.log('v', v);
    },
    // showProfileScreen(v) {
    //   if (v) {
    //     this.getSelectedLeadProfileData(this.rootState.selectedLeadID);
    //   }
    // },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
};
</script>