<template>
  <div
    class="importscheduledetails  fadeIn animated"
    v-if="importScheduleDetailVisible"
  >
    <div class="card h-100 shadow-xs">
      <h6
        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
      >
        <translate>New import</translate>
        <span @click="closeDetailview" class="closebutton">
          <font-awesome-icon icon="times"></font-awesome-icon>
        </span>
      </h6>
      <div class="card-body">
        <form @submit.prevent="save" class="ml-2 mr-2">
          <div class="d-flex flex-row w-100">
            <div class="flex-column w-100">
              <div class="flex-row text-left">
                <small class="text-muted">
                  <translate>Imports</translate>
                </small>
              </div>
              <select v-model="import_" class="custom-select" id="importtype">
                <option :value="$options.IMPORTTYPES.BOTTLENECK"
                  ><translate>Bottlenecks</translate></option
                >
              </select>
            </div>
          </div>
          <div class="d-flex flex-row mt-3 w-100 justify-content-between">
            <div class="flex-column w-100">
              <div class="flex-row text-left">
                <small class="text-muted">
                  <translate>Importtype</translate>
                </small>
              </div>
              <select
                v-model="importSource"
                class="custom-select"
                id="importsource"
              >
                <option></option>
              </select>
            </div>
          </div>
          <div class="flex-column mt-3 w-100 mr-2">
            <div class="flex-row text-left">
              <small class="text-muted">
                <translate>Simple Schedule</translate>
              </small>
            </div>
            <div class="flex-flex-row text-left">
              <toggle-button
                v-model="easyCron"
                class="mt-2"
                :speed="100"
                :labels="{
                  checked: this.$options.on,
                  unchecked: this.$options.off
                }"
                :width="50"
                :height="20"
              />
            </div>
          </div>
          <div class="flex-column w-100 mr-2">
            <div class="flex-row text-left">
              <small class="text-muted">
                <translate>Schedule</translate>
              </small>
            </div>
            <div v-if="easyCron" class="text-left w-50">
              <select v-model="simple" class="form-control"
                ><option value="weekly"><translate>Weekly</translate></option>
                <option value="monthly"><translate>Monthly</translate></option>
              </select>
            </div>
            <div v-if="!easyCron" class="text-left w-100">
              <div class="d-flex flex-row">
                <h4 class="mt-auto mb-auto mr-2">{{ $options.EVERY }}</h4>
                <select
                  style="width: 130px;"
                  v-model="cronMode"
                  class="form-control"
                  @change="clearInputs"
                >
                  <option
                    v-for="(option, key) in $options.CRONMODE"
                    :value="key"
                    :key="key"
                    >{{ option }}</option
                  >
                </select>
                <div v-if="cronMode == 'hour'" class="ml-2 d-flex flex-row">
                  <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4>
                  <input
                    v-model="minutes"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4>
                </div>
                <div v-if="cronMode == 'day'" class="ml-2 d-flex flex-row">
                  <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4>
                  <input
                    v-model="hour"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <input
                    v-model="minutes"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4>
                </div>
                <div v-if="cronMode == 'week'" class="ml-2 d-flex flex-row">
                  <h4 class="ml-2 mr-3 mt-auto mb-auto">{{ $options.ON }}</h4>
                  <select v-model="day" class="form-control">
                    <option
                      v-for="(option, key) in $options.DAYSOFWEEK"
                      :key="key"
                      :value="key"
                      >{{ option }}</option
                    >
                  </select>
                  <h4 class="ml-2 mt-auto mb-auto">{{ $options.AT }}</h4>
                  <input
                    v-model="hour"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <input
                    v-model="minutes"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                </div>
                <div v-if="cronMode == 'month'" class="ml-2 d-flex flex-row">
                  <h4 class="ml-2 mt-auto mb-auto">{{ $options.ON }}</h4>
                  <input
                    v-model="dayOfMonth"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4>
                  <input
                    v-model="hour"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <input
                    v-model="minutes"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4>
                </div>
                <div v-if="cronMode == 'year'" class="ml-2 d-flex flex-row">
                  <h4 class="ml-2 mt-auto mb-auto">{{ $options.ON }}</h4>
                  <input
                    v-model="dayOfMonth"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4>
                  <select v-model="month" class="ml-2 mr-2 form-control">
                    <option
                      v-for="(option, key) in $options.MONTHS"
                      :value="key"
                      :key="key"
                      >{{ option }}</option
                    >
                  </select>
                  <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4>
                  <input
                    v-model="hour"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                  <input
                    v-model="minutes"
                    style="width:50px"
                    class="ml-2 mr-2 form-control"
                    type="text"
                  />
                </div>
              </div>
              <div class="mt-3 w-50 d-flex flex-row">
                <h5 class="mt-auto mb-auto mr-2">
                  <translate>Cronstring</translate>
                </h5>
                <input class="form-control" :value="cronString" type="text" />
              </div>
            </div>
          </div>
          <div class="flex-column mt-3 w-100 mr-2">
            <div class="flex-row text-left">
              <small class="text-muted">
                <translate>Email Notification</translate>
              </small>
            </div>
            <div class="flex-flex-row text-left">
              <toggle-button
                v-model="eMailNotification"
                class="mt-2"
                :speed="100"
                :labels="{
                  checked: this.$options.on,
                  unchecked: this.$options.off
                }"
                :width="50"
                :height="20"
              />
            </div>
          </div>
          <div class="flex-column w-100 mr-2">
            <div class="flex-row text-left">
              <small class="text-muted"> <translate>Email</translate> </small>
            </div>
            <input
              :disabled="!eMailNotification"
              class="form-control"
              type="text"
            />
          </div>
          <button type="submit" class="shadow-sm btn btn-info submit-button">
            <translate>Submit</translate>
          </button>
          <button type="button" class="shadow-sm btn btn-outline-info trigger">
            <font-awesome-icon
              class="fa-fw mr-2"
              fixed-width
              icon="play"
            ></font-awesome-icon
            ><translate>Trigger import</translate>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { displayInfo } from "../../lib/errors.js";
