<template>
<div class="card">
    <div class="card-body" style="padding: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;">
        <div class="table-header table-theme">
            <div class="row">
                <div class="col text">
                    <h6>{{label}}</h6>
                </div>
                <div class="col text-right text-check"><span class="spinner-border spinner-border-sm align-top" role="status" id="ufd_cnx_tree_view_spn" v-show="showSpinner=='true'"></span></div>
            </div>
        </div>
        <div class="table-responsive table-bordered connection_tree" style="overflow: auto;height: 240px;border: 1px dashed #d1d3e2;font-size: 12px;">
            <table class="table table-bordered table-sm">
                <tbody id="ufd_cnx_tree_view">
                    <item-connection :showViews="showViews" @update:showSpinner='showSpinner = $event' v-for="(connection, indexConnection) of connections" :key="indexConnection" :connection="connection"  :idConnection="connection.id" :source='source' :schema='schema'  @getSchemaList="getSchemaList" @selectItemConnection="selectItemConnection" @getColumns="getColumns" @selectedSchema='selectedSchema' @getSource="getSource" :object='object' :tableName="tableName"></item-connection >
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>
<script lang="ts">
import { ConnectionService } from '@/domain/services/Connection.service'
import ItemConnection from  '@/lib-components/component/ConnectionExplorerComponent/ItemConnection.vue';
import { Connection } from '@/domain/models/connections/Connection';
import { jsonUtilities } from '@/infrastructure/utilities/jsonUtilities';
import { Attribute } from '@/domain/models/Attribute.interface';
export default{
    name : 'ConnectionExplorer',
    emits : ['getSchema', 'getColumns', 'getSelectedConnection', 'selectedSchema', 'getSchemaList', 'getSource' ],
    components: {
        ItemConnection
    },
    props:{
        selectedItem : { type: String, default: '' },
        object : { type: String, default: '' },
        schema : { type: String, default: '' },
        tableName : { type: String, default: '' },
        typeConnection: { type: String, default: 'all' },
        label: { type: String, default: 'Connection Explorer' },
        showViews: { type: Boolean, default: true },
        filterConnection: { type: Boolean, default: true },
        filterTypeConnection: { type: String, default: '' }
    },
    data : () => {
        return {
            connectionService : {} as ConnectionService,
            connections : [],
            columnList : [],
            idConnection:  '',
            schemaList : [],
            source : '',
            showSpinner: false,
            isEditing: false,
        }
    },
    methods: {
        getSchemaList(schemaList : []){
            this.schemaList = schemaList;
            this.$emit('getSchemaList', this.schemaList);
        },
        getSource(source : String){
            this.source =  source;
            this.$emit("getSource",source);
        },
        selectedSchema(schema : string){
            this.$emit("selectedSchema",schema);
        },
        selectItemConnection(idSelected : number){
            this.idConnection = idSelected;
            for(let indexItem = 0; indexItem < this.connections.length; indexItem++){
                this.connections[indexItem].selected = (this.connections[indexItem].id == idSelected);
                if(this.connections[indexItem].id == idSelected){
                    this.$emit("getSelectedConnection", this.connections[indexItem]);
                }
            }
        },
        getColumns(columnList : []){
            this.columnList = columnList;
            this.$emit("getColumns", this.columnList);
        },
        hasFilterConnection(){
            if(this.filterConnection == 'true'){
                this.connections = this.connections.filter((item: Connection) => item.id == this.selectedItem);
            }
        },
        hasFilterTypeConnection(){
            if(this.filterTypeConnection != ''){
                this.connections = this.connections.filter((item: Connection) => jsonUtilities.getJsonArrayEntrybyValue<Attribute>(item.attributes, 'connection_sub_type').value == this.filterTypeConnection);
            }
        },
        editing(){
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        },
        async getConnectionList(){
            this.showSpinner = true;
            let connections;
            switch(this.typeConnection){
                case 'database' :  connections = (await this.connectionService.getConnectionDatabaseList()).connections; break;
                case 'delimited-file' :  connections = (await this.connectionService.getConnectionDatafileList()).connections; break;
                default:  connections = (await this.connectionService.getConnectionList()).connections; break;
            }
            if(connections != null)
            {
                this.connections = connections.map((item : Connection) : any => ({
                    attributes : item.attributes,
                    id : item.id,
                    selected : (this.selectedItem == item.id)
                }));
                this.hasFilterTypeConnection();
            }
        },
    },
    watch:{
        schemaList: function(){
            this.editing();
        },
        source: function(){
            this.editing();
        },
        columnList: function(){
            this.editing();
        },
        selectedItem: async function(){
            this.editing();
            await this.getConnectionList();
            this.hasFilterConnection();
            this.columnList = [];
            this.schemaList =  [];
            this.source = '';
            this.$emit("getSelectedConnection", this.connections.find((item: Connection) => item.id == this.selectedItem));
        }
    },
    async mounted(){
        this.connectionService = new ConnectionService();
        await this.getConnectionList();
    },
}
</script>
<style scoped>
.table-theme {
    background: var(--table-header-background-color);
    color: var(--table-header-color);
}
.table-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-bottom: 0;
    background-color: var(--table-header-background-color);
    border-bottom: 1px solid  var(--table-header-background-color);
    border-radius: calc(0.35rem - 1px) calc(0.35rem - 1px) 0 0;
}
.text{
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.text-check{
    padding-top: 0.25rem;
}
h6{
    margin-bottom: 0px !important;
    font-weight: bold;
    color: var(--table-header-color);
    font-size: 14px;
}
</style>
