<template>
<div>
    <div id="_cmp" style="padding-left: 6px;padding-right: 6px;">
        <div class="row" style="height: 40px;">
            <div class="col">
                <div class="input-group mb-3">
                    <span class="input-group-text d-xl-flex justify-content-xl-end" style="font-style: normal;font-weight: bold;background: rgba(234,236,244,0);border-color: rgba(133,135,150,0);border-right-style: none;font-size: 14px;padding-left: 0px;">Fields</span>
                    <span class="input-group-text d-xl-flex justify-content-xl-start form-control" style="font-style: normal;font-weight: bold;background: rgba(234,236,244,0);border-color: rgba(133,135,150,0);border-style: none;font-size: 14px;padding-left: 0px;">
                        <button id="add_btn" class="btn btn-primary btn-sm" type="button" @click="addConfigCollectionEntry" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-top: 2px;padding-bottom: 2px;padding-right: 6px;padding-left: 6px;" title="add field"><i class="fas fa-plus" style="color: #858796;"></i></button>
                        <button id="del_btn" class="btn btn-primary btn-sm" type="button" @click="delConfigCollectionEntry" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-left: 6px;padding-right: 6px;padding-top: 2px;padding-bottom: 2px;" title="remove checked fields"><i class="fas fa-minus" style="color: #858796;"></i></button>
                        <button id="crl_btn" class="btn btn-primary btn-sm" type="button" @click="clearData" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-left: 6px;padding-right: 6px;padding-top: 2px;padding-bottom: 2px;" title="remove all fields"><i class="fas fa-times" style="color: #858796;"></i></button>
                        <button id="imp_btn" class="btn btn-primary btn-sm" type="button" @click="impConfigCollectionEntry" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-left: 6px;" title="import fields from file"><i class="fas fa-file-import" style="color: #858796;"></i></button>
                        <button id="gen_btn" class="btn btn-primary btn-sm" type="button" @click="genConfigCollectionEntryFromFile" style="border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;margin-right: 10px;background: rgba(28,200,138,0);border-style: none;border-color: var(--bs-gray);padding-left: 6px;" title="generate fields from file"><i class="fas fa-file-medical" style="color: #858796;"></i></button>
                    </span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div style="border: solid 0px #ccc;height: 206px;overflow-x: auto;overflow-y: auto;">
                    <table class="table table-hover table-sm">
                    <tbody id="ufd_definitions_map">
                        <tr  v-for="entry of schema" :key="entry.col_ord">
                            <ConfigCollectionEntry :entry="entry" :isFirt="parseInt(entry.col_ord) == 1" :isLast="entry.col_ord == schema.length" @moveConfigCollectionUpRow='moveConfigCollectionUpRow' @moveConfigCollectionDownRow="moveConfigCollectionDownRow"></ConfigCollectionEntry>
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script lang="ts">
import  ConfigCollectionEntry  from '@/lib-components/component/UnoComponents/ConfigCollectionEntry.vue';
import { FileSchema } from '@/domain/models/connections/FileSchema.interface';
import { FileSchemaDTO } from '@/domain/models/connections/FileSchemaDTO';
export default{
    name: 'UnoFieldDefinition',
    components: {
    ConfigCollectionEntry,
    },
    props:{
        schema : [],
        selectedEntries : [],
    },
    data: () =>{
        return {

        }
    },
    mounted(){
    },
    methods :{
                addConfigCollectionEntry(){
                    let count = this.schema.length + 1;
                    let entry : FileSchemaDTO;
                    entry = new FileSchemaDTO();
                    entry.col_ord = count.toString();
                    entry.col_name = 'COL_' + count;
                    entry.col_type = 'VARCHAR';
                    entry.col_def = '';
                    this.schema.push(entry);
                    console.log(this.schema);
                },
                delConfigCollectionEntry() {
                    console.log('delConfigCollectionEntry');
                    let objects_to_remove =  this.schema.filter((x:any)=> x.selected === true);
                    for(let entry of objects_to_remove)
                    {
                        this.schema.splice(this.schema.indexOf(entry),1);
                    }
                    for(let index = 0;  index < this.schema.length; index++)
                    {
                        this.schema[index].col_ord =  index + 1;
                    }
                },
                moveConfigCollectionUpRow(currentIndex : number){
                    this.schema[currentIndex].col_ord = currentIndex;
                    this.schema[currentIndex - 1].col_ord = currentIndex + 1;
                    this.schema.sort(this.orderEntries);
                },
                moveConfigCollectionDownRow(currentIndex : number){
                    this.schema[currentIndex].col_ord = currentIndex + 2;
                    this.schema[currentIndex +  1].col_ord = currentIndex + 1;
                    this.schema.sort(this.orderEntries);
                },
                orderEntries(a : FileSchemaDTO, b : FileSchemaDTO){
                    if(a.col_ord > b.col_ord) {
                        return 1;
                    }
                    if (a.col_ord < b.col_ord) {
                        return -1;
                    }
                    return 0;
                },
                clearData(){
                    this.schema.splice(0, this.schema.length);
                }
                ,
                changeEntry(data : FileSchema){
                    console.log('changeEntry', data);
                },
                genConfigCollectionEntryFromFile(){
                    this.$emit('genConfigCollectionEntryFromFile');
                    console.log('genConfigCollectionEntryFromFile');
                },
                impConfigCollectionEntry(){
                    alert("Feature currently in development");
                },
            },
}
</script>;