<template>
<div class="row">

    <div class="col">
        <div class="scroll">
            <table class="table mb-5" ref="table">
                <thead>
                <tr>
                    <th> </th>
                    <th>Name</th>
                    <th>Nozzle</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="row in rows" @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"></td>
                    <td>
                        <select v-model="row.nozzleId" class="form-control form-control-sm">
                            <option :value="-1">Empty</option>
                            <option :value="item.id" v-for="item in settings.nozzles">{{ item.name }}</option>
                        </select>
                    </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">Add place</button>
            </div>
        </div>
    </div>

    <div class="col" v-if="isCurrent">
        <div class="card">
            <div class="card-header">Nozzle {{ 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">Nozzle</label>
                    <div class="row mb-2">
                        <div class="col">
                            <select v-model="currentRow.nozzleId" class="form-control form-control-sm">
                                <option :value="-1">Empty</option>
                                <option :value="item.id" v-for="item in settings.nozzles">{{ item.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Feed</label>
                    <div class="row mb-2">
                        <div class="col">
                            <input v-model="currentRow.feed" type="number" step="1" class="form-control form-control-sm">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="card mt-1">
            <div class="card-header">Path to take nozzle</div>
            <div class="card-body">

                <NozzlesHolderPlacePointsTable
                    :rows="currentRow.points"
                    :currentRow="currentPointRow"
                    :machinePos="machinePos"
                    @set="currentPointRow=$event"
                    @setPos="setPointPos($event)"
                    @add="addPoint()"
                    @delete="rowDelete(currentRow.points, $event)">
                </NozzlesHolderPlacePointsTable>

            </div>
        </div>

        <div class="card mt-1">
            <div class="card-header">Actions</div>
            <div class="card-body">
                <button :disabled="disabled" class="btn btn-sm btn-outline-secondary m-1" @click="$emit('putOnNozzle', currentRow)">Put on Nozzle</button>
            </div>
        </div>


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

<script>
    import tableMixin from '../js/rows_table.js'
    import machineState from '../js/machine_state.js'
    import NozzlesHolderPlacePointsTable from "../components/NozzlesHolderPlacePointsTable.vue"
    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,
            disabled: Boolean
        },
        components: {
            NozzlesHolderPlacePointsTable,
            CopyPasteMenu
        },
        data: function () {
            return {
                currentField: 'name',
                currentPointRow: this.currentPointRow,
                clipboard: this.clipboard
            }
        },
        computed: {
            isCurrent() {
                return this.currentRow && (this.rows.indexOf( this.currentRow) > -1)
            }
        },
        methods: {
            addPoint() {
                this.currentRow.points.push({x:0, y:0, z:0})
                this.currentPointRow = this.currentRow.points[this.currentRow.points.length -1]
            },
            setPointPos(pathPoint) {
                if (this.machineStateIsOK() == true) {
                    pathPoint.x = parseFloat(this.machinePos.x)
                    pathPoint.y = parseFloat(this.machinePos.y)
                    pathPoint.z = parseFloat(this.machinePos.z)
                }
            },
            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: 85vh;
    overflow: auto;
}
</style>