<template>
  <v-card class="mx-auto my-12" max-width="374">
    <v-dialog @click:outside="start_reload()" v-model="admin_dialog">
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark @click="this.toggle_admin()">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>Administration: {{ title }} par {{ fullname }}</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <ImpressionRequestInfos
          :id="this.id"
          @startReload="start_reload"
          @stopReload="stop_reload"
          :key="imprInfoKey"
        ></ImpressionRequestInfos>
      </v-card>
    </v-dialog>

    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>{{ title }} par {{ fullname }}</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-responsive :aspect-ratio="16/9">
          <model-stl style :backgroundColor="stl_background" :src="this.stl_path()"></model-stl>
        </v-responsive>
      </v-card>
    </v-dialog>

    <model-stl style="height: 100px" v-show="show_stl" class="model" :backgroundColor="stl_background" :src="this.stl_path()"></model-stl>
    <v-btn @click="toggle_object">Preview</v-btn>
    <v-btn v-show="show_stl" block v-on:click="dialog = true">Plein écran</v-btn>
    <v-card-title>{{ title }}</v-card-title>
    <v-card-subtitle class="text-left">
      Date d'ajout: {{ creation }}
      <br />
      Modifié: {{ last_modified }}
    </v-card-subtitle>

    <v-tooltip left>
      <template v-slot:activator="{ on }">
        <v-card-text align="left" v-on="on">
          <v-icon color="blue">mdi-account</v-icon>
          &nbsp;{{ fullname }}
        </v-card-text>
      </template>
      <span>Auteur</span>
    </v-tooltip>

    <v-tooltip left>
      <template v-slot:activator="{ on }">
        <v-card-text align="left" v-on="on">
          <v-icon color="blue">mdi-dip-switch</v-icon>
          &nbsp;{{ project }}
        </v-card-text>
      </template>
      <span>Projet</span>
    </v-tooltip>

    <v-tooltip left>
      <template v-slot:activator="{ on }">
        <v-card-text align="left" v-on="on">
          <v-icon :color="status_color">{{ status_icon }}</v-icon>
          &nbsp;&nbsp;&nbsp;{{ status_text }}
        </v-card-text>
      </template>
      <span>Status</span>
    </v-tooltip>

    <v-alert v-if="this.status == 10" type="warning">{{ reject_message }}</v-alert>

    <v-tooltip left>
      <template v-slot:activator="{ on }">
        <v-card-text align="left" v-show="show_recup()" v-on="on">
          <v-icon color="green">mdi-fingerprint</v-icon>
          &nbsp;{{ recup_id }}
        </v-card-text>
      </template>
      <span>Identifiant pour récupération</span>
    </v-tooltip>

    <v-tooltip left>
      <template v-slot:activator="{ a }">
        <v-card-text align="left" v-show="show_print_state()" v-on="a">
          <v-icon color="grey">mdi-clock-time-four</v-icon>
          &nbsp;{{ print_state }}
        </v-card-text>
      </template>
      <span>État de l'impression</span>
    </v-tooltip>

    <v-card-subtitle>
      <!-- <div class="my-4 subtitle-1"> -->
      {{ description }}
      <!-- </div> -->
    </v-card-subtitle>

    <v-card-actions>
      <v-container align="center" justify="center">
        <v-col>
          <v-btn color="indigo" v-on:click="download_stl">
            <v-icon color="blue">mdi-cloud-download</v-icon>&nbsp;STL
          </v-btn>
          <v-btn color="indigo" v-on:click="download_gcode" v-show="show_gcode()">
            <v-icon color="blue">mdi-cloud-download</v-icon>&nbsp;GCODE
          </v-btn>
          <!-- <v-btn color="indigo" v-on:click="infos" :disabled="!show_edit()">
            <v-icon color="blue">mdi-pencil</v-icon>&nbsp;Edit
          </v-btn> -->
        </v-col>
        <v-col>
          <v-btn
            color="indigo"
            v-on:click="infos"
            @click="toggle_admin()"
            v-show="show_admin()"
          >
            <v-icon color="red">mdi-hammer-screwdriver</v-icon>&nbsp;Admin
          </v-btn>
        </v-col>
      </v-container>
    </v-card-actions>
  </v-card>
