<template>
    <div class="card">
        <div class="card-header">Cameras Settings</div>
        <div class="card-body">

            <div class="row">
                <div  v-for="cam, n in cams" class="col" :key="n">
                    <div class="card">
                        <div class="card-header">Camera {{ cam.name }}</div>
                        <div class="card-body">
                            
                            <div class="row">
                                <div class="col">
                                        
                                    <div class="mb-3">
                                        <label class="form-label">ID</label>
                                        <button :class="'btn btn-sm btn-outline-secondary float-end p-0 ps-1 pe-1 m-0 me-1' + (showWindow[n]==true?' active':'')" @click="toggleCamParamRaw(n)">Raw view</button>
                                        <input v-model="cam.id" type="text" class="form-control form-control-sm">
                                        <div class="form-text">ID of camera. Use command 'ls /dev/v4l/by-id/' to view USB cameras list. After changing pleas press "Applay settings"</div>
                                        <div class="form-text">Use command '<b>ls /dev/v4l/by-id/</b>' to view USB cameras list</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Capture frame size</label>
                                        <div class="row mb-2">
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">Width:</div>
                                                    <div class="col"><input v-model="cam.size.width" type="number" step="1" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">Height:</div>
                                                    <div class="col"><input v-model="cam.size.height" type="number" step="1" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="mb-3">
                                        <label class="form-label">Undistorting method</label>
                                        <div class="row mb-2">
                                            <div class="col">
                                                <select v-model="cam.undistort.type" class="form-control form-control-sm">
                                                    <option :value="0">Distortion factor</option>
                                                    <option :value="1">Calibration data</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>


                                    <div v-if="cam.undistort.type==0" class="mb-3">
                                        <label class="form-label">Distortion factor</label>
                                        <div class="row mb-2">
                                            <div class="col">
                                                <input v-model="cam.undistort.distortion_f" type="number" step="0.001" class="form-control form-control-sm">
                                            </div>
                                        </div>
                                        <div class="form-text">Positive and negative value available. After changing pleas press "Applay settings"</div>
                                    </div>


                                    <div v-if="cam.undistort.type==1" class="mb-3">
                                        <label class="form-label">Calibration data</label>
                                        <div class="row" v-if="calibrationShow[n]==true">
                                            <div class="col-auto">matrix:</div>
                                            <div class="col-auto">{{ cam.calibration.matrix }}</div>
                                            <div class="col-auto">distortion:</div>
                                            <div class="col-auto">{{ cam.calibration.distortion }}</div>
                                            <div class="col text-end"><button class="btn btn-sm btn-link p-0 ps-1 pe-1" @click="calibrationShow[n]=false">Hide</button></div>
                                        </div>
                                        <div v-else class="row">
                                            <div class="col">[Hiden]
                                                <button class="btn btn-sm btn-link p-0 ps-1 pe-1" @click="calibrationShow[n]=true">Show</button>
                                            </div>
                                        </div>
                                        <div class="form-text">Please print <a href="images/calibration.svg" target="_blank">this</a> picture, put it under cams focus then press button 'Calibration'</div>
                                        <button class="btn btn-sm btn-outline-secondary" @click="calibrate(n)">Calibrate</button>
                                    </div>


                                    <div v-if="n==0" class="mb-3">
                                        <label class="form-label">Offset from nozzle of head #1</label>

                                        <div class="pb-2">
                                            <button :disabled="disabled" class="btn btn-sm btn-outline-secondary p-0 ps-1 pe-1 m-0" @click="rememberPos()">Remember Current Position ({{ currentPos }})</button>
                                            Then move camera to Nozzle position and press
                                            <button :disabled="disabled" class="btn btn-sm btn-outline-secondary p-0 ps-1 pe-1 m-0" @click="calculateOffset(n)">Calculate Offset</button>
                                        </div>
                                        

                                        <div class="row mb-2">
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">X:</div>
                                                    <div class="col"><input v-model="cam.offset.x" type="number" step="0.01" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">Y:</div>
                                                    <div class="col"><input v-model="cam.offset.y" type="number" step="0.01" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                
                                            </div>
                                        </div>
                                        <div class="form-text">Top camera offset from nozzle of first head</div>
                                    </div>

                                    <div v-if="n==1" class="mb-3">
                                        <label class="form-label">Position</label>
                                        <div class="row mb-2">
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">X:</div>
                                                    <div class="col"><input v-model="cam.pos.x" type="number" step="0.01" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">Y:</div>
                                                    <div class="col"><input v-model="cam.pos.y" type="number" step="0.01" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="row">
                                                    <div class="col-auto pt-1">Z:</div>
                                                    <div class="col"><input v-model="cam.pos.z" type="number" step="0.01" class="form-control form-control-sm"></div>
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <button :disabled="disabled" class="btn btn-sm btn-outline-secondary" @click="setPosition(n)">Set current controller position</button>
                                            </div>
                                        </div>
                                        <div class="form-text">Nozzle position over Bottom camera</div>
                                        <button :disabled="disabled" class="btn btn-sm btn-outline-secondary p-0 ps-1 pe-1 m-0" @click="jogBottomCamPos()">Jog to Bottom Camera</button>
                                    </div>

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


                    <div class="card mt-1">
                        <div class="card-header">Image Transform</div>
                        <div class="card-body">

                            <div class="mb-3">
                                <label class="form-label">Rotation</label>
                                <div class="row mb-2">
                                    <div class="col">
                                        <select v-model="cam.image_transform.rotation" class="form-control form-control-sm">
                                            <option :value="0">No</option>
                                            <option :value="90">90</option>
                                            <option :value="180">180</option>
                                            <option :value="-90">-90</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Scale</label>
                                <div class="row mb-2">
                                    <div class="col">
                                        <div class="row">
                                            <div class="col-auto pt-1">Width:</div>
                                            <div class="col"><input v-model="cam.image_transform.scale_x" type="number" step="0.01" class="form-control form-control-sm"></div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="row">
                                            <div class="col-auto pt-1">Height:</div>
                                            <div class="col"><input v-model="cam.image_transform.scale_y" type="number" step="0.01" class="form-control form-control-sm"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>

                    <div class="card mt-1">
                        <div class="card-header">Resolution</div>
                        <div class="card-body">

                            <div class="mb-3">
                                <label class="form-label">Resolution (pixels per millimeter)</label>
                                <button :class="'btn btn-sm btn-outline-secondary float-end p-0 ps-1 pe-1 m-0 me-0' + (showWindow[n]==true?' active':'')" @click="toggleCamParam(n)">View</button>
                                <input v-model="cam.ppmm" @change="changeCamParam(n)" type="number" step="0.1" class="form-control form-control-sm">
                                <div class="form-text">Please print <a href="images/calibration.svg" target="_blank">this</a> picture, put it under center of  cams focus then change the resolution until the marker matches the image of square.</div>
                            </div>

                        </div>
                    </div>

                    <div class="card mt-1">
                        <div class="card-header">Light</div>
                        <div class="card-body">

                            <div class="mb-3">
                                <label class="form-label">Light on command</label>
                                <input v-model="cam.lightOn" type="text" class="form-control form-control-sm">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Light off command</label>
                                <input v-model="cam.lightOff" type="text" class="form-control form-control-sm">
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <div class="row mt-2">
                <div class="col">
                    <button :disabled="loading" class="btn btn-sm btn-outline-secondary" @click="applaySettings()">Applay settings</button>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    import machineState from '../js/machine_state.js'

    export default {
        mixins: [machineState],
        props: {
            cams: Object,
            machineState: Object,
            machinePos: Object,
            settings: Object,
            showWindow: Object,
            disabled: Boolean,
            loading: Boolean
        },
        data: function () {
            return {
                tab: 0,
                calibrationShow: [false, false],
                currentPos: {
                    x: 0,
                    y: 0
                }
            }
        },
        methods: {
            calibrate(number) {
                this.$emit('calibrate', number)
            },
            rememberPos() {
                if (this.machineStateIsOK() == true) {
                    this.currentPos.x=this.machinePos.x
                    this.currentPos.y=this.machinePos.y
                }
            },
            calculateOffset(number) {
                if (this.machineStateIsOK() == true) {
                    let offsetX = Math.round((this.currentPos.x - this.machinePos.x) * 1000) / 1000
                    let offsetY = Math.round((this.currentPos.y - this.machinePos.y) * 1000) / 1000
                    this.cams[number].offset.x = offsetX
                    this.cams[number].offset.y = offsetY
                }
            },
            setPosition(number) {
                if (this.machineStateIsOK() == true) {
                    this.cams[number].pos.x = this.machinePos.x
                    this.cams[number].pos.y = this.machinePos.y
                    this.cams[number].pos.z = this.machinePos.z
                }
            },
            jogBottomCamPos() {
                let commands = []
                let x = parseFloat(this.cams[1].pos.x)
                let y = parseFloat(this.cams[1].pos.y)
                let z = parseFloat(this.cams[1].pos.z)
                let zSafePos = this.settings.heads[0].safePosZ
                commands.push(`$J=G21G90Z${zSafePos}F2000`)
                commands.push(`$J=G21G90X${x}Y${y}F2000`)
                commands.push(`$J=G21G90Z${z}F2000`)
                this.$emit('sendCommands', commands)
            },
            toggleCamParamRaw(number) {
                this.$emit('toggleCam', {'number':number, 'raw':1, 'cv':0, 'ppmm':this.cams[number].ppmm, 'grid':0, 'marker':0})
            },
            toggleCamParam(number) {
                this.$emit('toggleCam', {'number':number, 'raw':0, 'cv':0, 'ppmm':this.cams[number].ppmm, 'grid':1, 'marker':1})
            },
            changeCamParam(number) {
                this.$emit('changeCamParam', {'number':number, 'raw':0, 'cv':0, 'ppmm':this.cams[number].ppmm, 'grid':1, 'marker':1})
            },
            applaySettings() {
                this.$emit('applaySettings')
            },
        }
    }
</script>

<style>

</style>
