<template>
  <h2 class="tool-title">Str to PHP array</h2>
  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="data">Data</label>
    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label for="data_delimiter">Delimiter</label>
    <input id="data_delimiter" v-model="toolData.dataDelimiter" placeholder="," type="text" v-on:keyup="result" :disabled="toolData.dataIsJson">

    <div>
      <input id="data_is_json" name="data_is_json" v-model="toolData.dataIsJson" v-on:change="result" type="checkbox"> <label for="data_is_json">is json</label>
    </div>
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="result">Result</label>
    <MonacoEditor name="result" language="php" :value="toolResult"></MonacoEditor>
  </div>
</template>

<script>
import axios from 'axios'
import { config } from '../../config';
import MonacoEditor from "@/components/MonacoEditor.vue";

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      toolData: {
        data: '',
        dataDelimiter: '',
        dataIsJson: false,
      },
      toolResult: '',
    };
  },
  methods: {
    result() {
      axios.post(`${config.APP_URL}/api/php/str_to_php_array.php`, {
        data: this.toolData.data,
        delimiter: this.toolData.dataDelimiter,
        mode: this.toolData.dataIsJson ? 'json' : null,
      })
        .then((response) => {
          this.toolResult = response.data;

          Promise.resolve(response);
        });
    }
  }
}
</script>

<style lang="scss">

</style>