<template>
  <div class="row justify-content-center">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Source Channels</h4>
          <p class="card-title-desc">Select and configure source channels.</p>
          <div class="row">
            <div
              class="col-md-3"
              v-for="(channel, index) in channels"
              :key="index"
            >
              <a class="text-reset notification-item d-block">
                <div class="d-flex flex-column align-items-center">
                  <span
                    class="
                      avatar-title
                      rounded-circle
                      source-channel-tab-icon
                      bg-primary bg-soft
                      text-primary
                      mb-2
                    "
                    >
                    <!-- <i :class="`bx ${channel.icon}`"></i> -->
                    <Icon :icon="channel.icon" />
                  
                  </span>

                  <h6 class="mb-2 text-center">
                    {{ channel.count }} {{ channel.suffixLabelMedim }}
                  </h6>
                  <b-button variant="primary" @click="editChannel(channel)">
                    {{ channel.buttonLabel }}</b-button
                  >
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <b-modal
      v-model="showSourceChannelEditModal"
      :dialog-class="sourceChannelEditModalClasses"
      title-class="font-18"
      size="xl"
      content-class="rounded-0"
      footer-class="text-end"
      :hide-footer="true"
    >
      <template #modal-header>
        <button
          type="button"
          class="btn btn-primary"
          @click="sourceChannelEditModalHeaderButtonConfig.action()"
        >
          <i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
          {{ sourceChannelEditModalHeaderButtonConfig.label }}
        </button>
      </template>
      <s-cphone-widget
        v-if="sourceState.selectedChannel === 'phonenumbers'"
        :existingNumbers="addedPhoneNumbers"
        @listmode="triggerListMode"
        :channelEditOnListMode="channelEditOnListMode"
        :sourceState="sourceState"
      ></s-cphone-widget>
      <s-comni-widget
        v-if="sourceState.selectedChannel === 'omni-channel'"
      ></s-comni-widget>
    </b-modal>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { Icon } from '@iconify/vue';

import * as _ from 'lodash';
import {
  SOURCE_GETTER,
  SOURCE_ACTION_RESET_SELECTED_CHANNEL,
  SOURCE_ACTION_SET_SELECTED_CHANNEL,
  SOURCE_GETTER_DETAIL_ADDED_PHONENUMBERS,
  SOURCE_GETTER_DETAIL_ADDED_EMAILS,
  SOURCE_GETTER_DETAIL_ADDED_OMNICHANNLES,
  PHONEWIDGET_GETTER,
  PHONEWIDGET_ACTION_RESET,
} from '../constants';
import SCphoneWidget from './SCphoneWidget.vue';
import SComniWidget from './SComniWidget.vue';
import { BButton,BModal } from 'bootstrap-vue-next';

export default {
  data() {
    return {
      channelEditOnListMode: false,
    };
  },
  computed: {
    ...mapGetters('phonewidget', {
      phoneWidgetState: PHONEWIDGET_GETTER,
    }),
    ...mapGetters('source', {
      sourceState: SOURCE_GETTER,
      addedPhoneNumbers: SOURCE_GETTER_DETAIL_ADDED_PHONENUMBERS,
      addedEmails: SOURCE_GETTER_DETAIL_ADDED_EMAILS,
      addedOmniWidgets: SOURCE_GETTER_DETAIL_ADDED_OMNICHANNLES,
    }),
    channels() {
      return _.map(this.sourceState.availableBCSourceChannels, (c) => {
        const chan = _.find(
          this.sourceState.sourceDetails.channels
            ? this.sourceState.sourceDetails.channels
            : [],
          ({ type, items = [] }) => type === c.name && items.length,
        );
        return {
          ...c,
          items: chan ? chan.items : [],
          count: chan ? chan.items.length : 0,
        };
      });
    },
    showSourceChannelEditModal() {
      return this.sourceState.selectedChannel ? true : false;
    },
    sourceChannelEditModalClasses() {
      return `modal-dialog-slideout ${
        this.channelEditOnListMode ? 'notification-modal' : ''
      }`;
    },
    sourceChannelEditModalHeaderButtonConfig() {
      if (this.channelEditOnListMode) {
        return {
          label: 'Close',
          action: () => {
            this.closeSourceChannelEditModal();
            this.resetPhoneWidget();
          },
        };
      }
      if (!this.channelEditOnListMode) {
        switch (this.sourceState.selectedChannel) {
          case 'phonenumbers':
            if (this.addedPhoneNumbers.length) {
              return {
                label: 'Back',
                action: () => {
                  this.channelEditOnListMode = true;
                  this.resetPhoneWidget();
                },
              };
            }
            break;
          case 'emails':
            return {
              label: 'Back',
              action: () => {
                this.channelEditOnListMode = true;
                this.resetPhoneWidget();
              },
            };
            break;
          case 'omni-channel':
            if (this.addedOmniWidgets.length) {
              return {
                label: 'Back',
                action: () => {
                  this.channelEditOnListMode = true;
                  this.resetPhoneWidget();
                },
              };
            }
            break;
        }
      }

      return {
        label: 'Close',
        action: () => this.closeSourceChannelEditModal(),
      };
    },
  },
  methods: {
    ...mapActions('source', {
      setSelectedChannel: SOURCE_ACTION_SET_SELECTED_CHANNEL,
      closeSourceChannelEditModal: SOURCE_ACTION_RESET_SELECTED_CHANNEL,
    }),
    ...mapActions('phonewidget', {
      resetPhoneWidget: PHONEWIDGET_ACTION_RESET,
    }),
    editChannel(channel) {
      this.setSelectedChannel({
        selectedChannel: channel.name,
      });
      switch (channel.name) {
        case 'phonenumbers':
          if (
            this.addedPhoneNumbers.length &&
            this.phoneWidgetState.details === null
          ) {
            this.channelEditOnListMode = true;
          }
          break;
        case 'emails':
          if (
            this.addedEmails.length &&
            this.phoneWidgetState.details === null
          ) {
            this.channelEditOnListMode = true;
          }
          break;
        case 'omni-channel':
          if (
            this.addedOmniWidgets.length &&
            this.phoneWidgetState.details === null
          ) {
            this.channelEditOnListMode = true;
          }
          break;
      }
    },
    triggerListMode(isListMode) {
      this.channelEditOnListMode = isListMode;
    },
  },
  components: {
    SCphoneWidget,
    SComniWidget,
    BButton,BModal,
    Icon
  },
};
</script>