<div id="app" class="container" style=background-color:black>
    <h1 style=color:blue;>JSON/PHP Array Converter</h1>
    <p>The following converts a PHP short tag array or a JSON array into the opposite array type. The script is meant to cut down on JSON array conversion time. Most useful for mapping conversion, etc.</p>

    <label for="type_selection">Convert From</label>
    <select id="type_selection" v-model="selected">
        <option v-for="option in options" :value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>

    <p>Selected: {{ selected }}</span></p>

    <label for="convert_src">Source</label>
    <textarea id="convert_src" class="form-control" rows="10" v-model="src_array" placeholder="Enter your source array here"></textarea>

    <label for="convert_dst">Converted</label>
    <textarea style=background-color:orange; id="convert_dst" class="form-control" rows="10" v-model="dst_array"></textarea>
</div>

</body>

new Vue({
    el: '#app',
    data: {
        selected: 'json',
        src_array: '',
        options: [{
            text: 'JSON Array',
            value: 'json'
        }, {
            text: 'PHP Array',
            value: 'php'
        }, ]
    },
    computed: {
        // a computed getter
        dst_array: function() {
            if (this.src_array === "") {
                return;
            }
            
            var cdata = '';

            if (this.selected === 'php') {
                var temp = this.src_array;

                temp = temp.replace(/^\$[a-zA-Z0-9-_]+\s*=\s*\[/, '');
                temp = temp.replace(/\[/g, '{');
                temp = temp.replace(/]/g, '}');
                temp = temp.replace(/\s*=>\s*"/g, ': "');
                temp = temp.replace(/\s*=>\s*'/g, ': \'');
                temp = temp.replace(/\s*=>\s*{'/g, ': {');

                cdata = "[";
                cdata += temp;
                cdata += "]";
                return cdata;
            } else {
                cdata = "public $params = [\n";

                var temp = this.src_array;

                if (temp.substr(0, 1) === "[" || temp.substr(0, 1) === "{") {
                    temp = temp.substr(1);
                }

                if (temp.substring(temp.length - 1, temp.length) === "]" || 
                    temp.substring(temp.length - 1, temp.length) === "}") {
                    
                    temp = temp.substr(0, temp.length - 1).trim();
                }

                temp = temp.replace(/\{/g, '[');
                temp = temp.replace(/\}/g, ']');
                temp = temp.replace(/\:\s*"/g, ' => "');
                temp = temp.replace(/\:\s*'/g, ' => \'');
                temp = temp.replace(/\:\s*\[/g, ' => [');
                cdata += temp;
                cdata += "\n];";
                return cdata;
            }
        }
    }
});