<template>
    <div class="pdftool" :style="selectedSurvey ? 'bottom: 140px' : ''">
        <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer">
            <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i>
        </div>
        <div :class="style">
            <div v-if="showPdfTool" class="card-body">
                <div class="headline">
                    <h4>Generate PDF</h4>
                </div>
                <hr>
                <b>Chose format:</b>
                <br>
                <select v-model="form.format" class="d-block w-100">
                    <option>landscape</option>
                    <option>portrait</option>
                </select>
                <small class="d-block my-2">
                    <input
                        type="radio"
                        id="pdfexport-downloadtype-download"
                        value="download"
                        v-model="form.downloadType"
                        selected
                    >
                    <label for="pdfexport-downloadtype-download" class="ml-1 mr-2">Download</label>
                    <input
                        type="radio"
                        id="pdfexport-downloadtype-open"
                        value="open"
                        v-model="form.downloadType"
                    >
                    <label for="pdfexport-downloadtype-open" class="ml-1">Open in new window</label>
                </small>
                <button
                    @click="download"
                    type="button"
                    class="btn btn-sm btn-info d-block w-100"
                >Generate PDF</button>
            </div>
        </div>
    </div>
</template>

<style lang="sass" scoped>
.pdftool
  position: absolute
  margin-right: $offset
  margin-bottom: $offset
  bottom: 96px
  right: 0

.inner
  background-color: white
  margin-left: $small-offset
  opacity: $slight-transparent
  text-align: left

.pdftoolcollapsed
  min-height: $icon-height
  width: $icon-width
  transition: $transition-fast

.pdftoolexpanded
  width: $identify-width

.minimizer
  position: absolute
  z-index: 2
  right: 0
  top: 0
  margin-top: $x-small-offset
  height: $icon-width
  width: $icon-height
</style>

<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):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapState } from "vuex";
//import { HTTP } from "../application/lib/http";

export default {
  name: "pdftool",
  data() {
    return {
      form: {
        format: "landscape",
        downloadType: "download"
      }
    };
  },
  computed: {
    ...mapState("application", ["showPdfTool"]),
    ...mapState("bottlenecks", ["selectedSurvey"]),
    style() {
      return {
        "ui-element": true,
        rounded: true,
        inner: true,
        shadow: true,
        pdftoolexpanded: this.showPdfTool,
        pdftoolcollapsed: !this.showPdfTool
      };
    }
  },
  methods: {
    download() {
      // generate PDF and open it
      // TODO: replace this src with an API reponse after actually generating PDFs
      let src =
        this.form.format === "landscape"
          ? "/img/PrintTemplate-Var2-Landscape.pdf"
          : "/img/PrintTemplate-Var2-Portrait.pdf";

      let a = document.createElement("a");
      a.href = src;

      if (this.form.downloadType === "download")
        a.download = src.substr(src.lastIndexOf("/") + 1);
      else a.target = "_blank";

      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }
};
</script>