</template>

<script>
import ImpressionRequestInfos from "./ImpressionRequestProcessComponent";
import { ModelStl } from "vue-3d-model";
import utils from '@/utils/utils.js'
import axios from "axios";
import { status_to_text, status_to_icon_info } from "@/utils/utils";

export default {
  name: "ImpressionRequest",
  components: {
    ModelStl,
    ImpressionRequestInfos
  },
  updated() {
    if (this.updated) {
      this.updated = false;
      return;
    }
    this.updated = true;
    this.reload_admin_screen();
  },
  computed: {
    status_text() {
      return status_to_text(this.status);
    },
    status_icon() {
      return status_to_icon_info(this.status).text;
    },
    status_color() {
      return status_to_icon_info(this.status).color;
    },
    base_infos() {
      return this.admin
        ? this.$store.state.admin_requests_dict[this.id]
        : this.$store.state.my_request_dict[this.id];
    },
    status() {
      return this.base_infos.status;
    },
    stl() {
      return this.base_infos.stl;
    },
    title() {
      return this.base_infos.title;
    },
    description() {
      return this.base_infos.description;
    },
    project() {
      return this.base_infos.project;
    },
    fullname() {
      return this.base_infos.author;
    },
    gcode() {
      return this.base_infos.gcode;
    },
    recup_id() {
      return this.base_infos.recup;
    },
    creation() {
      return this.base_infos.creation;
    },
    last_modified() {
      return this.base_infos.last_modification;
    },
    reject_message() {
      return this.base_infos.reject_message;
    },
    print_state() {
      if (! this.base_infos.progress || Math.ceil(this.base_infos.progress['progress']) <= 1) {
        return "??% - ?? h, ?? min, ?? sec"
      }
      return Math.floor(this.base_infos.progress['progress']) + "% - " + this.convert_time(this.base_infos.progress["printTimeLeft"])
    }
  },
  methods: {
    download_file(url, filename) {
      axios({
        url: url,
        baseURL: "",
        method: "GET",
        responseType: "blob" // important
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      });
    },
    convert_time(d) {
      return utils.secondsToHms(d)
    },
    show_print_state() {
      return this.status == 3 // printing
    },
    toggle_object() {
      this.show_stl = !this.show_stl;
    },
    download_stl() {
      this.download_file(
        this.stl_path(),
        this.title + " " + this.fullname + ".stl"
      ); // TODO change filename ?
    },
    download_gcode() {
      this.download_file(
        this.gcode_path(),
        this.title + " " + this.fullname + ".gcode"
      );
    },
    infos() {},
    stl_path() {
      return `/myfab/files/${this.stl}`;
    },
    gcode_path() {
      return `/myfab/files/${this.gcode}`;
    },
    show_gcode() {
      return this.gcode != null && this.gcode != "";
    },
    show_admin() {
      return (this.$store.state.admin && this.admin) && (this.status != 5 && this.status != 6);
    },
    show_recup() {
      return this.status == 4;
    },
    show_edit() {
      return this.status == 0 || this.show_admin();
    },
    stl_fullscreen() {},
    reload_admin_screen() {
      this.imprInfoKey += 1;
    },
    stop_reload() {
      console.log("[DEBUG] Stop reload")
      this.$emit("stopReload");
    },
    start_reload() {
      console.log("[DEBUG] Start reload")
      this.$emit("startReload");
    },
    toggle_admin() {
      this.admin_dialog = !this.admin_dialog
      if(this.admin_dialog)
        this.stop_reload()
      else
        this.start_reload()
    }
  },
  props: ["id", "admin"],
  data() {
    return {
      show_stl: false,
      dialog: false,
      admin_dialog: false,
      stl_background: "#1e1e1e",
      imprInfoKey: 1,
      updated: false
    };
  }
};
</script>

<style>
.model {
  height: 100%;
  max-height: 200px;
  height: 200px;
}
</style>
