<template>
  <div>
    <div class="spinner-main" v-if="tasksLoading && !viewMoreButtonClicked">
      <loader :loading="true"> </loader>
    </div>
    <template v-if="!(tasksLoading && !viewMoreButtonClicked)">
      <h5 class="font-size-14 mb-3" v-if="!tasks.length">
        There are no tasks available at this moment.
      </h5>
      <template v-else>
        <div class="d-flex justify-content-between align-items-center">
          <button type="button" class="btn header-item noti-icon waves-effect">
            <!-- <i class="bx bx-bell bx-tada"></i> -->
            <Icon icon="noto:bell" height="20" />
            <span class="badge bg-danger rounded-pill">{{
              state.unViewedTaskCount
            }}</span>
          </button>
          <!-- <a
            class="text-reset bg-success badge rounded-pill bg-success p-2"
            v-if="state.unViewedTaskCount > 0"
            @click.prevent="reloadTasks"
            role="button"
            >You have recieved new tasks. Reload!<i
              class="mdi mdi-arrow-right"
            ></i
          ></a> -->
        </div>
        <div class="d-flex gap-2 flex-wrap mb-2">
          <div class="btn-group me-1 mt-2">
            <button
              class="btn btn-secondary btn-sm dropdown-toggle"
              type="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Status - {{ getSelectedStatusFilterName }}
              <i class="mdi mdi-chevron-down"></i>
            </button>
            <div class="dropdown-menu">
              <a
                class="dropdown-item"
                role="button"
                @click.prevent="setTaskStatusFilter('ALL')"
                >All</a
              >
              <template v-if="getAvailableTaskStatusFilters.length"> </template>
              <a
                v-for="(record, index) in getAvailableTaskStatusFilters[0]
                  .filters"
                :key="index"
                class="dropdown-item"
                role="button"
                @click.prevent="setTaskStatusFilter(record.keyword)"
                >{{ record.displayName }} ( {{ record.count }})</a
              >
            </div>
          </div>
          <div class="btn-group me-1 mt-2">
            <button
              class="btn btn-secondary btn-sm dropdown-toggle"
              type="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Task Type - {{ getSelectedTypeFilterName }}
              <i class="mdi mdi-chevron-down"></i>
            </button>
            <div class="dropdown-menu">
              <a
                class="dropdown-item"
                role="button"
                @click.prevent="setTaskTypeFilter('ALL')"
                >All</a
              >
              <template v-if="getAvailableTaskTypeFilters.length"> </template>
              <a
                v-for="(record, index) in getAvailableTaskTypeFilters[0]
                  .filters"
                :key="index"
                class="dropdown-item"
                role="button"
                @click.prevent="setTaskTypeFilter(record.keyword)"
                >{{ record.displayName }}( {{ record.count }})</a
              >
            </div>
          </div>
        </div>
        <tasks-by-day
          v-for="(task, index) in tasks"
          :key="index"
          :task="task"
          :bucketLimit="bucketLimit"
        ></tasks-by-day>
        <div class="mt-4 text-center" v-if="task_show_view_more_button">
          <button
            type="button"
            class="btn btn-primary"
            @click="onViewMoreButtonClick"
          >
            <i
              class="bx bx-loader bx-spin font-size-16 align-middle me-2"
              v-if="state.tasksLoading"
            ></i>
            View More
          </button>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { Icon } from '@iconify/vue';

import {
  TASK_GETTER_GET_TASK_LIST,
  TASK_GETTER_SHOW_VIEW_MORE_BUTTON,
  TASK_GETTER,
  TASK_ACTION_GET_TASK_LIST,
  TASK_ACTION_SET_CURRENT_PAGE_TASK_LIST,
  TASK_ACTION_SET_STATUS_FILTER_TASK_LIST,
  TASK_ACTION_GET_TASKS_META,
  TASK_ACTION_RELOAD_TASK_LIST,
  TASK_ACTION_SET_TYPE_FILTER_TASK_LIST,
} from '../constants';
import TasksByDay from './TasksByDay.vue';
import Loader from '../../../components/Loader/loader.vue';
import * as _ from 'lodash';
export default {
  mounted() {
    this.getTaskMetaTimerID = setInterval(() => {
      this.getTaskMeta();
    }, 5000);
  },
  data() {
    return {
      getTaskMetaTimerID: null,
      bucketLimit: 4,
      viewMoreButtonClicked: false,
    };
  },
  components: {
    TasksByDay,
    Loader,
    Icon
  },
  computed: {
    ...mapGetters('tasks', {
      state: TASK_GETTER,
      tasks: TASK_GETTER_GET_TASK_LIST,
      task_show_view_more_button: TASK_GETTER_SHOW_VIEW_MORE_BUTTON,
    }),
    tasksLoading() {
      return this.state.tasksLoading;
    },
    taskFetchParameter() {
      return `${this.state.currentpage}-${this.state.taskfetchLimit}-${this.state.taskStatusFilter}-${this.state.reloadTimestamp}-${this.state.taskTypeFilter}`;
    },
    getAvailableTaskStatusFilters() {
      return _.filter(
        this.state.taskAggregations,
        ({ name }) => name === 'Status',
      );
    },
    getSelectedStatusFilterName() {
      if (this.state.taskStatusFilter === 'ALL') {
        return 'All';
      }
      return _.filter(
        _.filter(
          this.state.taskAggregations,
          ({ name }) => name === 'Status',
        )[0].filters,
        ({ keyword }) => keyword === this.state.taskStatusFilter,
      )[0].displayName;
    },
    getSelectedTypeFilterName() {
      if (this.state.taskTypeFilter === 'ALL') {
        return 'All';
      }
      return _.filter(
        _.filter(
          this.state.taskAggregations,
          ({ name }) => name === 'Task Type',
        )[0].filters,
        ({ keyword }) => keyword === this.state.taskTypeFilter,
      )[0].displayName;
    },
    getAvailableTaskTypeFilters() {
      return _.filter(
        this.state.taskAggregations,
        ({ name }) => name === 'Task Type',
      );
    },
  },
  methods: {
    ...mapActions('tasks', {
      getTasks: TASK_ACTION_GET_TASK_LIST,
      setCurrentPage: TASK_ACTION_SET_CURRENT_PAGE_TASK_LIST,
      setTaskStatusFilter: TASK_ACTION_SET_STATUS_FILTER_TASK_LIST,
      setTaskTypeFilter: TASK_ACTION_SET_TYPE_FILTER_TASK_LIST,
      getTaskMeta: TASK_ACTION_GET_TASKS_META,
      reloadTasks: TASK_ACTION_RELOAD_TASK_LIST,
    }),
    onViewMoreButtonClick() {
      this.viewMoreButtonClicked = true;
      this.setCurrentPage(this.state.currentpage + 1);
    },
  },
  watch: {
    taskFetchParameter() {
      this.getTasks();
    },
    tasksLoading(v) {
      if (!v) {
        this.viewMoreButtonClicked = false;
      }
    },
  },
  destroyed() {
    clearInterval(this.getTaskMetaTimerID);
  },
};
</script>