<template>
    <div class="card">
        <div class="card-header">G Code</div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <input type="file" ref="openFile" accept=".txt, .gcode" style="display:none" @change="openFile()" />
                    <button :disabled="!enabledControls.openFile" class="btn btn-sm btn-outline-secondary" @click="$refs.openFile.click()">Open…</button>
                    |
                    <button :disabled="!enabledControls.run" class="btn btn-sm btn-outline-secondary m-1" @click="run()">Run</button>
                    <button :disabled="!enabledControls.stop" class="btn btn-sm btn-outline-secondary m-1" @click="stop()">Stop</button>
                    <button :disabled="!enabledControls.pause" :class="'btn btn-sm btn-outline-secondary m-1' + (this.gCodeProcess.pauseFlag==true?' active':'')" @click="pause()">Pause</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <textarea v-model="gCode" rows="15" class="form-control form-control-sm"></textarea>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { confirm, alert } from '../js/dialogs.js'

    export default {
        props: {
            machineState: Object,
            gCodeProcess: Object,
            disabled: Boolean
        },
        data: function () {
            return {
                gCode: '',
            }
        },
        computed : {
            enabledControls() {
                let result = {'openFile': true, 'run': false, 'stop': false, 'pause': false, 'gCode': !this.disabled}
                result.run = ((this.machineState.status == 'Idle') && (this.gCodeProcess.stopFlag == false) && (this.gCodeProcess.pauseFlag == false) && (this.gCode.length > 0))
                result.stop = ((this.machineState.status == 'Jog') || (this.gCodeProcess.pauseFlag == true))
                result.pause = ((this.machineState.status == 'Jog') || (this.gCodeProcess.pauseFlag == true))
                return result
            }
        },
        methods: {
            openFile() {
                let file = this.$refs.openFile.files[0]

                if (file) {
                    let reader = new FileReader();
                    reader.readAsText(file, "UTF-8");
                    reader.onload = (evt)=> {
                        this.gCode = evt.target.result
                    }
                    reader.onerror = (evt)=> {
                        console.log(evt)
                        alert("Can't read file '" + file.name + "'", "Error", 'error')
                    }
                }
            },
            run () {
                let commands = this.gCode.split("\n")
                this.$emit('run', commands)
            },
            stop () {
                this.$emit('stop')
            },
            pause () {
                this.$emit('pause')
            }
        }
    }
</script>

<style>

</style>