<template>
  <div class="modal-content fm-modal-text-edit">
    <div class="modal-header">
      <h5 class="modal-title w-75 text-truncate">
        {{ lang.modal.editor.title }}
        <small class="text-muted pl-3">{{ selectedItem.basename }}</small>
      </h5>
      <button
        type="button"
        class="close"
        aria-label="Close"
        v-on:click="hideModal"
      >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <codemirror ref="fmCodeEditor" v-model="code" :options="cmOptions" />
    </div>
    <div class="modal-footer">
      <button class="btn btn-info" v-on:click="updateFile">
        {{ lang.btn.submit }}
      </button>
      <button class="btn btn-light" v-on:click="hideModal">
        {{ lang.btn.cancel }}
      </button>
    </div>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/mode/shell/shell";
import "codemirror/mode/css/css";
import "codemirror/mode/sass/sass";
import "codemirror/mode/htmlmixed/htmlmixed";
import "codemirror/mode/javascript/javascript";
import "codemirror/mode/vue/vue";
import "codemirror/mode/markdown/markdown";
import "codemirror/mode/xml/xml";
import "codemirror/mode/clike/clike";
import "codemirror/mode/php/php";
import "codemirror/mode/sql/sql";
import "codemirror/mode/lua/lua";
import "codemirror/mode/perl/perl";
import "codemirror/mode/python/python";
import "codemirror/mode/swift/swift";
import "codemirror/mode/ruby/ruby";
import "codemirror/mode/go/go";
import "codemirror/mode/yaml/yaml";
import "codemirror/mode/properties/properties";
import modal from "../mixins/modal";
import translate from "@/utils/translate";
import EventBus from "@/utils/eventBus";

export default {
  name: "TextEdit",
  mixins: [modal, translate],
  components: { codemirror },
  data() {
    return {
      code: "",
    };
  },
  mounted() {
    // get file for edit
    this.$store
      .dispatch("fm/getFile", {
        disk: this.selectedDisk,
        path: this.selectedItem.path,
      })
      .then((response) => {
        // add code
        this.code = response.data;

        // set size
        this.$refs.fmCodeEditor.codemirror.setSize(null, this.editorHeight);
      });
  },
  computed: {
    /**
     * Selected disk
     * @returns {*}
     */
    selectedDisk() {
      return this.$store.getters["fm/selectedDisk"];
    },

    /**
     * Selected file
     * @returns {*}
     */
    selectedItem() {
      return this.$store.getters["fm/selectedItems"][0];
    },

    /**
     * CodeMirror options
     * @returns {{tabSize: number, mode: *, theme: string, lineNumbers: boolean, line: boolean}}
     */
    cmOptions() {
      return {
        mode: this.$store.state.fm.settings.textExtensions[
          this.selectedItem.extension
        ],
        theme: "blackboard",
        lineNumbers: true,
        line: true,
      };
    },

    /**
     * Calculate the height of the code editor
     * @returns {number}
     */
    editorHeight() {
      if (this.$store.state.fm.modal.modalBlockHeight) {
        return this.$store.state.fm.modal.modalBlockHeight - 200;
      }

      return 300;
    },
  },
  methods: {
    // Update file
    updateFile() {
      const formData = new FormData();
      // add disk name
      formData.append("disk", this.selectedDisk);
      // add path
      formData.append("path", this.selectedItem.dirname);
      // add updated file
      formData.append(
        "file",
        new Blob([this.code]),
        this.selectedItem.basename
      );

      this.$store.dispatch("fm/updateFile", formData).then((response) => {
        // if file updated successfully
        if (response.data.result.status === "success") {
          // close modal window
          this.hideModal();
          EventBus.$emit("addNotification", {
            status: "success",
            message: response.data.result.message,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "~codemirror/lib/codemirror.css";
@import "~codemirror/theme/blackboard.css";

.fm-modal-text-edit {
  .modal-body {
    padding: 0;
  }
}
</style>
