<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-select block
                  v-model="language"
            :items="languages"
            label="Language"
                  item-value="mime"
                  item-text="name"
            dense
        ></v-select>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <codemirror v-model="code" :options="cmOptions" />
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-btn v-on:click="minify" block>
          Minify
        </v-btn>
      </v-col>
    </v-row>
    <v-row class="text-center">
      <v-col cols="12">
        <v-container fluid>
          <v-textarea
              label="Minified"
              v-model="minified"
          ></v-textarea>
        </v-container>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  import axios from "axios";

  export default {
    name: 'MinifierEditor',
    data () {
      return {
        code: '',
        minified: '',
        language: 'text/javascript',
        languages: [
          { mime: 'text/html', name: 'HTML' },
          { mime: 'text/css', name: 'CSS' },
          { mime: 'text/javascript', name: 'JavaScript' },
          { mime: 'application/json', name: 'JSON' },
          { mime: 'text/xml', name: 'XML' },
        ],
        cmOptions: {
          // codemirror options
          tabSize: 4,
          mode: this.language,
          lineNumbers: true,
          line: true,
        }
      }
    },
    methods: {
      async minify() {
        const {data} = await axios.post('http://localhost:3000/api', this.code, {
          headers: {
            'Content-Type': this.language
          }
        });

        this.minified = data;
      }
    },
  }
</script>
