<template>
    <div class="card">
        <div class="card-header">Computer Vision Settings</div>
        <div class="card-body">
            <div class="row">
                <div  v-for="cam, n in cvSettings" class="col" :key="n">
                    <div class="card">
                        <div class="card-header">Camera {{ cam.name }} image transform</div>
                        <div class="card-body">
                            
                            <div class="row">
                                <div class="col">
                                        
                                    <div class="mb-3">
                                        <label class="form-label">Contrast</label>
                                        <input v-model="cam.contrast" type="number" step="0.1" class="form-control form-control-sm">
                                        <div class="form-text">The default value is 1, meaning no scaling is applied. This parameter controls the contrast of the image.</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Brightness</label>
                                        <input v-model="cam.brightness" type="number" step="0.1" class="form-control form-control-sm">
                                        <div class="form-text">The default value is 0, meaning no shift is applied. This parameter controls the brightness of the image.</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Blur</label>
                                        <div class="row">
                                            <div class="col-auto"><input v-model="cam.blur[0]" type="number" step="1" class="form-control form-control-sm"></div>
                                            <div class="col-auto mt-1">x</div>
                                            <div class="col-auto"><input v-model="cam.blur[1]" type="number" step="1" class="form-control form-control-sm"></div>
                                        </div>
                                        
                                        <div class="form-text">This parameter defines the size of the blurring kernel. It's a tuple representing the width and height of the kernel (e.g., (5, 5) for a 5x5 kernel). The kernel size determines the area over which the blurring is applied.</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Adaptive Threshold block size</label>
                                        <input v-model="cam.adaptiveThreshold_blockSize" type="number" step="1" class="form-control form-control-sm">
                                        <div class="form-text">The size of the pixel neighborhood used to calculate the threshold, it must be an odd number.</div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Adaptive Threshold C</label>
                                        <input v-model="cam.adaptiveThreshold_C" type="number" step="1" class="form-control form-control-sm">
                                        <div class="form-text">A constant value subtracted from the calculated mean or weighted sum to fine-tune the threshold. It can be positive, negative, or zero.</div>
                                    </div>
                                    <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="toggleCV(n)">CV View</button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card mt-2">
                        <div class="card-header">Objects parameters (default)</div>
                        <div class="card-body">
                            <div v-for="obj, objName in cam.objects" class="mb-3">
                                <label class="form-label capitalize">{{objName}}</label>
                                <div>
                                    <span v-for="item, name in obj">{{name}}: <input v-model="cam.objects[objName][name]" type="number" step="0.1" class="form-control form-control-sm"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-2">
                        <div class="card-header">Misc Settings</div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label capitalize">Delay before image processing:</label>
                                <input v-model="cam.pauseBefore" type="number" step="0.1" 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>
    export default {
        props: {
            cvSettings: Object,
            showWindow: Object,
            loading: Boolean
        },
        methods: {
            applaySettings() {
                this.$emit('applaySettings')
            },
            toggleCV(number) {
                this.$emit('toggleCV', number)
            },
        }
    }
</script>

<style>
.capitalize {
  text-transform: capitalize;
}
</style>
