@use 'sass:map';
@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;

@mixin msk-header {
    @include m.msk-reset-box-sizing('.msk-header');

    $msk-header-height: m.msk-rem(64px);
    $msk-header-divider-color: tk.$msk--color-border;
    $msk-header-default-color: tk.$msk--color-content-action;
    $msk-header-logo-color: tk.$msk--color-content-logo;
    $msk-header-active-color: tk.$msk--color-content-action-selected;
    $msk-header-hover-color: tk.$msk--color-content-action-hover;

    //--------------------------------------------------------------------------
    // Header - Skip to content
    //--------------------------------------------------------------------------
    .msk--skip-to-content {
        border: 0;
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        height: m.msk-rem(1px);
        overflow: hidden;
        padding: 0;
        position: absolute;
        visibility: inherit;
        white-space: nowrap;
        width: m.msk-rem(1px);

        &:focus {
            @include m.msk-btn-ghost;

            align-items: center;
            clip: auto;
            display: flex;
            height: auto;
            left: 0;
            padding: m.msk-rem(12px) m.msk-rem(16px);
            top: 0;
            width: auto;
            z-index: 9999;
        }
    }

    //--------------------------------------------------------------------------
    // Inner Container
    //--------------------------------------------------------------------------
    .msk-header-container {
        @include m.msk-container-with-padding;

        height: 100%;
        width: 100%;
    }

    .msk-header-container-2400 {
        @include m.msk-container-2400;
    }

    .msk-header-container-fluid {
        @include m.msk-container-fluid;
    }

    .msk-header-content {
        display: flex;
        height: inherit;
        padding-inline: m.msk-rem(8px);
        width: inherit;
    }

    //--------------------------------------------------------------------------
    // Main Container
    //--------------------------------------------------------------------------
    .msk-header {
        @include m.msk-focus;

        background-color: tk.$msk--color-bg;
        box-shadow: 0 m.msk-rem(2px) tk.$msk--color-border-weak;
        box-sizing: border-box;
        color: $msk-header-default-color;
        height: $msk-header-height;
        overflow: hidden;

        &.max-width {
            .msk-header-container {
                @include m.msk-container-with-padding;
            }

            .msk-header-content {
                padding: 0 m.msk-rem(8px);
            }
        }

        // Keeping the header fixed at the top of the page
        &.msk-header--fixed {
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 9999;
        }
    }

    //--------------------------------------------------------------------------
    // Logo Elements
    //--------------------------------------------------------------------------
    .msk-header-product {
        align-items: center;
        color: $msk-header-logo-color;
        display: flex;
        flex: 0 0 auto;
        height: 100%;
    }

    .msk-header-product-link {
        align-items: center;
        color: $msk-header-logo-color;
        display: flex;
        height: 100%;
        margin-left: m.msk-rem(-8px);
        margin-right: m.msk-rem(8px);
        padding: m.msk-rem(8px);
    }

    .msk-header-product-logo-container {
        > img,
        .msk-header-product-logo {
            display: block;
        }
    }

    .msk-header-product-name {
        align-items: center;
        box-shadow: m.msk-rem(-1px) 0 tk.$msk--color-border-weak;
        color: tk.$msk--color-content-logo;
        display: flex;
        font-weight: 600;
        height: 100%;
        margin-left: m.msk-rem(16px);
        padding-left: m.msk-rem(16px);
    }

    //--------------------------------------------------------------------------
    // Navigation Elements
    //--------------------------------------------------------------------------
    .msk-header-app-menu {
        display: flex;
        flex: 1 1 auto;
        height: 100%;
    }

    // Navigation wrapper
    .msk-header-app-nav {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .msk-header-app-nav-li {
        height: 100%;
    }

    // Navigation item
    .msk-header-app-nav-item {
        align-items: center;
        color: tk.$msk--color-content-action;
        cursor: pointer;
        display: flex;
        height: 100%;
        padding-inline: 1rem;

        .msk-header-app-nav-item-text {
            color: inherit;
        }
    }

    //--------------------------------------------------------------------------
    // Control Elements
    //--------------------------------------------------------------------------
    .msk-header-controls {
        align-items: center;
        box-shadow: m.msk-rem(-1px) 0 tk.$msk--color-border-weak;
        display: flex;
        flex: 0 1 auto;
        height: 100%;
    }

    // Control button
    .msk-header-controls-button {
        appearance: none;
        background-color: transparent;
        border: 0;
        box-sizing: border-box;
        color: $msk-header-default-color;
        cursor: pointer;
        font-size: m.msk-rem(24px);
        height: 100%;
        padding-inline: m.msk-rem(16px);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;

        > .msk-icon {
            color: inherit;
            font-size: m.msk-rem(24px);
        }
    }

    //--------------------------------------------------------------------------
    // Nav item selectors
    //--------------------------------------------------------------------------
    .msk-header-app-nav-item,
    .msk-header-controls-button {
        position: relative;
        transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

        &::after {
            background-color: transparent;
            border-radius: m.msk-rem(4px) m.msk-rem(4px) 0 0;
            bottom: 0;
            content: '';
            height: m.msk-rem(4px);
            left: 0;
            position: absolute;
            right: 0;
            transition: inherit;
        }
    }

    /* ----- Active states ----- */
    .msk-header-app-nav-item.active,
    .msk-header-controls-button.active {
        color: tk.$msk--color-content-action-selected;

        &::after {
            background-color: tk.$msk--color-content-action-selected;
        }
    }

    /* ----- Hover states ----- */
    .msk-header-product-link:hover {
        color: $msk-header-logo-color;
    }

    .msk-header-app-nav-item:not(.active):hover,
    .msk-header-controls-button:not(.active):hover {
        color: $msk-header-hover-color;
        text-decoration: none;

        &::after {
            background-color: $msk-header-hover-color;
        }
    }

    .msk-header-app-nav-item:focus,
    .msk-header-controls-button:focus {
        color: $msk-header-hover-color;

        &::after {
            background-color: $msk-header-hover-color;
            clip-path: inset(0 3px 3px 3px);
        }
    }

    //--------------------------------------------------------------------------
    // Overflow
    //--------------------------------------------------------------------------
    // .msk-header-app-nav-overflow *:focus {
    //     box-shadow: inset 0 0 0 m.msk-rem(2px) c.$msk--black-100-active,
    //         inset 0 0 0 m.msk-rem(3px) c.$msk--white-0;
    // }

    // .msk-header-app-nav-overflow {
    //     @include m.msk-focus;
    //     height: 100%;
    //     display: flex;
    //     align-items: center;

    //     .msk-header-app-nav-item {
    //         &:hover,
    //         &:focus {
    //             background-color: transparent;
    //         }

    //         > .msk-icon {
    //             align-self: center;
    //         }
    //     }
    // }

    .msk-header {
        .msk-header-app-nav {
            display: none;
        }

        .msk-header-app-nav-menu-overflow {
            display: none;
        }

        @media (min-width: 768px) {
            .msk-menu-button-overflow-nav {
                display: none;
            }

            .msk-header-app-nav {
                display: flex;
            }

            .msk-header-app-nav-menu-overflow {
                display: block;
            }
        }

        .msk-header-app-nav-menu-overflow {
            .msk-overflow-menu-options {
                font-size: v.$msk--size-1;
            }
            .#{$prefix}--overflow-menu__wrapper {
                display: inline-flex;
                height: 100%;
            }
            .#{$prefix}--tooltip-trigger__wrapper,
            .#{$prefix}--overflow-menu {
                height: 100%;
            }
        }
    }

    .msk-menu-button-overflow-nav {
        border-top: 1px solid tk.$msk--color-border;
        display: block;

        @media (min-width: 768px) {
            display: none;
        }
    }

    /* ----- Vue edge case ----- */
    .msk-header-app-nav-overflow {
        .cv-overflow-menu {
            width: 3rem;

            &:focus {
                box-shadow: none;
            }
        }

        .#{$prefix}--overflow-menu__trigger.#{$prefix}--tooltip--a11y.#{$prefix}--tooltip__trigger {
            height: 100%;
            width: 3rem;

            &:focus {
                outline-color: transparent;
            }

            &.#{$prefix}--overflow-menu--open {
                background-color: tk.$msk--color-bg;
                box-shadow: v.$msk--elevation-plus-03;
            }
        }
    }

    // fixes
    .msk-header {
        .#{$prefix}--visually-hidden {
            position: fixed;
        }
    }
}

