<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-3">
          <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="import_">
                <option v-for="option in this.$options.imports" :key="option">{{
                  option
                }}</option>
              </select>
            </div>
          </div>
          <div class="d-flex flex-row mt-3 w-100 justify-content-between">
            <div class="flex-column w-100 mr-2">
              <div class="flex-row text-left">
                <small class="text-muted">
                  <translate>Importtype</translate>
                </small>
              </div>
              <select v-model="import_" class="custom-select" id="importtype">
                <option
                  v-for="option in this.$options.importtype"
                  :key="option"
                  >{{ option }}</option
                >
              </select>
            </div>
            <div class="flex-column w-100 ml-2">
              <div class="flex-row text-left">
                <small class="text-muted">
                  <translate>Schedule</translate>
                </small>
              </div>
              <select v-model="schedule" class="custom-select" id="period">
                <option v-for="option in this.$options.periods" :key="option">{{
                  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>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 v-if="eMailNotification" class="flex-column w-100 mr-2">
            <div class="flex-row text-left">
              <small class="text-muted"> <translate>Email</translate> </small>
            </div>
            <input class="form-control" type="text" />
          </div>
          <button type="submit" class="shadow-sm btn btn-info submit-button">
            <translate>Submit</translate>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "importscheduledetail",
  data() {
    return {
      schedule: null,
      import_: null,
      eMailNotification: false
    };
  },
  computed: {
    ...mapState("imports", ["importScheduleDetailVisible"])
  },
  methods: {
    save() {
      displayInfo({
        title: "Import",
        message: "under construction"
      });
    },
    closeDetailview() {
      this.$store.commit("imports/clearImportScheduleDetail");
      this.$store.commit("imports/setImportScheduleDetailInvisible");
    }
  },
  imports: [],
  importtype: [],
  on: "on",
  off: "off",
  periods: {
    DAILY: "daily",
    MONTHLY: "monthly"
  }
};
</script>

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

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