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

// Set variables
$multi-panel-view-active-border-color: $color-primary;
$multi-panel-view-active-color: $text-color-default;

$multi-panel-view-inactive-border-color: $global-border-color;
$multi-panel-view-inactive-background-color: darken($global-background-color-default, 5%);
$multi-panel-view-inactive-color: $color-neutral-60;

$multi-panel-view-hover-color: $text-color-default;
$multi-panel-view-function-button-hover-color: $color-primary;
$multi-panel-view-header-height: 50px;
$multi-panel-view-svg-size: 24px;
$multi-panel-view-inner-padding: 5px;
$multi-panel-view-border-radius: 5px;

$multi-panel-dropdown-view-items-width: 260px;
$multi-panel-dropdown-view-items-max-height: 250px;

.dbq-multi-panel-controller {
    display: flex;
    flex-wrap: wrap;
    height: 100%;

    .dbqmp-view {
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        position: relative; // This will move the loading indicator to be inside the view

        // Default view styling (most default styling will be in the inactive style)
        .dbqmp-view-header {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding: 0 $padding-default;
            height: $multi-panel-view-header-height;
            gap: $padding-default;

            .dbqmp-view-header-breadcrumbs {
                display: flex;
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;

                #dbq-document-class-list-breadcrumbs,
                .dbqkbbs-breadcrumbs,
                .dbqmp-view-header-title {
                    min-width: 0;
                    overflow: hidden;
                }

                #dbq-document-class-list-breadcrumbs,
                .dbqkbbs-breadcrumbs {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    height: $multi-panel-view-header-height;
                    min-width: 0;
                    width: max-content;
                    max-width: 100%;
                    flex: 1 1 auto;
                    overflow: hidden;
                    flex-wrap: nowrap;

                    .dbqdcl-breadcrumb-button,
                    a {
                        min-width: 0;
                    }

                    .dbqdcl-breadcrumb-back,
                    .dbqdcl-breadcrumb-home {
                        flex: 0 0 auto;
                    }

                    .dbqdcl-breadcrumb-item {
                        flex: 0 1 auto;
                        overflow: hidden;
                    }

                    .dbqdcl-breadcrumb-current {
                        flex: 1 1 auto;
                        overflow: hidden;
                    }

                    .dbqdcl-breadcrumb-label {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    a {
                        color: $multi-panel-view-inactive-color;
                        padding: $multi-panel-view-inner-padding 0 !important;

                        svg {
                            fill: $multi-panel-view-inactive-color;
                        }
                    }
                }
            }
        
            .dbqmp-view-header-functions {
                display: flex;
                flex: 0 0 auto;
                flex-shrink: 0;
                gap: $padding-default;

                .dbqmp-view-header-function-button {
                    background: none;
                    border: none;
                    outline: 0;
                    cursor: pointer;
                    
                    svg {
                        fill: $multi-panel-view-inactive-color;
                    }

                    &.dbqmp-disabled {
                        cursor: not-allowed;
                    }

                    &:not(.disabled):hover {
                        
                        // This hover must only work for <svg>'s used directly in the function button.
                        // When the function button also contains a dropdown-menu, it will have an <a> tag with an <svg> inside.
                        > svg,
                        > a > svg {
                            fill: $multi-panel-view-function-button-hover-color !important; // Hover wouldn't override the standard fill color without !important.
                        }
                    }
                }
            }
        }

        .dbqmp-view-content {
            width: 100%;
            height: 100%;

            .dbqmp-view-content-placeholder {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;

                .dbqmp-view-content-placeholder-icon {
                    svg {
                        fill: $multi-panel-view-inactive-color;
                        width: 60px;
                        height: 60px;
                    }
                }

                .dbqmp-view-content-placeholder-description {
                    color: $multi-panel-view-inactive-color;
                    font-size: $font-size-large;
                    margin-top: $margin-default;
                }
            }
        }

        // Inactive view styling
        &[data-state-is-active="false"] {
            background: $multi-panel-view-inactive-background-color;

            .dbqmp-view-header {
                .dbqmp-view-header-breadcrumbs {
                    #dbq-document-class-list-breadcrumbs,
                    .dbqkbbs-breadcrumbs {
                        a {
                            // We must gray out the arrow icon inside the breadcrumbs for inactive views
                            &:not(:last-child) {
                                &:after {
                                    @if ($dark-theme == true) {
                                        filter: invert(80%);
                                    } @else {
                                        filter: invert(15%);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            // Hovering an inactive view styling
            &:hover {
                background: unset;

                .dbqmp-view-header {
                    .dbqmp-view-header-breadcrumbs {
                        #dbq-document-class-list-breadcrumbs,
                        .dbqkbbs-breadcrumbs {
                            a {
                                color: $multi-panel-view-hover-color;
        
                                svg {
                                    fill: $multi-panel-view-hover-color;
                                }
                                
                                // We must reset the arrow icon color inside the breadcrumbs when hovering inactive views
                                &:not(:last-child) {
                                    &:after {                                        
                                        @if ($dark-theme == false) {
                                            filter: invert(100%); // Change the default white color to black of the svg
                                        } @else {
                                            filter: unset;
                                        }
                                    }
                                }
                            }
                        }
                    }
                
                    .dbqmp-view-header-functions {
                        .dbqmp-view-header-function-button {
                            svg {
                                fill: $multi-panel-view-hover-color;
                            }
                        }
                    }
                }

                .dbqmp-view-content {
                    .dbqmp-view-content-placeholder {
                        .dbqmp-view-content-placeholder-icon {
                            svg {
                                fill: $multi-panel-view-hover-color;
                            }
                        }

                        .dbqmp-view-content-placeholder-description {
                            color: $multi-panel-view-hover-color;
                        }
                    }
                }
            }
        }

        // Active view styling
        &[data-state-is-active="true"] {
            .dbqmp-view-header {
                .dbqmp-view-header-breadcrumbs {
                    display: flex;
    
                    #dbq-document-class-list-breadcrumbs,
                    .dbqkbbs-breadcrumbs {
                        a {
                            color: $multi-panel-view-active-color;

                            svg {
                                fill: $multi-panel-view-active-color;
                            }
                        }
                    }
                }
                .dbqmp-view-header-functions {
                    .dbqmp-view-header-function-button {
                        svg {
                            fill: $multi-panel-view-active-color;
                        }
                    }
                }
            }

            .dbqmp-view-content {
                .dbqmp-view-content-placeholder {
                    .dbqmp-view-content-placeholder-icon {
                        svg {
                            fill: $multi-panel-view-active-color;
                        }
                    }
    
                    .dbqmp-view-content-placeholder-description {
                        color: $multi-panel-view-active-color;
                    }
                }
            }
        }
    }

    // The following styling is only applied when the layout mode is NOT 0,
    // meaning there are at least 2 panels visible.
    &[data-multi-panel-layout-mode]:not([data-multi-panel-layout-mode="0"]) {
        .dbqmp-view {
            border: 1px solid $multi-panel-view-inactive-border-color;

            .dbqmp-view-content {
                height: calc(100% - $multi-panel-view-header-height);

                // Remove the padding top of the class list when a MultiPanelViewHeader is available.
                .document-class-list-control-container .document-class-list-control-content-container {
                    padding-top: 0;
                }
            }
        }

        // Inactive view border hover color
        // .dbqmp-view[data-state-is-active="false"]:hover {
        //     border-color: $multi-panel-view-hover-color;
        // }

        // Active view border color
        .dbqmp-view[data-state-is-active="true"] {
            border: 1px solid $multi-panel-view-active-border-color;
        }
    }

    // DbqMultiPanelController.MultiPanelLayoutMode = {
    //   OneByOne: 0,
    //   OneByTwo: 1,
    //   OneByThree: 2,
    //   TwoByOne: 3,
    //   TwoByTwo: 4,
    //   TwoByThree: 5
    // };
    &[data-multi-panel-layout-mode="0"] {
        .dbqmp-view {
            height: 100%;

            // Don't show the header when there's only 1 panel
            .dbqmp-view-header {
                display: none;
            }

            // Don't show the placeholder when there's only 1 panel
            .dbqmp-view-content {
                .dbqmp-view-content-placeholder {
                    display: none;
                }
            }
        }
    }
    &[data-multi-panel-layout-mode="1"] {
        .dbqmp-view {
            height: 100%;
            width: 50%;
            flex-basis: 50%;
        }
    }
    &[data-multi-panel-layout-mode="2"] {
        .dbqmp-view {
            height: 100%;
            width: 33.33%;
            flex-basis: 33.33%;
        }
    }
    &[data-multi-panel-layout-mode="3"] {
        flex-direction: column;

        .dbqmp-view {
            height: 50%;
            width: 100%;
            flex-basis: 50%;
        }
    }
    &[data-multi-panel-layout-mode="4"] {
        .dbqmp-view {
            height: 50%;
            width: 50%;
            flex-basis: 50%;
        }
    }
    &[data-multi-panel-layout-mode="5"] {
        .dbqmp-view {
            height: 50%;
            width: 33.33%;
            flex-basis: 33.33%;
        }
    }
}

// Some controls don't have breadcrumbs and display a title instead (like chats)
// This styling has been added to root level because the title can be displayed inside a multipanel view as well as in the header of the BMS.
.dbqmp-view-header-title {
    display: flex;
    color: $text-color-default;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    line-height: 0.8;
}

// Available multipanel items
.dbqmp-view-items {
    display: flex;
    flex-direction: column;
    gap: $multi-panel-view-inner-padding;
    max-height: $multi-panel-dropdown-view-items-max-height;
    overflow-y: auto;
    @include scrollbar;

    .dbqmp-view-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        cursor: pointer;
        min-width: 0;
        gap: $multi-panel-view-inner-padding;
        padding: $multi-panel-view-inner-padding;
        border-radius: $multi-panel-view-border-radius;
        background: transparent;

        .dbqmp-view-item-location {
            svg {
                padding: 3px;
                width: $multi-panel-view-svg-size !important;
                height: $multi-panel-view-svg-size !important;
                fill: $multi-panel-view-active-color !important;
            }
        }

        .dbqmp-view-item-content {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;

            .dbqmp-view-item-header,
            .dbqmp-view-item-title {
                color: $multi-panel-view-active-color;
                font-size: $font-size-small;
                @include ellipsis;
            }

            .dbqmp-view-item-header {
                font-size: 11px;
                font-weight: $font-weight-bold;
                color: $multi-panel-view-inactive-color;
            }

            // .dbqmp-view-item-title {
            //     font-size: 11px;
            //     font-weight: $font-weight-bold;
            //     color: $multi-panel-view-inactive-color;
            // }
        }

        .dbqmp-view-item-actions {
            display: none;
            align-items: center;
            position: absolute;
            right: 15px;
            gap: 6px;
            flex: 0 0 auto;
            background: $global-background-color-default;
            border-radius: $multi-panel-view-border-radius;
            
            .dbqmp-view-item-action-button {
                @include button-rounded-with-icon;
            }
        }

        &:hover {
            background: $background-color-translucent-default;

            .dbqmp-view-item-actions {
                display: flex;
            }
        }

        // Highlight the panel in which the item is visible
        @for $i from 1 through 6 { 
            &.dbqmp-multi-panel-view-index-#{$i} {
                .dbqmp-view-item-location {
                    svg {
                        [class^="panel-"] {
                            fill-opacity: 0;
                        }

                        .panel-background {
                            fill-opacity: 1;
                        }

                        .panel-#{$i} {
                            fill-opacity: 1;
                            fill: $color-primary;
                        }
                    }
                }
            }
        }
    }

    .dbqmp-empty-dropdown-description {
        padding: 0 $multi-panel-view-inner-padding;
    }
}

// Dropdown menu (displayed in the header of the BMS)
.dbq-multi-panel-dropdown-menu {
    width: $multi-panel-dropdown-view-items-width !important;

    .dbqmp-dropdown {
        .dbqmp-dropdown-elevated-background {
            background: $global-background-color-default;
            border-radius: $multi-panel-view-border-radius;
            padding: $multi-panel-view-inner-padding;

            .dbqmp-title {
                font-weight: $font-weight-bold;   
                padding: $multi-panel-view-inner-padding $multi-panel-view-inner-padding ($multi-panel-view-inner-padding * 2) $multi-panel-view-inner-padding;
            }
        }

        .dbqmp-layout-modes-container {
            margin-bottom: $multi-panel-view-inner-padding;

            .dbqmp-layout-modes {
                .dbqmp-layout-mode-button {
                    background: none;
                    border: none;
                    outline: 0;

                    // Unfortunately !important is required here due to the DbqNavBar styling being loaded after this stylesheet.
                    // The default DbqNavBar styling would otherwise overwrite these settings.
                    svg {
                        padding: 3px;
                        fill: $text-color-default !important;
                        width: $multi-panel-view-svg-size !important;
                        height: $multi-panel-view-svg-size !important;
                    }

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

                    &.dbqmp-layout-mode-active {
                        svg {
                            fill: $color-primary !important;
                        }
                    }
                }   
            }
        }
    }
}

// Dropdown menu to switch between panels (displayed in the header of each panel)
.dbqmp-multi-panel-dropdown-menu {
    width: $multi-panel-dropdown-view-items-width !important;
}