<template>
  <div>
    <template v-if="readOnly">
      <div>
        <v-btn depressed tile @click="switchView()">
          Wiki<v-icon right>{{ switchViewIcon() }}</v-icon></v-btn
        >
      </div>
    </template>
    <template v-else>
      <span class="v-label v-label--active theme--light">
        Wiki
      </span>
      <div class="mt-2">
        <v-btn-toggle v-model="currentView">
          <v-btn color="white" value="0">
            <v-icon>fa-eye-slash</v-icon>
          </v-btn>

          <v-btn color="white" value="2">
            <v-icon>fa-eye</v-icon>
          </v-btn>

          <v-btn color="white" value="3">
            <v-icon>fa-edit</v-icon>
          </v-btn>

          <v-btn color="white" value="1">
            <v-icon>fa-columns</v-icon>
          </v-btn>
        </v-btn-toggle>
      </div>
    </template>

    <v-sheet
      v-if="currentView != 0"
      elevation="2"
      class="aywiki pa-2 pa-sm-6 mt-2"
    >
      <v-row>
        <!-- DESIGNER -->
        <!-- v-show="showDesigner()" -->
        <v-col v-if="showDesigner()" :cols="currentView == 1 ? 6 : 12">
          <div>
            <v-btn depressed tile> <v-icon>fa-bold</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-italic</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-strikethrough</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
            <v-btn depressed tile class="ml-1">
              <v-icon>fa-minus</v-icon></v-btn
            >
            <v-btn depressed tile> <v-icon>fa-quote-left</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-list-ul</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-list-ol</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-check-square</v-icon></v-btn>
            <v-btn depressed tile class="ml-1">
              <v-icon>fa-table</v-icon></v-btn
            >
            <v-btn depressed tile> <v-icon>fa-link</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
            <v-btn depressed tile class="ml-1"> <v-icon>fa-code</v-icon></v-btn>
            <v-btn depressed tile> <v-icon>fa-square-full</v-icon></v-btn>
          </div>
          <v-textarea
            @input="handleInput"
            v-model="localVal"
            auto-grow
          ></v-textarea>
        </v-col>
        <!-- WIKI -->
        <v-col v-if="showWiki()" :cols="currentView == 1 ? 6 : 12">
          <div class="aywiki" v-html="compiledOutput()"></div>
        </v-col>
      </v-row>
    </v-sheet>
  </div>
</template>
<script>
import marked from "marked";
import DOMPurify from "dompurify";
const HIDDEN_VIEW = 0;
const SPLIT_VIEW = 1;
const WIKI_VIEW = 2;
const DESIGN_VIEW = 3;

export default {
  created() {},
  data() {
    return {
      localVal: this.value,
      currentView: 0
    };
  },
  props: {
    value: String,
    readOnly: Boolean
  },
  watch: {
    value(value) {
      this.localVal = value;
    }
  },
  methods: {
    handleInput(val) {
      this.$emit("input", val);
      this.localVal = val;
    },
    switchViewIcon() {
      //return the icon that indicates what it will change to if you click it
      //mirror of switchview below

      if (this.readOnly) {
        if (this.currentView == HIDDEN_VIEW) {
          return "fa-eye";
        } else {
          return "fa-eye-slash";
        }
        return;
      }

      switch (this.currentView) {
        case HIDDEN_VIEW:
          return "fa-eye";
        case WIKI_VIEW:
          return "fa-columns";
        case SPLIT_VIEW:
          return "fa-feather";
        case DESIGN_VIEW:
          return "fa-eye";
      }
    },
    showWiki() {
      return this.currentView == WIKI_VIEW || this.currentView == SPLIT_VIEW;
    },
    showDesigner() {
      return this.currentView == DESIGN_VIEW || this.currentView == SPLIT_VIEW;
    },
    switchView() {
      //if user can't edit then cycle between hidden and wiki view
      if (this.readOnly) {
        if (this.currentView == HIDDEN_VIEW) {
          this.currentView = WIKI_VIEW;
        } else {
          this.currentView = HIDDEN_VIEW;
        }
        return;
      }
      //user can edit so switch OUT of hidden view but never into it
      //and cycle between design, split and wiki views only
      //never goes into hidden
      switch (this.currentView) {
        case HIDDEN_VIEW:
          this.currentView = WIKI_VIEW;
          break;
        case WIKI_VIEW:
          this.currentView = SPLIT_VIEW;
          break;
        case SPLIT_VIEW:
          this.currentView = DESIGN_VIEW;
          break;
        case DESIGN_VIEW:
          this.currentView = WIKI_VIEW;
          break;
      }
    },
    visibleIcon() {
      return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
    },
    compiledOutput() {
      return DOMPurify.sanitize(marked(this.localVal));
    }
  }
};

/**
todo:

flag as dirty when edited

if can't edit and no content then don't show at all
  - does it need to have a column wrapper then and remove it from the parent form?

Mobile view put editor and result in v-tab control so can swish back and forth while editing
Standard view maybe top and bottom better?

baseurl setting for local images:
https://marked.js.org/#/USING_ADVANCED.md#options

todo: event log type just for edit wiki?
  - this is because a wiki is not a discrete object in v8 so rights follow object itself and maybe it's necessary to know when wiki was edited?

Clean up the example markdown, go through and use mine and sprinkle in the marked sample stuff where it differs

Style the task markdown output, it looks pretty bleak right now
  I stole the css from toast it's in the notes, search for task-list-item
  also maybe there's a cleaner way try a google search once you see how they did it

 */
</script>
