<template>
  <div>
    <UIBoxHeader icon="clock" :title="title" :closeCallback="$parent.close" />
    <div v-if="mode === $options.MODES.LIST">
      <UISpinnerOverlay v-if="loading" />
      <UITableHeader
        :columns="[
          { id: 'id', title: `${idLabel}`, class: 'col-1' },
          { id: 'kind', title: `${typeLabel}`, class: 'col-1' },
          { id: 'user', title: `${ownerLabel}`, class: 'col-2' },
          { id: 'country', title: `${countryLabel}`, class: 'col-1' },
          { id: 'config.cron', title: `${scheduleLabel}`, class: 'col-2' },
          { id: 'config.send-email', title: `${emailLabel}`, class: 'col-2' }
        ]"
      />
      <UITableBody
        :data="filteredSchedules | sortTable(sortColumn, sortDirection)"
        :isActive="item => currentSchedule && item.id === currentSchedule.id"
      >
        <template v-slot:row="{ item: schedule }">
          <div class="table-cell py-1 col-1">{{ schedule.id }}</div>
          <div class="table-cell py-1 col-1">
            {{ schedule.kind.toUpperCase() }}
          </div>
          <div style="width:115px;" class="table-cell py-1">
            {{ schedule.user }}
          </div>
          <div style="width:55px;" class="table-cell py-1">
            {{ userCountries[schedule.user] }}
          </div>
          <div class="table-cell py-1 col-2">{{ schedule.config.cron }}</div>
          <div class="table-cell py-1 col-2">
            <font-awesome-icon
              v-if="schedule.config['send-email']"
              class="fa-fw mr-2"
              fixed-width
              icon="check"
            />
          </div>
          <div class="table-cell py-1 col justify-content-end">
            <button
              @click="triggerManualImport(schedule.id)"
              class="btn btn-xs btn-dark mr-1"
              :disabled="importScheduleDetailVisible"
            >
              <font-awesome-icon icon="play" fixed-width />
            </button>
            <button
              @click="editSchedule(schedule.id)"
              class="btn btn-xs btn-dark mr-1"
              :disabled="importScheduleDetailVisible"
            >
              <font-awesome-icon icon="pencil-alt" fixed-width />
            </button>
            <button
              @click="deleteSchedule(schedule)"
              class="btn btn-xs btn-dark"
              :disabled="importScheduleDetailVisible"
            >
              <font-awesome-icon icon="trash" fixed-width />
            </button>
          </div>
        </template>
      </UITableBody>
    </div>
    <ImportDetails v-if="mode === $options.MODES.EDIT"></ImportDetails>
    <div
      class="text-right border-top p-2"
      v-if="mode === $options.MODES.LIST && !isOnetime"
    >
      <button :key="3" @click="newConfiguration()" class="btn btn-sm btn-info">
        <translate>New import</translate>
      </button>
    </div>
  </div>
</template>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapState, mapGetters } from "vuex";
import { displayInfo, displayError } from "@/lib/errors";
import { HTTP } from "@/lib/http";
import {
  IMPORTTYPES,
  MODES
  // IMPORTTYPEKIND,
  // initializeCurrentSchedule
} from "@/store/importschedule";
import { sortTable } from "@/lib/mixins";

export default {
  mixins: [sortTable],
  components: {
    ImportDetails: () => import("./ImportDetails")
  },
  data() {
    return {
      loading: false,
      sortColumn: "",
      sortDirection: ""
    };
  },
  methods: {
    back() {
      this.$store.commit("importschedule/setListMode");
    },
    newConfiguration() {
      this.$store.commit("importschedule/setEditMode");
    },
    getSchedules() {
      this.loading = true;
      this.$store
        .dispatch("importschedule/loadSchedules")
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    editSchedule(id) {
      this.$store
        .dispatch("importschedule/loadSchedule", id)
        .then(() => {
          this.$store.commit("importschedule/setEditMode");
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    triggerManualImport(id) {
      HTTP.get("/imports/config/" + id + "/run", {
        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
      })
        .then(response => {
          const { id } = response.data;
          displayInfo({
            title: this.$gettext("Imports"),
            message: this.$gettext("Manually triggered import: #") + id
          });
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    deleteSchedule(schedule) {
      console.log(schedule);
      this.$store.commit("application/popup", {
        icon: "trash",
        title: this.$gettext("Delete Import"),
        content:
          this.$gettext("Do you really want to delete the import with ID") +
          `<b>${schedule.id}</b>` +
          this.$gettext("of type") +
          `<b>${schedule.kind.toUpperCase()}</b>?`,
        confirm: {
          label: this.$gettext("Delete"),
          icon: "trash",
          callback: () => {
            this.$store
              .dispatch("importschedule/deleteSchedule", schedule.id)
              .then(() => {
                this.getSchedules();
                displayInfo({
                  title: this.$gettext("Imports"),
                  message: this.$gettext("Deleted import: #") + schedule.id
                });
              })
              .catch(error => {
                const { status, data } = error.response;
                displayError({
                  title: this.$gettext("Backend Error"),
                  message: `${status}: ${data.message || data}`
                });
              });
          }
        },
        cancel: {
          label: this.$gettext("Cancel"),
          icon: "times"
        }
      });
    }
  },
  computed: {
    ...mapState("application", ["searchQuery"]),
    ...mapState("importschedule", [
      "mode",
      "schedules",
      "currentSchedule",
      "importScheduleDetailVisible"
    ]),
    ...mapGetters("usermanagement", ["userCountries"]),
    countryLabel() {
      return this.$gettext("Country");
    },
    isOnetime() {
      for (let kind of [
        this.$options.IMPORTTYPES.SOUNDINGRESULTS,
        this.$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS,
        this.$options.IMPORTTYPES.WATERWAYPROFILES
      ]) {
        if (kind === this.currentSchedule.importType) return true;
      }
      return false;
    },
    title() {
      return this.$gettext("Imports");
    },
    filteredSchedules() {
      return this.schedules.filter(s => {
        return (s.id + s.kind)
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase());
      });
    },
    importScheduleLabel() {
      return this.$gettext("Import Schedule");
    },
    idLabel() {
      return this.$gettext("ID");
    },
    typeLabel() {
      return this.$gettext("Type");
    },
    ownerLabel() {
      return this.$gettext("Owner");
    },
    scheduleLabel() {
      return this.$gettext("Schedule");
    },
    emailLabel() {
      return this.$gettext("Email");
    }
  },
  mounted() {
    this.$store
      .dispatch("usermanagement/loadUsers")
      .then(() => {
        this.$store.commit("importschedule/setListMode");
        this.$store.commit("importschedule/clearCurrentSchedule");
        this.getSchedules();
      })
      .catch(error => {
        const { status, data } = error.response;
        displayError({
          title: this.$gettext("Backend Error"),
          message: `${status}: ${data.message || data}`
        });
      });
  },
  IMPORTTYPES: IMPORTTYPES,
  MODES: MODES
};
</script>