<template>
  <div class="fp-debug-panel"
       @click="setDebug(true)"
       @dblclick="setDebug(false)"
       :class="{'active': editor.debug}">
    <pre class="code language-json line-numbers" v-html="html"></pre>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import Prism from 'prismjs';
import 'prismjs/components/prism-json';

export default {
  name: "FpDebugPanel",
  computed: {
    ...mapState({
      'p': state => state.poster.p,
      'editor': state => state.editor
    }),
    html() {
      return Prism.highlight(JSON.stringify(this.p, '', 2), Prism.languages.json, 'json');
    }
  },
  methods: {
    ...mapActions({
      'setDebug': 'editor/setDebug'
    })
  }
}
</script>

<style scoped>
.fp-debug-panel {
  background-color: #2c3e5088;
  color: #f1f1f1;
  position: absolute;
  top: 0;
  z-index: 100;
  cursor: default;
  /*user-select: text;*/
  transition: left .2s ease-in-out;
  /*transition: transform 1s ease-in 1s;*/
  width: 620px;
  height: calc(100vh);
  overflow: auto;
  left: -619px;
}

.fp-debug-panel.active {
  left: 0;
}

.fp-debug-panel .code {
  background-color: #2c3e5088;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-size: 13px;
}
</style>