import app from "../../main.js";

export default {
  name: "importscheduledetail",
  data() {
    return {
      importType: null,
      schedule: null,
      import_: null,
      importSource: null,
      eMailNotification: false,
      easyCron: true,
      cronMode: "",
      minutes: null,
      month: null,
      hour: null,
      day: null,
      dayOfMonth: null,
      simple: null
    };
  },
  watch: {
    cronString() {
      if (this.isWeekly(this.cronString)) {
        this.simple = "weekly";
      }
      if (this.isMonthly(this.cronString)) {
        this.simple = "monthly";
      }
    }
  },
  IMPORTTYPES: {
    BOTTLENECK: "BOTTLENECK"
  },
  EVERY: app.$gettext("Every"),
  MINUTESPAST: app.$gettext("minutes past"),
  ON: app.$gettext("on"),
  OF: app.$gettext("of"),
  AT: app.$gettext("at"),
  OCLOCK: app.$gettext("o' clock"),
  CRONMODE: {
    "15minutes": app.$gettext("15 minutes"),
    hour: app.$gettext("hour"),
    day: app.$gettext("day"),
    week: app.$gettext("week"),
    month: app.$gettext("month"),
    year: app.$gettext("year")
  },
  DAYSOFWEEK: {
    1: app.$gettext("Monday"),
    2: app.$gettext("Tuesday"),
    3: app.$gettext("Wednesday"),
    4: app.$gettext("Thursday"),
    5: app.$gettext("Friday"),
    6: app.$gettext("Saturday"),
    0: app.$gettext("Sunday")
  },
  MONTHS: {
    1: app.$gettext("January"),
    2: app.$gettext("February"),
    3: app.$gettext("March"),
    4: app.$gettext("April"),
    5: app.$gettext("May"),
    6: app.$gettext("June"),
    7: app.$gettext("July"),
    8: app.$gettext("August"),
    9: app.$gettext("September"),
    10: app.$gettext("October"),
    11: app.$gettext("November"),
    12: app.$gettext("December")
  },
  computed: {
    ...mapState("imports", ["importScheduleDetailVisible"]),
    cronString: {
      get() {
        let getValue = value => {
          return this[value] ? this[value] : "*";
        };
        if (this.cronMode === "15minutes") return "*/15 * * * *";
        const min = getValue("minutes");
        const h = getValue("hour");
        const dm = getValue("dayOfMonth");
        const m = getValue("month");
        const wd = getValue("day");
        return `${min} ${h} ${dm} ${m} ${wd}`;
      }
    }
  },
  methods: {
    isWeekly(cron) {
      return /\d{1,2} \d{1,2} \* \* \d{1}/.test(cron);
    },
    isMonthly(cron) {
      return /\d{1,2} \d{1,2} \d{1,2} \* \*/.test(cron);
    },
    clearInputs() {
      this.minutes = null;
      this.month = null;
      this.hour = null;
      this.day = null;
      this.dayOfMonth = null;
    },
    save() {
      displayInfo({
        title: "Import",
        message: "under construction"
      });
    },
    closeDetailview() {
      this.$store.commit("imports/clearImportScheduleDetail");
      this.$store.commit("imports/setImportScheduleDetailInvisible");
    }
  },
  imports: [],
  on: "on",
  off: "off",
  periods: {
    DAILY: "daily",
    MONTHLY: "monthly"
  }
};
</script>

<style lang="scss" scoped>
.importscheduledetails {
  height: 620px;
  width: 100%;
  margin-top: $offset;
  margin-right: $offset;
}

.trigger {
  position: absolute;
  left: $large-offset;
  bottom: $offset;
}

.submit-button {
  position: absolute;
  right: $large-offset;
  bottom: $offset;
}
</style>