@mixin next-msk-header {
    .msk-header--next.msk-header {
        z-index: 1;
        overflow: visible;
        background-color: tk.$msk--color-bg;
        margin-bottom: m.msk-rem(2px);

        .msk-header--container {
            margin-left: auto;
            margin-right: auto;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            height: 100%;
            width: 100%;
        }

        &.msk-header--width-default {
            .msk-header--container {
                max-width: 1440px;

                @media (min-width: 1025px) {
                    padding-left: 3rem;
                    padding-right: 3rem;
                }
            }
        }
        &.msk-header--width-fluid {
            .msk-header--container {
                max-width: 100%;
            }
        }

        &.msk-header--width-max {
            .msk-header--container {
                max-width: 2400px;
            }
        }

        // product name and logo
        .msk-header--product-logo-container {
            display: flex;
            align-items: center;
        }
        .msk-header--product-logo {
            font-size: m.msk-rem(40px);
            color: tk.$msk--color-content-logo;
        }

        // hide the navigation items the go to next line
        .msk-header-app-menu {
            overflow: hidden;
        }

        .msk-header--control-no-divider {
            box-shadow: none;
        }

        // control button
        .msk-header--control-button-container {
            height: 100%;
            .msk-header--control-button {
                @include m.msk-edge-btn-ghost;
                outline: none;
                cursor: pointer;
                border: none;
                height: 100%;
                position: relative;
                font-size: m.msk-rem(24px);
                padding-left: m.msk-rem(16px);
                padding-right: m.msk-rem(16px);
                color: tk.$msk--color-content-action;

                &:not(:disabled):focus:hover,
                &:not(:disabled):focus:active {
                    box-shadow: inset 0 0 0 m.msk-rem(2px)
                            tk.$msk--color-border-focus-outer,
                        inset 0 0 0 m.msk-rem(3px)
                            tk.$msk--color-border-focus-inner;
                }

                &::after {
                    background-color: transparent;
                    border-radius: m.msk-rem(4px) m.msk-rem(4px) 0 0;
                    bottom: 0;
                    content: '';
                    height: m.msk-rem(4px);
                    left: 0;
                    position: absolute;
                    right: 0;
                    transition: inherit;
                }

                &.active {
                    color: tk.$msk--color-content-action-selected;
                    &::after {
                        background-color: tk.$msk--color-content-action-selected;
                    }
                }
                .msk-header--control-button-icon {
                    color: inherit;
                }
            }
        }
    }
    /*-----
    Avatar
    -----*/
    $avatar-bg-color-map: (
        'blue': tk.$msk--color-bg-tag-blue,
        'cyan': tk.$msk--color-bg-tag-cyan,
        'green': tk.$msk--color-bg-tag-green,
        'magenta': tk.$msk--color-bg-tag-magenta,
        'orange': tk.$msk--color-bg-tag-orange,
        'purple': tk.$msk--color-bg-tag-purple,
        'red': tk.$msk--color-bg-tag-red,
        'teal': tk.$msk--color-bg-tag-teal,
        'yellow': tk.$msk--color-bg-tag-yellow,
    );

    $avatar-content-color-map: (
        'blue': tk.$msk--color-content-tag-blue,
        'cyan': tk.$msk--color-content-tag-cyan,
        'green': tk.$msk--color-content-tag-green,
        'magenta': tk.$msk--color-content-tag-magenta,
        'orange': tk.$msk--color-content-tag-orange,
        'purple': tk.$msk--color-content-tag-purple,
        'red': tk.$msk--color-content-tag-red,
        'teal': tk.$msk--color-content-tag-teal,
        'yellow': tk.$msk--color-content-tag-yellow,
    );

    $avatar-bg-active-color-map: (
        'blue': tk.$msk--color-bg-tag-blue-active,
        'cyan': tk.$msk--color-bg-tag-cyan-active,
        'green': tk.$msk--color-bg-tag-green-active,
        'magenta': tk.$msk--color-bg-tag-magenta-active,
        'orange': tk.$msk--color-bg-tag-orange-active,
        'purple': tk.$msk--color-bg-tag-purple-active,
        'red': tk.$msk--color-bg-tag-red-active,
        'teal': tk.$msk--color-bg-tag-teal-active,
        'yellow': tk.$msk--color-bg-tag-yellow-active,
    );

    $avatar-border-active-color-map: (
        'blue': tk.$msk--color-border-tag-blue-active,
        'cyan': tk.$msk--color-border-tag-cyan-active,
        'green': tk.$msk--color-border-tag-green-active,
        'magenta': tk.$msk--color-border-tag-magenta-active,
        'orange': tk.$msk--color-border-tag-orange-active,
        'purple': tk.$msk--color-border-tag-purple-active,
        'red': tk.$msk--color-border-tag-red-active,
        'teal': tk.$msk--color-border-tag-teal-active,
        'yellow': tk.$msk--color-border-tag-yellow-active,
    );

    $avatar-content-active-color-map: (
        'blue': tk.$msk--color-content-tag-blue-active,
        'cyan': tk.$msk--color-content-tag-cyan-active,
        'green': tk.$msk--color-content-tag-green-active,
        'magenta': tk.$msk--color-content-tag-magenta-active,
        'orange': tk.$msk--color-content-tag-orange-active,
        'purple': tk.$msk--color-content-tag-purple-active,
        'red': tk.$msk--color-content-tag-red-active,
        'teal': tk.$msk--color-content-tag-teal-active,
        'yellow': tk.$msk--color-content-tag-yellow-active,
    );
    $avatar-bg-hover-color-map: (
        'blue': tk.$msk--color-bg-tag-blue-hover,
        'cyan': tk.$msk--color-bg-tag-cyan-hover,
        'green': tk.$msk--color-bg-tag-green-hover,
        'magenta': tk.$msk--color-bg-tag-magenta-hover,
        'orange': tk.$msk--color-bg-tag-orange-hover,
        'purple': tk.$msk--color-bg-tag-purple-hover,
        'red': tk.$msk--color-bg-tag-red-hover,
        'teal': tk.$msk--color-bg-tag-teal-hover,
        'yellow': tk.$msk--color-bg-tag-yellow-hover,
    );

    $avatar-border-hover-color-map: (
        'blue': tk.$msk--color-border-tag-blue-hover,
        'cyan': tk.$msk--color-border-tag-cyan-hover,
        'green': tk.$msk--color-border-tag-green-hover,
        'magenta': tk.$msk--color-border-tag-magenta-hover,
        'orange': tk.$msk--color-border-tag-orange-hover,
        'purple': tk.$msk--color-border-tag-purple-hover,
        'red': tk.$msk--color-border-tag-red-hover,
        'teal': tk.$msk--color-border-tag-teal-hover,
        'yellow': tk.$msk--color-border-tag-yellow-hover,
    );

    $avatar-content-hover-color-map: (
        'blue': tk.$msk--color-content-tag-blue-hover,
        'cyan': tk.$msk--color-content-tag-cyan-hover,
        'green': tk.$msk--color-content-tag-green-hover,
        'magenta': tk.$msk--color-content-tag-magenta-hover,
        'orange': tk.$msk--color-content-tag-orange-hover,
        'purple': tk.$msk--color-content-tag-purple-hover,
        'red': tk.$msk--color-content-tag-red-hover,
        'teal': tk.$msk--color-content-tag-teal-hover,
        'yellow': tk.$msk--color-content-tag-yellow-hover,
    );

    .msk-header--avatar-content {
        aspect-ratio: 1 / 1;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 50%;
        border-width: 2px;
        border-style: solid;
        line-height: 1;
    }
    .msk-header--avatar--label {
        display: flex;
        align-items: center;
        gap: m.msk-rem(16px);
        .msk-header--avatar-content-inner {
            @include m.msk-heading(h4);
            color: tk.$msk--color-content-secondary;
        }
    }

    @each $type in map-keys($avatar-bg-color-map) {
        .msk-header--avatar--#{$type} {
            .msk-header--avatar-content {
                background-color: map-get($avatar-bg-color-map, $type);
                border-color: map-get($avatar-bg-color-map, $type);
                color: map-get($avatar-content-color-map, $type);
            }
        }
        .msk-header--control-button {
            &:hover {
                .msk-header--avatar--#{$type} {
                    .msk-header--avatar-content {
                        background-color: map-get(
                            $avatar-bg-hover-color-map,
                            $type
                        );
                        border-color: map-get(
                            $avatar-border-hover-color-map,
                            $type
                        );
                        color: map-get($avatar-content-hover-color-map, $type);
                    }
                }
            }
            &:active {
                .msk-header--avatar--#{$type} {
                    .msk-header--avatar-content {
                        background-color: map-get(
                            $avatar-bg-active-color-map,
                            $type
                        );
                        border-color: map-get(
                            $avatar-border-active-color-map,
                            $type
                        );
                        color: map-get($avatar-content-active-color-map, $type);
                    }
                }
            }
        }
    }

    .msk-header--avatar--lg {
        font-size: 20px;
        .msk-header--avatar-content {
            width: m.msk-rem(56px);
            height: m.msk-rem(56px);
        }
    }
    .msk-header--avatar--md {
        font-size: 16px;
        .msk-header--avatar-content {
            width: m.msk-rem(40px);
            height: m.msk-rem(40px);
        }
    }
    .msk-header--avatar--sm {
        font-size: 16px;
        .msk-header--avatar-content {
            width: m.msk-rem(32px);
            height: m.msk-rem(32px);
        }
    }
    // image
    .msk-header--avatar-content.msk-header--avatar-img-container {
        background-size: cover;
        border-width: 0;
    }

    .msk-header--control-button-menu.#{$prefix}--menu {
        border-top-right-radius: 0;
        max-width: m.msk-rem(300px);
    }
}