//@import "../../../abstracts/abstracts";

$canvas-control-background-color: $workflow-background;
$canvas-control-grid-color: $workflow-grid-color;
$canvas-control-grid-size: 25px;
$canvas-control-node-types-header-height: 57px;
$canvas-control-node-types-container-width: 300px;
$canvas-control-node-type-image-size: 24px;
$canvas-control-selected-color: #1a73e8;
$canvas-control-error-color: #f40006;

$canvas-control-node-inactive-background-color: #f1d217;
$canvas-control-node-inactive-border-color: #edb926;

$canvas-control-node-active-background-color: $canvas-control-selected-color;
$canvas-control-node-active-foreground-color: #fff;
$canvas-control-node-active-border-color: #2e3ba2;

$canvas-control-node-delete-background-color: $canvas-control-error-color;
$canvas-control-node-delete-border-color: #c10005;

$canvas-control-new-item-color: $canvas-control-selected-color;

$canvas-control-toolbar-button-size: 36px;
$canvas-control-toolbar-button-color: $text-color-default;
$canvas-control-toolbar-button-hover-color: $color-primary;

// Workflow nodes
$canvas-control-workflow-node-background-color: $sidebar-tile-background;
$canvas-control-workflow-node-foreground-color: $sidebar-tile-text-color;
$canvas-control-workflow-node-border: $sidebar-tile-border;
$canvas-control-workflow-node-hover-background-color: $color-gray-6;

$canvas-control-workflow-node-scrollbar-thumb-color: $color-gray-7;
$canvas-control-workflow-node-active-scrollbar-thumb-color: $color-gray-6;

// Workflow node connectors
$canvas-control-workflow-node-connector-size: 15px;
$canvas-control-workflow-node-connector-background-color: $color-gray-6;
$canvas-control-workflow-node-connector-border-color: $canvas-control-workflow-node-background-color;

// Workflow node links
$canvas-control-workflow-node-link-width: 4px;
$canvas-control-workflow-node-link-color: $color-gray-6;
$canvas-control-workflow-node-link-selected-color: $canvas-control-selected-color;
$canvas-control-workflow-node-link-hover-color: $canvas-control-workflow-node-link-selected-color;
$canvas-control-workflow-node-link-preview-color: $canvas-control-workflow-node-link-selected-color;
$canvas-control-workflow-node-link-highlighted-color: $canvas-control-workflow-node-link-selected-color;
$canvas-control-workflow-node-link-dimmed-color: $color-gray-7;

