<template>
<div class="row">
    <div class="col mh-100">
        <div class="scroll">
            <table class="table mb-5" ref="table">
                <thead>
                <tr>
                    <th> </th>
                    <th>Name</th>
                    <th>Caption</th>
                    <th nowrap>Feeder <a @click="$emit('sortElements', {field:'feeder', order:'up'})" title="Sort by Feeder">⯅</a> <a @click="$emit('sortElements', {field:'feeder', order:'down'})" title="Sort by Feeder">⯆</a></th>
                    <th nowrap>Nozzle <a @click="$emit('sortElements', {field:'nozzle', order:'up'})" title="Sort by Nozzle">⯅</a> <a @click="$emit('sortElements', {field:'nozzle', order:'down'})" title="Sort by Nozzle">⯆</a></th>
                    <th nowrap>X <a @click="$emit('sortElements', {field:'x', order:'up'})" title="Sort by X">⯅</a> <a @click="$emit('sortElements', {field:'x', order:'down'})" title="Sort by X">⯆</a></th>
                    <th nowrap>Y <a @click="$emit('sortElements', {field:'y', order:'up'})" title="Sort by Y">⯅</a> <a @click="$emit('sortElements', {field:'y', order:'down'})" title="Sort by Y">⯆</a></th>
                    <th>A</th>
                    <th></th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="row, n in elements" @mousedown="setCurrentRow(row)" :class="row==currentRow?'active-row':''">
                    <td>
                    <span v-if="row==currentRow">
                        <CopyPasteMenu :row="row" :clipboard="clipboard" @copy="doAction('copy', $event)" @paste="doAction('paste', $event)">⯈</CopyPasteMenu>
                    </span>
                    <span v-else>&nbsp;&nbsp;</span>
                    </td>
                    <td><input v-model="row.name" ref="name" @focus="currentField='name'" class="form-control form-control-sm" size="10"></td>
                    <td><input v-model="row.caption" ref="caption" @focus="currentField='caption'" class="form-control form-control-sm" size="10"></td>
                    <td>
                        <select v-model="row.feeder" class="form-control form-control-sm">
                            <option :value="item.id" v-for="item in feeders">{{ item.name }} ( {{ item.caption }} )</option>
                        </select>
                    </td>
                    <td nowrap>{{ row.nozzleName }}</td>
                    <td><input v-model="row.pos.x" ref="X" @focus="currentField='X'" class="form-control form-control-sm" size="3"></td>
                    <td><input v-model="row.pos.y" ref="Y" @focus="currentField='Y'" class="form-control form-control-sm" size="3"></td>
                    <td><input v-model="row.pos.a" ref="A" @focus="currentField='A'" @change="refreshCurrentElement(currentRow)" class="form-control form-control-sm" size="3"></td>
                    <td><input v-model="row.active" ref="active" @focus="currentField='active'" type="checkbox" class="form-control form-control-sm" title="Active"></td>
                    <th nowrap>
                        <button class="btn btn-sm btn-outline-secondary me-1" @click="$emit('up', row)">⯅</button>
                        <button class="btn btn-sm btn-outline-secondary me-1" @click="$emit('down', row)">⯆</button>
                        <button class="btn btn-sm btn-outline-secondary btn-danger" @click="$emit('delete', row)">⮿</button>
                    </th>
                </tr>
                </tbody>
            </table>
            <div class="text-end">
                <button @click="$emit('add')" class="btn btn-sm btn-outline-secondary me-1">Add element</button>
                <button @click="$emit('import')" class="btn btn-sm btn-outline-secondary">Import elements...</button>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="scroll">
            <div class="card" v-if="isCurrent">
                <div class="card-header">Element {{ currentRow.name }} (# {{ currentRow.id }})</div>
                <div class="card-body">

                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <div class="row mb-2">
                            <div class="col">
                                <input v-model="currentRow.name" type="text" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Caption</label>
                        <div class="row mb-2">
                            <div class="col">
                                <input v-model="currentRow.caption" type="text" class="form-control form-control-sm">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Feeder</label>
                        <div class="row mb-2">
                            <div class="col">
                                <select v-model="currentRow.feeder" class="form-control form-control-sm">
                                    <option :value="item.id" v-for="item in feeders">{{ item.name }} ( {{ item.caption }} )</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Position</label>
                        <div class="row mb-2">
                            <div class="col">
                                X: <input v-model="currentRow.pos.x" type="number" class="form-control form-control-sm" step="0.01">
                            </div>
                            <div class="col">
                                Y: <input v-model="currentRow.pos.y" type="number" class="form-control form-control-sm" step="0.01">
                            </div>
                            <div class="col">
                                A: <input v-model="currentRow.pos.a" @change="refreshCurrentElement(currentRow)" type="number" class="form-control form-control-sm" step="0.01">
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-sm btn-outline-secondary btn-danger me-1 mt-3" @click="setElementPosCam(currentRow)" title="Set current position of camera (x, y, a)">⛶</button>
                                <button class="btn btn-sm btn-outline-secondary btn-danger me-1 mt-3" @click="setElementPos(currentRow)" title="Set current position of nozzle (x, y, a)">🞊</button>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Active</label>
                        <div class="row mb-2">
                            <div class="col">
                                <div class="form-check form-switch">
                                    <input v-model="currentRow.active" class="form-check-input" type="checkbox" role="switch" id="posCorrection">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card mt-1" v-if="isCurrent">
                <div class="card-header">Actions</div>
                <div class="card-body">
                    <div>
                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="placeElement(currentRow)">Place element</button>
                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="runFrom(currentRow)">Start Job from this element</button>
                    </div>
                    <div>
                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="goToElement(currentRow)">Jog Nozzle to <b>Element</b> position</button>
                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="goToFeeder(currentRow.feeder)">Jog Nozzle to to <b>Feeder</b> position</button>
                    </div>
                    <div>
                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="goToElementCam(currentRow)">Jog Camera to <b>Element</b> position</button>
                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="goToFeederCam(currentRow.feeder)">Jog Camera to to <b>Feeder</b> position</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</template>

<script>
    import tableMixin from '../js/rows_table.js'
    import machineState from '../js/machine_state.js'
    import CopyPasteMenu from "../components/CopyPasteMenu.vue"
    import deepMerge from '../js/deep_merge.js'

    export default {
        mixins: [tableMixin, machineState, deepMerge],
        props: {
            settings: Object,
            machineState: Object,
            machinePos: Object,
            feeders: Object,
            disabled: Boolean
        },
        components: {
            CopyPasteMenu
        },
        data: function () {
            return {
                currentField: 'name',
                clipboard: this.clipboard
            }
        },
        computed: {
            elements() {
                if (this.rows) {
                    let rows=this.rows
                    for (let row of rows) {
                        let feeder = this.getFeederById(row.feeder)
                        if (feeder !== null) {
                            let nozzle = this.getNozzleById(feeder.nozzle)
                            row['nozzleId'] = feeder.nozzle
                            row['nozzleName'] = nozzle.name
                        }
                    }
                    return rows
                }
            },
            isCurrent() {
                return this.currentRow && (this.rows.indexOf( this.currentRow) > -1)
            }
        },
        methods: {
            setElementPos(element) {
                if (this.machineStateIsOK() == true) {
                    element.pos.x = this.machinePos.x
                    element.pos.y = this.machinePos.y                
                    //element.pos.a = parseFloat(this.machinePos.a).toFixed(3)
                }
/*
                if (this.machineState.status == 'Idle') {
                    element.pos.x = this.machinePos.x
                    element.pos.y = this.machinePos.y
                    //element.pos.a = parseFloat(this.machinePos.a).toFixed(3)
                } else {
                    alert('Controller state is wrong', 'Error', 'error')
                }
*/
            },
            setElementPosCam(element) {
                if (this.machineStateIsOK() == true) {
                    let offset = this.settings.cams[0].offset
                    element.pos.x = (parseFloat(this.machinePos.x) + parseFloat(offset.x)).toFixed(3)
                    element.pos.y = (parseFloat(this.machinePos.y) + parseFloat(offset.y)).toFixed(3)
                    //element.pos.a = parseFloat(this.machinePos.a).toFixed(3)
                }
                /*
                if (this.machineState.status == 'Idle') {
                    let offset = this.settings.cams[0].offset
                    element.pos.x = (parseFloat(this.machinePos.x) + parseFloat(offset.x)).toFixed(3)
                    element.pos.y = (parseFloat(this.machinePos.y) + parseFloat(offset.y)).toFixed(3)
                    //element.pos.a = parseFloat(this.machinePos.a).toFixed(3)
                } else {
                    alert('Controller state is wrong', 'Error', 'error')
                }
                */
            },
            refreshCurrentElement(element) {
                this.$emit('set', element)
            },
            goToElement(element) {
                this.$emit('goToElement', element)
            },
            goToElementCam(element) {
                this.$emit('goToElementCam', element)
            },
            placeElement(element) {
                this.$emit('placeElement', element)
            },
            getFeederById(feederId) {
                for (let feeder of this.feeders) {
                    if (feeder.id == feederId) {
                        return feeder
                    }
                }
                return null
            },
            getNozzleById(nozzleId) {
                for (let nozzle of this.settings.nozzles) {
                    if (nozzle.id == nozzleId) {
                        return nozzle
                    }
                }
                return null
            },
            goToFeeder(feederId) {
                this.$emit('goToFeeder', this.getFeederById(feederId))
            },
            goToFeederCam(feederId) {
                this.$emit('goToFeederCam', this.getFeederById(feederId))
            },
            runFrom(element) {
                this.$emit('runFrom', element)
            },
            doAction(event, row) {
                if (event == 'copy') {
                    this.clipboard = Object.assign({}, row)
                }

                if (event == 'paste') {
                    this.clipboard.id = row.id
                    row = this.deepMerge(row, this.clipboard)
                }
            }
        }
    }
</script>

<style scoped>
.active-row {
    background-color: #F6F6F6;
}

.scroll {
    max-height: 80vh;
    overflow: auto;
}
</style>