<template>
  <complex-page
    :collapse="true"
    v-if="handlers"
    :bulk="state[view].bulk"
    :schema="state[view].schema"
    :records="state[view].records"
    :handlers="handlers"
    :table-columns="state[view].tableColumns"
    :search-term="state[view].searchTerm"
    :id="componentId"
  >
    <template slot="body">
      <!--<loading :loading="loading.records"></loading>-->
      <router-view
        :handlers="handlers"
        :state="state[view]"
        :handle-load-records="loadRecords()[view]"
        :view="view"
        @contact-destroyed="resetContact"
      ></router-view>
      <client-add-modal v-if="isClientOrProspect" ref="addClientModal" @success="clientAddSuccess"></client-add-modal>
      <client-import-modal
        v-if="isClientOrProspect"
        :type="view"
        :columns="state.clients.importColumns"
        @download="templateDownloadHandler"
        @complete="loadCurrentView"
        :import-handler="importHandler"
        ref="clientImportModal"></client-import-modal>
      <web-lead-assignee-modal
        v-if="user && view === 'webLeads'"
        ref="webLeadApproveModal"
        :users="branchUsers"
        :user="user"
        :approve-handler="approveHandler"
        @select-assignee="selectAssignee"
      ></web-lead-assignee-modal>
    </template>
  </complex-page>
