<template>
    <div class="ui">
      <span class="status">current view: {{current}}</span>
      <button class="float" @click="sendSwitch">
        toggle view
      </button>
      <div class="views">
        <div v-if="current !== 'preview'" class="markdown">
          <textarea autofocus rows="" cols="1" wrap="hard" v-model="content"></textarea>
        </div>
        <div v-if="current !== 'markdown'" class="preview">
          <div v-html="markdown"></div>
        </div>
      </div>
    </div>
</template>

<script>
import MarkdownIt from 'markdown-it';
import {
    service,
    TRANSITION_KEYS as UI_SEND_KEYS
} from './machine/ui';

const md = new MarkdownIt()

export default {
  name: 'Ui',
  props: {},
  data: () => ({
    service,
    current: service.machine.current,
    context: service.machine.context,
    content: '',
  }),
  methods: {
      send: function(t) {
          this.service.send(t)
          this.current = this.service.machine.current;
          this.context = this.service.machine.context;
      },
      sendSwitch: function() {
          this.send(UI_SEND_KEYS.SWITCH)
      },
  },
  computed: {
    markdown: self => md.render(self.content)
  }
}
</script>

<style lang="scss" scoped>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

  $primary: #25283d;
  $secondary: #FFFFFF;
  $thirdinary: #5C80BC;

  .status {
    font-family: monospace;
    position: absolute;
    top: 10px;
    left: -1rem;
    padding: .25rem 1rem .25rem 2rem;
    background: $thirdinary;
    color: $secondary;
    text-transform: uppercase;
    font-size: .6rem;
    font-weight: 600;
    border-radius: 15px;
    letter-spacing: .15rem;
  }

  .float {
    position: absolute;
    top: 10px;
    right: 1em;
    background: $thirdinary;
    border: none;
    border-radius: 5px;
    padding: .5rem .5rem;
    outline: none;
    background: $secondary;
    color: $thirdinary;
    -webkit-box-shadow: 4px 3px 21px -3px rgba(0,0,0,0.8); 
    box-shadow: 4px 3px 21px -3px rgba(0,0,0,0.8);
    text-transform: capitalize;
    font-weight: 600;
  }

  button:hover {
    cursor: pointer;
  }

  button:active {
    cursor: default;
    background: $primary;
  }

  .ui, .views  {
    display: flex;
    justify-content: center;
  }

  .ui > div {
    flex: 1 1 auto;
  }

  .views {
    flex-direction: row;
    
    @media screen and (max-width: 450px) {
      flex-direction: column;
    }

    > div {
      width: 100%;
      min-width: 50%;

      @media screen and (max-width: 450px) {
        height: 100%;
        min-height: 50%;
      }
    }

    .markdown, .preview {
      display: flex;
      justify-content: center;

      > textarea, > div {
        width: 100%;
        min-width: 50%;
        margin: 80px 50px 50px;
      }
    }

    .markdown {
      background: $primary;
      color: $secondary;
    
      textarea {
        font-family: 'Roboto', sans-serif;
        background: $primary;
        color: $secondary;
        border: 0;
        padding: 0;
        outline: none;
        resize: none;
      }
    }

    .preview {
      background: $secondary;
      color: $primary;

      > div {
        text-align: left;

      }
    }
  }

</style>