.dbq-canvas-control-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid $global-border-color;
    border-radius: $border-radius-default;

    &.dbqcc-canvas-model-control-container {
        background: $canvas-control-background-color;
        background-size: $canvas-control-grid-size $canvas-control-grid-size;
        background-image: linear-gradient(to right, $canvas-control-grid-color 1px, transparent 1px), linear-gradient(to bottom, $canvas-control-grid-color 1px, transparent 1px);
    }

    .dbqcc-canvas-container {
        position: relative;
        width: 100%;
        height: 100%;
        user-select: none;
        transform: scale(1);
        z-index: 1;

        // Remove pointer events when dragging the background. This fixes the issue 
        // where a click event would be triggered after dragging the background.
        &.dbqcc-dragging {
            pointer-events: none;
        }

        .dbqcc-canvas-background-container {
            position: absolute;
            top: 0;
            left: 0;
            background: rgba($canvas-control-background-color, 0.25);

            // &[data-has-background-image="false"] {
            //     width: 100%;
            //     height: 100%;
            //     // opacity: 0.5;
            // }

            &.dbqcc-canvas-main-container {
                border-radius: 15px;

                // Note that a box-shadow was used instead of a border. When using a border
                // the inner <svg> with the node-links will shift and the node links will be misaligned.
                box-shadow: inset 0 0 0 4px $canvas-control-grid-color;
            }

            .dbqcc-canvas-model-items-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                .dbqcc-canvas-new-item {
                    position: absolute;
                    background: $canvas-control-new-item-color;
                    border-radius: 50%;
                }
            }
        }

        .dbqcc-canvas-segments-container {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: $padding-default;
            box-sizing: border-box;

            .dbqcc-canvas-segment {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 8px;
                flex: 0 0 auto;
                border: 1px solid $canvas-control-grid-color;
                border-radius: 15px;
                box-shadow: 0 1px 2px rgba(0,0,0,.04);
                background: $canvas-control-background-color;
                background-size: $canvas-control-grid-size $canvas-control-grid-size;
                background-image: linear-gradient(to right, $canvas-control-grid-color 1px, transparent 1px), linear-gradient(to bottom, $canvas-control-grid-color 1px, transparent 1px);
                
                &.dbqcc-canvas-segment-active {
                    border-color: $canvas-control-selected-color;
                }

                .dbqcc-canvas-segment-title {
                    position: absolute;
                    top: 15px;
                    left: 15px;
                    max-width: calc(100% - 30px);
                    font-size: $font-size-medium;
                    font-weight: $font-weight-bold;
                }

                .dbqcc-canvas-items-container {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1; // It's crucial that the .dbqcc-canvas-items-container has a higher z-index than the .dbqcc-canvas-connections-layer

                    .dbqcc-canvas-new-item {
                        position: absolute;
                        background: $canvas-control-new-item-color;
                        border-radius: 50%;
                    }
                }
            }
        }
        
        .dbqcc-canvas-connections-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;

            // &.dbqcc-canvas-connections-background-layer {
            //     pointer-events: none;
            // }

            &.dbqcc-canvas-connections-highlighted-layer {
                z-index: 1;
                pointer-events: none;

                .dbqcc-canvas-connection-path {
                    pointer-events: stroke;
                }
            }

            &.dbqcc-canvas-connections-segment-layer {
                z-index: 0;
            }
            
            &.dbqcc-canvas-connections-dim {
                .dbqcc-canvas-connection-path {
                    opacity: 0.3;
                }
            }

            .dbqcc-canvas-connection-path {
                cursor: pointer;
                fill: none;
                stroke: $canvas-control-workflow-node-link-color;
                stroke-width: $canvas-control-workflow-node-link-width;

                &.dbqcc-canvas-connection-path-selected {
                    stroke: $canvas-control-workflow-node-link-selected-color !important;
                }

                &.dbqcc-canvas-connection-path-hover {
                    stroke: $canvas-control-workflow-node-link-hover-color;
                }

                &.dbqcc-canvas-connection-path-highlight {
                    opacity: 1.0;
                    stroke: $canvas-control-workflow-node-link-highlighted-color;
                }
            }  

            .dbqcc-canvas-preview-connection {
                stroke: $canvas-control-workflow-node-link-preview-color;
                stroke-dasharray: 5, 5;
                opacity: 1.0 !important;
            }    
        }   

        // Connection path delete button styling
        .dbqcc-canvas-connection-path-delete-button {
            position: absolute;
            background: $canvas-control-node-delete-background-color;
            border: 1px solid $canvas-control-node-delete-border-color;
            border-radius: 50%;
            outline: none;
            padding: 0;

            svg {
                fill: $color-white;
            }

            &:hover {
                background: $canvas-control-node-delete-border-color;
                border: 1px solid $canvas-control-node-delete-background-color;
            }
        }
    }

    .dbqcc-canvas-toolbar-container {
        position: absolute;
        right: $canvas-control-node-types-container-width;
        bottom: 0;
        display: flex;
        flex-direction: row;
        z-index: 2;
        padding: 5px;
        background: $color-layer-2;
        // background: $canvas-control-background-color;
        border-radius: $global-border-radius 0 0 0;
        border: 1px solid $canvas-control-grid-color;
        border-right: none;
        border-bottom: none;

        .dbqcc-canvas-toolbar-button {
            background: none;
            border: none;
            outline: none;
            padding: 0;
            width: $canvas-control-toolbar-button-size;
            height: $canvas-control-toolbar-button-size;

            svg {
                fill: $canvas-control-toolbar-button-color;
            }

            &:hover {
                svg {
                    fill: $canvas-control-toolbar-button-hover-color;   
                }
            }
        }
    }

    .dbqcc-canvas-node-types-collapse-button {
        position: absolute;
        right: $canvas-control-node-types-container-width - $padding-default;
        top: $padding-default;
        z-index: 3;
        @include list-collapse-button;
        transition: none;
    }

    .dbqcc-canvas-node-types-container {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        position: relative;
        background: $color-layer-2;
        width: $canvas-control-node-types-container-width;
        height: 100%;
        border-left: 1px solid $canvas-control-grid-color;
        z-index: 1;

        .dbqcc-canvas-node-types-header {
            height: $canvas-control-node-types-header-height;
            padding: ($padding-default / 2) $padding-default;
        }

        .dbqcc-canvas-node-types {
            height: calc(100% - $canvas-control-node-types-header-height);
            overflow-y: auto;
            @include scrollbar;

            .dbqcc-canvas-node-type-group {
                .dbqcc-canvas-node-type-group-header {
                    display: flex;
                    align-items: center;
                    gap: ($padding-default / 3);
                    background: $color-gray-8;
                    border-bottom: 1px solid $canvas-control-grid-color;
                    cursor: pointer;
                    user-select: none;
                    padding: ($padding-default / 2) $padding-default;

                    .dbqcc-canvas-node-type-group-icon {
                        display: inline-flex;
                        width: $canvas-control-node-type-image-size;
                        height: $canvas-control-node-type-image-size;

                        svg {
                            fill: $text-color-default;
                        }
                    }

                    .dbqcc-canvas-node-type-group-title {
                        color: $text-color-default;
                        font-weight: $font-weight-bold;
                        flex: 1 1 auto;
                        line-height: 1.2;
                    }

                    .dbqcc-canvas-node-type-group-toggle {
                        background: transparent;
                        border: 0;
                        outline: 0;
                        padding: 0;
                        line-height: 0;

                        svg { 
                            fill: $text-color-default;
                            display: block; 
                        }
                    }

                    &[data-is-collapsed="true"] {
                        .dbqcc-canvas-node-type-group-toggle {
                            transform: rotate(0deg);
                        }
                    }

                    &[data-is-collapsed="false"] { 
                        .dbqcc-canvas-node-type-group-toggle {
                            transform: rotate(90deg);
                        }
                    }

                    &:hover {
                        .dbqcc-canvas-node-type-group-toggle {
                            svg {
                                fill: $color-primary;
                            }
                        }
                    }
                }   

                .dbqcc-canvas-node-type-group-body {
                    display: flex;
                    flex-direction: column;
                    gap: ($padding-default / 3);
                }
            }

            .dbqcc-canvas-node-type {
                display: flex;
                flex-direction: row;
                align-items: center;
                position: relative;
                gap: ($padding-default / 3);
                color: $text-color-default;
                padding: $padding-default;
                border-bottom: 1px solid $canvas-control-grid-color;
                cursor: move;

                img,
                svg {
                    border-radius: 50%;
                    flex-shrink: 0;
                    width: $canvas-control-node-type-image-size;
                    height: $canvas-control-node-type-image-size;
                }
                
                svg {
                    fill: $text-color-default;
                }

                &.dbqcc-canvas-model-node-type {
                    img,
                    svg {
                        background: $canvas-control-node-inactive-background-color;
                        border: 1px solid $canvas-control-node-inactive-border-color;
                    }
                }

                &.dbqcc-canvas-workflow-node-type {

                }

                &:last-of-type {
                    border-bottom: none;
                }
            }
        }

        .dbqcc-canvas-node-types-loading-indicator {
            position: relative;
            display: flex;
            height: 30px;

            .dbq-loading-spinner-container {
                background: none;

                .dbq-loading-indicator-loader {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
    
    // Collapsed node types
    &[data-is-node-types-container-collapsed="true"] {
        .dbqcc-canvas-node-types-collapse-button { 
            right: $padding-default;

            svg {
                transform: rotate(180deg);
            }
        }

        .dbqcc-canvas-toolbar-container {
            right: 0;
        }

        .dbqcc-canvas-node-types-container {
            display: none;
        }
    }

    .dbqcc-loading-view {
        position: absolute;
        background: $global-background-color-default;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
    }
}

// When using drag & drop from the available node types, the draggable node will
// be added to the <body>, hence why this is added as top-level styling.
.dbqcc-canvas-node {
    position: absolute;
    background: $canvas-control-node-inactive-background-color;
    border: 1px solid $canvas-control-node-inactive-border-color;
    cursor: pointer;

    // Canvas model node styling
    &.dbqcc-canvas-model-node {
        border-radius: 50%;

        img {
            width: $canvas-control-node-type-image-size;
            height: $canvas-control-node-type-image-size;
        }
    }

    // Workflow node styling
    &.dbqcc-canvas-workflow-node {
        background: $canvas-control-workflow-node-background-color;
        color: $canvas-control-workflow-node-foreground-color;
        border: $canvas-control-workflow-node-border;
        border-radius: 15px;
        padding: 5px 15px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

        .dbqcc-canvas-workflow-node-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
            @include scrollbar($sidebar-scrollbar-color, $sidebar-scrollbar-border-radius, $canvas-control-workflow-node-scrollbar-thumb-color);

            svg {
                fill: $text-color-default;
                margin-right: 5px;
            }

            .dbqcc-canvas-workflow-node-name {
                font-weight: $font-weight-bold;

                .dbqcc-canvas-node-icon {
                    &.dbqcc-canvas-node-icon-inline-info-tooltip {
                        margin-left: 2px;

                        svg {
                            width: 18px;
                            height: 18px;
                        }
                    }
                }
            }
        
            .dbqcc-canvas-workflow-node-tags {
                margin-top: 5px;
            }

            // Separated the node-tag styling from the node-tags parent since we also show a tag in front of the node name
            .dbqcc-canvas-node-tag {
                display: inline-block;
                background: #eee;
                color: #000;
                border-radius: 5px;
                padding: 1px 5px;
                margin-right: 5px;
                margin-bottom: 2px;
                font-size: 12px;
            }
        }

        &:hover {
            background: $canvas-control-workflow-node-hover-background-color;

            .dbqdcl-functions-container {
                display: flex;
            }

            // Connector styling
            .dbqcc-canvas-workflow-node-connectors-container {
                .dbqcc-canvas-workflow-node-connectors {
                    .dbqcc-canvas-workflow-connector {
                        background: $canvas-control-workflow-node-link-hover-color;
                    }
                }
            }

        }

        // Workflow node selected styling
        &.dbqcc-canvas-node-selected {
            .dbqcc-canvas-workflow-node-content {
                @include scrollbar($sidebar-scrollbar-color, $sidebar-scrollbar-border-radius, $canvas-control-workflow-node-active-scrollbar-thumb-color);

                svg {
                    fill: $canvas-control-node-active-foreground-color;
                }
            }
        }

        // Workflow node functions
        .dbqdcl-functions-container {
            display: none;
            position: absolute;
            top: 5px;
            right: 5px;
            background: $sidebar-tile-background;
            padding: 3px 6px;
            border-radius: 15px;
            gap: 5px;

            .dbqdcl-dropdown-toggle,
            .dbqdcl-elevated-function {
                background: none;
                border: none;
                outline: none;
                width: 24px;
                height: 24px;
                padding: 0;
                cursor: pointer;

                svg {
                    fill: $text-color-default;
                    width: 20px;
                    height: 20px;
                }

                &:hover {
                    svg {
                        fill: $color-primary;
                    }
                }
            }
        }
    }

    // New node styling
    &.dbqcc-canvas-node-create {
        z-index: 1;
    }

    // Node selected styling
    &.dbqcc-canvas-node-selected {
        background: $canvas-control-node-active-background-color !important;
        border-color: $canvas-control-node-active-border-color;
        color: $canvas-control-node-active-foreground-color;
        z-index: 2;

        .dbqcc-canvas-node-delete {
            display: block;
        }

        svg {
            fill: $canvas-control-node-active-foreground-color;
        }

        // Connector styling
        .dbqcc-canvas-workflow-node-connectors-container {
            .dbqcc-canvas-workflow-node-connectors {
                .dbqcc-canvas-workflow-connector {
                    background: $canvas-control-node-active-background-color;
                }
            }
        }
    }

    // Connector styling
    .dbqcc-canvas-workflow-node-connectors-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        width: $canvas-control-workflow-node-connector-size;

        &.dbqcc-canvas-workflow-node-input-connectors-container {
            left: -7.5px;
        }

        &.dbqcc-canvas-workflow-node-output-connectors-container {
            right: -7.5px;
        }

        .dbqcc-canvas-workflow-node-connectors {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 5px;

            .dbqcc-canvas-workflow-connector {
                flex-shrink: 0;
                background: $canvas-control-workflow-node-connector-background-color;
                border: 1px solid $canvas-control-workflow-node-connector-border-color;
                border-radius: 50%;
                width: $canvas-control-workflow-node-connector-size;
                height: $canvas-control-workflow-node-connector-size;
                z-index: 1;

                &.dbqcc-canvas-workflow-connector-highlight {
                    background: $canvas-control-workflow-node-link-highlighted-color;
                }
                
                &.dbqcc-canvas-workflow-connector-selected {
                    background: $canvas-control-workflow-node-link-selected-color;
                }
                
                &.dbqcc-canvas-workflow-connector-error {
                    background: $canvas-control-error-color !important;
                }
            }
        }
    }
}

.dbqcc-canvas-node-tooltip {
    @include popup-menu;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 5px;
    color: $text-color-default;
    border-radius: $border-radius-default;
    font-size: $font-size-small;
    max-width: 250px;
    pointer-events: none;
    z-index: 2;

    .dbqcc-canvas-node-name {
        font-weight: $font-weight-bold;
    }

    .dbqcc-canvas-node-text {

    }
}

// Workflow resize handles
.dbqcc-canvas-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
            
    &.dbqcc-canvas-resize-handle-top-left {
        top: -5px;
        left: -5px;
        cursor: nwse-resize;
    }
    &.dbqcc-canvas-resize-handle-top {
        top: -5px;
        left: 50%;
        width: calc(100% - 10px);
        transform: translateX(-50%);
        cursor: ns-resize;
    }
    &.dbqcc-canvas-resize-handle-top-right {
        top: -5px;
        right: -5px;
        cursor: nesw-resize;
    }
    &.dbqcc-canvas-resize-handle-right {
        top: 50%;
        right: -5px;
        height: calc(100% - 10px);
        transform: translateY(-50%);
        cursor: ew-resize;
    }
    &.dbqcc-canvas-resize-handle-bottom-right {
        bottom: -5px;
        right: -5px;
        cursor: nwse-resize;
    }
    &.dbqcc-canvas-resize-handle-bottom {
        bottom: -5px;
        left: 50%;
        width: calc(100% - 10px);
        transform: translateX(-50%);
        cursor: ns-resize;
    }
    &.dbqcc-canvas-resize-handle-bottom-left {
        bottom: -5px;
        left: -5px;
        cursor: nesw-resize;
    }
    &.dbqcc-canvas-resize-handle-left {
        top: 50%;
        left: -5px;
        height: calc(100% - 10px);
        transform: translateY(-50%);
        cursor: ew-resize;
    }
}