</template>
<script>
  import { uniqueKey } from 'utils';
  import EventBus from 'qta/EventBus';
  import ComplexPage from 'containers/ComplexPage.vue';
  import Loading from 'components/Loading.vue';
  import ClientImportModal from 'components/ImportModal.vue';
  import { importProspectAndClient, fetchUsers, fetchUserInformation } from 'script/api/calls';
  import ClientAddModal from '../../components/ClientAddModal.vue';
  import Listener from '../../ComplexPageListeners';
  import state from '../../store/index/state';
  import {
    getClients,
    getProspects,
    getWebLeads,
    getArchived,
    archive,
    unArchive,
    getArchivedWebLeads,
    approveWebLead,
  } from '../../api/calls';
  import { CLIENT_TEMPLATE_IMPORT_URL, PROSPECT_TEMPLATE_IMPORT_URL } from '../../api/index';
  import { urlQueryBuilderMixin } from '../../../mixins/index';
  import EmailMixin from '../../../mixins/EmailMixin';
  import WebLeadAssigneeModal from '../../../webleads/components/modal/WebLeadAssigneeModal.vue';

  const clientsMenuId = 'clientsMenu';
  const enquiriesMenuId = 'enquiriesMenu';
  const tabActiveClass = 'active';

  export default {
    menus: {
      clientsMenu: '',
      enquiriesMenu: '',
    },
    tabs: {
      clients: clientsMenuId,
      prospects: clientsMenuId,
      archived: clientsMenuId,
      webLeads: enquiriesMenuId,
      archivedWebLeads: enquiriesMenuId,
    },
    mixins: [urlQueryBuilderMixin, EmailMixin],
    data() {
      return {
        loading: {
          records: false,
        },
        state,
        handlers: null,
        sortableAlias: {
          name: 'first_name',
          last_updated: 'updated_at',
          preferred_intake: 'preferred_intake',
          applications: 'application_count',
        },
        user: null,
        branchUsers: [],
        bulk: {
          ids: [],
        },
        assignee: null,
        componentId: null,
      };
    },
    components: {
      Loading,
      ClientAddModal,
      ClientImportModal,
      ComplexPage,
      WebLeadAssigneeModal,
    },
    watch: {
      $route() {
        this.makeMenuActive();
      },
    },
    computed: {
      view() {
        const route = this.$route.name;
        if (route === 'client:index') {
          return 'clients';
        }
        if (route === 'client:archived') {
          return 'archived';
        }
        if (route === 'client:prospects') {
          return 'prospects';
        }
        if (route === 'client:webLeads') {
          return 'webLeads';
        }
        if (route === 'client:archivedWebLeads') {
          return 'archivedWebLeads';
        }
        return null;
      },
      isClientOrProspect() {
        return this.view && (this.view === 'clients' || this.view === 'prospects');
      },
    },
    methods: {
      uniqueKey,
      makeMenuActive() {
        Object.keys(this.$options.menus).forEach((menu) => {
          const menuElement = this.$options.menus[menu];
          if (menuElement) {
            menuElement.classList.remove(tabActiveClass);
          }
        });
        const tabElement = this.$options.menus[this.$options.tabs[this.view]];
        if (tabElement) {
          tabElement.classList.add(tabActiveClass);
        }
      },
      fetchClients(query) {
        this.loading.records = true;
        return getClients(query).then(({ data: { data, meta } }) => {
          this.state.clients.records = Object.assign({ data }, meta);
          this.$nextTick(() => {
            $(`#${this.componentId} .js-dropdown`).dropdown();
          });
        }).catch(() => {
          this.state.clients.records.data = [];
          Agentcis.alert('Unable to fetch clients.', 'error');
        }).finally(() => {
          this.loading.records = false;
        });
      },
      fetchProspects(query) {
        this.loading.records = true;
        return getProspects(query).then(({ data: { data, meta } }) => {
          this.state.prospects.records = Object.assign({ data }, meta);
          this.$nextTick(() => {
            $(`#${this.componentId} .js-dropdown`).dropdown();
          });
        }).catch(() => {
          this.state.prospects.records.data = [];
          Agentcis.alert('Unable to fetch prospects.', 'error');
        }).finally(() => {
          this.loading.records = false;
        });
      },
      fetchWebLeads(query) {
        this.loading.records = true;
        return getWebLeads(query).then(({ data: { data, meta, permissions } }) => {
          this.state.webLeads.records = Object.assign({ data }, meta, { permissions });
          if (!permissions.viewArchivedWebLeads) {
            const subPages = this.state.webLeads.schema.components.subPages;
            const index = subPages.findIndex(page => page.id === 'client:archivedWebLeads');
            if (index > -1) {
              subPages.splice(index, 1);
            }
          }
          this.fetchUserInformation();
          this.fetchBranchUsers();
          this.$nextTick(() => {
            $(`#${this.componentId} .js-dropdown`).dropdown();
          });
        }).catch((err) => {
          this.state.webLeads.records.data = [];
          if (err.response.status === 403) {
            Agentcis.alert('You do not have the correct privileges.', 'danger');
            return this.$router.push({ name: 'client:index' });
          }
          Agentcis.alert('Unable to fetch webleads.', 'error');
          return true;
        }).finally(() => {
          this.loading.records = false;
        });
      },
      fetchArchivedWebLeads(query) {
        this.loading.records = true;
        return getArchivedWebLeads(query).then(({ data: { data, meta } }) => {
          this.state.archivedWebLeads.records = Object.assign({ data }, meta);
          this.$nextTick(() => {
            $(`#${this.componentId} .js-dropdown`).dropdown();
          });
        }).catch((err) => {
          this.state.archivedWebLeads.records.data = [];
          if (err.response.status === 403) {
            Agentcis.alert('You do not have the correct privileges.', 'danger');
            return this.$router.push({ name: 'client:index' });
          }
          Agentcis.alert('Unable to fetch webleads.', 'error');
          return true;
        }).finally(() => {
          this.loading.records = false;
        });
      },
      fetchArchived(query) {
        this.loading.records = true;
        return getArchived(query).then(({ data: { data, meta } }) => {
          this.state.archived.records = Object.assign({ data }, meta);
          this.$nextTick(() => {
            $(`#${this.componentId} .js-dropdown`).dropdown();
          });
        }).catch(() => {
          this.state.archived.records.data = [];
          Agentcis.alert('Unable to fetch archived.', 'error');
        }).finally(() => {
          this.loading.records = false;
        });
      },
      loadRecords() {
        return {
          clients: this.fetchClients,
          prospects: this.fetchProspects,
          webLeads: this.fetchWebLeads,
          archivedWebLeads: this.fetchArchivedWebLeads,
          archived: this.fetchArchived,
        };
      },
      archive(client, index) {
        Agentcis.confirm({
          message: `Do you want to archive ${client.full_name} ?`,
          onAccept: () => {
            archive(client.id).then(() => {
              this.state[this.view].records.data.splice(index, 1);
              Agentcis.alert(`Successfully archived ${client.full_name}`);
            }).catch((error) => {
              Agentcis.alert(error.response.data.detail || `Unable to archive  ${client.full_name}, please try again.`, 'error');
            });
          },
        });
      },
      restore(client) {
        Agentcis.confirm({
          message: `Do you want to restore ${client.full_name} ?`,
          onAccept: () => {
            unArchive(client.id).then(() => {
              if (client.status === 'Lead') {
                this.fetchArchivedWebLeads();
              } else {
                this.fetchArchived();
              }
              Agentcis.alert(`Successfully restored ${client.full_name}`);
            }).catch((error) => {
              Agentcis.alert(error.response.data.detail || `Unable to restored  ${client.full_name}, please try again.`, 'error');
            });
          },
        });
      },
      approve(clients) {
        if (clients.constructor !== Array) {
          this.bulk.ids.push(clients);
        } else {
          this.bulk.ids = clients;
        }
        this.$refs.webLeadApproveModal.show();
        return true;
      },
      selectAssignee(assignee) {
        this.assignee = assignee;
      },
      importHandler(payload) {
        return importProspectAndClient(payload, {
          for: this.view === 'clients' ? 'client' : null,
        });
      },
      templateDownloadHandler() {
        const url = this.view === 'clients' ? CLIENT_TEMPLATE_IMPORT_URL : PROSPECT_TEMPLATE_IMPORT_URL;
        window.location.href = url;
      },
      loadCurrentView() {
        this.loadRecords()[this.view]();
      },
      clientAddSuccess(view) {
        if (this.view === view) {
          this.loadCurrentView();
        } else {
          const route = view === 'clients' ? 'client:index' : 'client:prospects';
          this.$router.replace({ name: route });
        }
      },
      fetchBranchUsers() {
        fetchUsers()
          .then((response) => {
            this.branchUsers = response.data;
          })
          .catch(() => {
            Agentcis.alert({
              type: 'danger',
              message: 'Error on fetching branch users.',
              display: 'show',
            });
          });
      },
      fetchUserInformation() {
        fetchUserInformation()
          .then((response) => {
            this.user = Object.assign({}, response.data);
          })
          .catch(() => {
            Agentcis.alert({
              type: 'danger',
              message: 'Error on fetching branch users.',
              display: 'show',
            });
          });
      },
      approveHandler(callback) {
        approveWebLead({ ids: this.bulk.ids, assignee: this.assignee })
          .then(() => {
            Agentcis.alert('Successfully approved the webleads.', 'success');
            this.fetchWebLeads();
            this.bulk.ids = [];
            this.state[this.view].bulk = {};
            this.$refs.webLeadApproveModal.hide();
          })
          .catch(() => {
            Agentcis.alert('Unable to approve the weblead\'s', 'error');
          })
          .finally(() => {
            if (typeof (callback) === 'function') callback();
          });
      },
      resetContact(view) {
        this.state[view].searchTerm = '';
        Object.values(this.state[view].tableColumns).forEach((col) => {
          col.sort.asc = null; // eslint-disable-line no-param-reassign
        });
      },
    },
    created() {
      const query = this.$route.query;
      const lastPage = this.state[this.view].records.last_page;
      const page = query.page > lastPage ? lastPage : query.page;
      this.state[this.view].records.current_page = page || 1;
      this.state[this.view].records.per_page = query.per_page || 10;
      this.state[this.view].searchTerm = query.search || '';
      const sort = query.sort || 'first_name';
      this.$route.query.sort = sort;
      if (sort) {
        const isAsc = sort.startsWith('-');
        const sortTerm = isAsc ? sort.substr(1) : sort;
        const sortKey = Object.keys(this.sortableAlias).filter(key => this.sortableAlias[key] === sortTerm);
        Object.keys(this.state[this.view].tableColumns).forEach((column) => {
          this.state[this.view].tableColumns[column].sort.asc = null;
        });
        if (sortKey && this.state[this.view].tableColumns[sortKey]) {
          this.state[this.view].tableColumns[sortKey].sort.asc = !isAsc;
        } else {
          this.state[this.view].tableColumns[sortTerm].sort.asc = !isAsc;
        }
      }
    },
    mounted() {
      this.$options.menus.clientsMenu = document.getElementById(clientsMenuId);
      this.$options.menus.enquiriesMenu = document.getElementById(enquiriesMenuId);
      this.makeMenuActive();
      this.componentId = `clientList_${this.uniqueKey()}`;
      this.handlers = new Listener(this);
      this.urlQueryListenerAndBuilder();
      EventBus.$on('GLOBAL_MAIL_SENT', () => {
        this.state[this.view].bulk = {};
      });
    },
  };
</script>