<template>
    <div class="border p-3 mt-1">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a :class="'nav-link' + (tab==0?' active':'')" @click="tab=0">Jog Controller</a>
            </li>
            <li class="nav-item">
                <a :class="'nav-link' + (tab==1?' active':'')" @click="tab=1">Toolbox</a>
            </li>
        </ul>

        <div v-if="tab==0" class="p-2">
            <div class="row">
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('X-Y+')">🢄</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Y+')">🢁Y+</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('X+Y+')">🢅</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Z+')">Z+</button></div>
            </div>
            <div class="row">
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('X-')">🡸X-</button></div>
                <div class="col p-1 text-nowrap">

                    <div class="row p-0 m-0">
                        <div class="col p-0 m-0">
                            <button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('RR')">⭮</button>
                        </div>
                        <div class="col-auto p-1 m-0"></div>
                        <div class="col p-0 m-0">
                            <button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('RL')">⭯</button>
                        </div>
                    </div>
                    
                </div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('X+')">X+🡺</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Parking')" title="Parking">P</button></div>
            </div>
            <div class="row">
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('X-Y-')">🢇</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Y-')">🢃Y-</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('X+Y-')">🢆</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Z-')">Z-</button></div>
            </div>
            
            <div class="row">
                <div class="col p-1">
                    Step size XYZ (mm): <input v-model="stepSize" type="number" step="1.0" class="form-control form-control-sm">
                </div>
            </div>
            <div class="row">
                <div class="col p-1">
                    Feed rate XYZ: <input v-model="feedRateXYZ" type="number" step="1.0" class="form-control form-control-sm">
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col p-1">
                    Steps A (1.0 setep = 1 turn): <input v-model="rotateStep" type="number" step="0.1" class="form-control form-control-sm">
                </div>
            </div>

            <div class="row">
                <div class="col p-1">
                    Feed rate A: <input v-model="feedRateA" type="number" step="1.0" class="form-control form-control-sm">
                </div>
            </div>

            <div class="row mt-4" v-if="settings.heads">
                <div class="col p-1" v-for="valve, n in settings.heads">
                    <div class="form-check form-switch">
                        <input v-model="valves[n]" @click="toggleValve(n)" :disabled="disabled" class="form-check-input" type="checkbox" role="switch" :id="'valve'+n">
                        <label class="form-check-label" :for="'valve'+n">Valve {{ n+1 }}</label>
                    </div>
                </div>
            </div>

        </div>
        <div v-if="tab==1">
            <div class="row">
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('HomeResetZero')">Home Machine & Reset Zero</button></div>
                <div class="col p-1"><button :disabled="!enabledUnderAlaram" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Home')">Home Machine</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('ResetZero')">Reset Zero</button></div>
            </div>

            <div class="row">
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Return')">Return to Zero XY</button></div>
                <div class="col p-1"><button :disabled="disabled" class="btn btn-sm btn-outline-secondary jog-100" @click="command('ReturnZ')">Return to Zero Z</button></div>
            </div>

            <div class="row">
                <div class="col p-1"><button :disabled="!enabledUnderAlaram" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Unlock')">Unlock</button></div>
            </div>

            <div class="row">
                <div class="col p-1"><button :disabled="!enabledUnderAlaram" class="btn btn-sm btn-outline-secondary jog-100" @click="command('State')">Get State</button></div>
                <div class="col p-1"><button :disabled="!enabledUnderAlaram" class="btn btn-sm btn-outline-secondary jog-100" @click="command('Pos')">Get Position</button></div>
            </div>

            <div class="row">
                <div class="col p-1">
                    <button :disabled="disabled" :class="'btn btn-sm btn-outline-secondary jog-100' + (topCamNozzlePos==0?'':' active')" @click="togglePosition()">
                        <span v-if="topCamNozzlePos==0">
                            Camera ⇒ Nozzle<br>Toggle Position
                        </span>
                        <span v-else>
                            Nozzle ⇒ Camera<br>Toggle Position
                        </span>
                    </button>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        props: {
            disabled: Boolean,
            enabledUnderAlaram: Boolean,
            settings: Object,
            valvesState: Object,
            topCamNozzlePos: Number
        },
        data: function () {
            return {
                tab: 0,
                stepSize: 10.0,
                feedRateXYZ: 2000,
                rotateStep: 0.125,
                feedRateA: 500,
                valves: [false, false]
            }
        },
        methods: {
            command(orientation) {
                let cmd = ''
                let commands = []
                switch (orientation) {
                    case 'X-Y+':
                        cmd = `$J=G21G91X-${this.stepSize}Y${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'Y+':
                        cmd = `$J=G21G91Y${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'X+Y+':
                        cmd = `$J=G21G91X${this.stepSize}Y${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'X-':
                        cmd = `$J=G21G91X-${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'X+':
                        cmd = `$J=G21G91X${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'X-Y-':
                        cmd = `$J=G21G91X-${this.stepSize}Y-${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'Y-':
                        cmd = `$J=G21G91Y-${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'X+Y-':
                        cmd = `$J=G21G91X${this.stepSize}Y-${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'Z+':
                        cmd = `$J=G21G91Z${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'Z-':
                        cmd = `$J=G21G91Z-${this.stepSize}F${this.feedRateXYZ}`
                        break;
                    case 'RL':
                        cmd = `$J=G21G91A${this.rotateStep}F${this.feedRateA}`
                        break;
                    case 'RR':
                        cmd = `$J=G21G91A-${this.rotateStep}F${this.feedRateA}`
                        break;

                    case 'Return':
                        cmd = "G90 G0 X0 Y0"
                        break;
                    case 'ReturnZ':
                        cmd = "G90 G0 Z0"
                        break;
                    case 'Reset':
                        cmd = String.fromCharCode(24)
                        break;
                    case 'State':
                        cmd = '$G'
                        break;
                    case 'Pos':
                        cmd = '?'
                        break; 
                    case 'Home':
                        cmd = "$H"
                        break;
                    case 'Unlock':
                        cmd = "$X"
                        break;
                    case 'ResetZero':
                        cmd = "G10 P0 L20 X0 Y0 Z0"
                        break;
                    case 'HomeResetZero':
                        commands.push("$H")
                        commands.push("G10 P0 L20 X0 Y0 Z0")
                        break;
                    case 'Parking':
                        commands.push(`G0 Z${this.settings.parking.pos.z}`)
                        commands.push(`G0 X${this.settings.parking.pos.x} Y${this.settings.parking.pos.y} A0`)
                        break;
                }

                if (cmd != '') {
                    this.$emit('sendCommand', cmd)
                }

                if (commands.length > 0) {
                    this.$emit('sendCommands', commands)
                }
            },
            toggleValve(valve) {
                let cmd = this.valvesState[valve]?this.settings.heads[valve].valveOff:this.settings.heads[valve].valveOn
                this.$emit('toggleValve', cmd)
            },
            togglePosition() {
                let cmd
                let topCamOffset = this.settings.cams[0].offset
                if (this.topCamNozzlePos == 0) {
                    this.$emit('cangeTopCamNozzlePos', 1)
                    cmd = `$J=G21G91X${-topCamOffset.x}Y${-topCamOffset.y}F${this.feedRateXYZ}`
                } else {
                    this.$emit('cangeTopCamNozzlePos', 0)
                    cmd = `$J=G21G91X${topCamOffset.x}Y${topCamOffset.y}F${this.feedRateXYZ}`                    
                }
                console.log(cmd)
                this.$emit('sendCommand', cmd)
            }
        },
        watch: {
            /*
            valves() {
                this.valves = this.valvesState
            },
            */
            valvesState: {
                handler(newValue, oldValue) {
                    this.valves = this.valvesState
                },
                deep: true
            }            
        }
    }
</script>

<style>
.jog-100 {
    width: 100% !important;
    height: 4em !important;
}
</style>
