@use "sass:map";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$dropdown-disabled-opacity: h.useVar("control-disabled-opacity") !default;

$dropdown-menu-zindex: map.get(vars.$zindex, "dropdown") !default;
$dropdown-menu-spacer: 0px !default;
$dropdown-menu-padding: h.useVar("control-spacer") 0 !default;
$dropdown-menu-box-shadow:
    0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02) !default;
$dropdown-menu-background-color: h.useVar("control-background-color") !default;
$dropdown-menu-border-color: h.useVar("control-border-color") !default;
$dropdown-menu-border-style: solid !default;
$dropdown-menu-border-width: h.useVar("control-border-width") !default;
$dropdown-menu-border-radius: h.useVar("border-radius") !default;

$dropdown-item-padding: 0.25rem 1rem !default;
$dropdown-item-color: h.useVar("font-color") !default;
$dropdown-item-font-size: h.useVar("font-size") !default;
$dropdown-item-font-weight: h.useVar("font-weight") !default;
$dropdown-item-line-height: h.useVar("line-height") !default;

$dropdown-item-background-color: transparent !default;
$dropdown-item-active-color: h.useVar("primary-invert") !default;
$dropdown-item-active-background-color: h.useVar("primary") !default;
$dropdown-item-hover-background-color: h.useVar("grey-lighter") !default;
$dropdown-item-hover-color: h.useVar("font-color") !default;

$dropdown-modal-zindex: map.get(vars.$zindex, "modal") !default;
$dropdown-modal-max-height: min(50vh, calc(100vh - 160px)) !default;
$dropdown-modal-max-width: min(50vw, calc(100vw - 160px)) !default;
$dropdown-modal-min-width: min(80vw, 400px) !default;

$dropdown-overlay-background-color: h.useVar(
    "overlay-background-color"
) !default;
$dropdown-overlay-zindex: map.get(vars.$zindex, "overlay") !default;
/* @docs */

.o-dropdown {
    @include h.defineVar(
        "dropdown-disabled-opacity",
        $dropdown-disabled-opacity
    );
    @include h.defineVar(
        "dropdown-overlay-background-color",
        $dropdown-overlay-background-color
    );
    @include h.defineVar("dropdown-overlay-zindex", $dropdown-overlay-zindex);

    @include h.defineVar("dropdown-item-color", $dropdown-item-color);
    @include h.defineVar("dropdown-item-font-size", $dropdown-item-font-size);
    @include h.defineVar(
        "dropdown-item-font-weight",
        $dropdown-item-font-weight
    );
    @include h.defineVar(
        "dropdown-item-line-height",
        $dropdown-item-line-height
    );
    @include h.defineVar("dropdown-item-padding", $dropdown-item-padding);
    @include h.defineVar(
        "dropdown-item-background-color",
        $dropdown-item-background-color
    );
    @include h.defineVar(
        "dropdown-item-active-color",
        $dropdown-item-active-color
    );
    @include h.defineVar(
        "dropdown-item-active-background-color",
        $dropdown-item-active-background-color
    );
    @include h.defineVar(
        "dropdown-item-hover-color",
        $dropdown-item-hover-color
    );
    @include h.defineVar(
        "dropdown-item-hover-background-color",
        $dropdown-item-hover-background-color
    );

    @include h.defineVar("dropdown-menu-zindex", $dropdown-menu-zindex);
    @include h.defineVar("dropdown-menu-spacer", $dropdown-menu-spacer);
    @include h.defineVar("dropdown-menu-box-shadow", $dropdown-menu-box-shadow);
    @include h.defineVar("dropdown-menu-padding", $dropdown-menu-padding);
    @include h.defineVar(
        "dropdown-menu-background-color",
        $dropdown-menu-background-color
    );
    @include h.defineVar(
        "dropdown-menu-border-style",
        $dropdown-menu-border-style
    );
    @include h.defineVar(
        "dropdown-menu-border-color",
        $dropdown-menu-border-color
    );
    @include h.defineVar(
        "dropdown-menu-border-width",
        $dropdown-menu-border-width
    );
    @include h.defineVar(
        "dropdown-menu-border-radius",
        $dropdown-menu-border-radius
    );

    display: inline-flex;
    position: relative;
    vertical-align: top;

    &__trigger {
        display: inline-flex;
        width: 100%;
    }

    &__menu {
        position: absolute;
        display: block;
        width: max-content;
        min-width: 100%;

        z-index: h.useVar("dropdown-menu-zindex");
        padding: h.useVar("dropdown-menu-padding");

        box-shadow: h.useVar("dropdown-menu-box-shadow");
        background-color: h.useVar("dropdown-menu-background-color");
        border-color: h.useVar("dropdown-menu-border-color");
        border-style: h.useVar("dropdown-menu-border-style");
        border-width: h.useVar("dropdown-menu-border-width");
        border-radius: h.useVar("dropdown-menu-border-radius");

        // position variants
        &--bottom {
            left: 50%;
            right: auto;
            top: calc(100% + h.useVar("dropdown-menu-spacer"));
            bottom: auto;
            transform: translateX(-50%);
        }

        &--top {
            left: 50%;
            right: auto;
            top: auto;
            bottom: calc(100% + h.useVar("dropdown-menu-spacer"));
            transform: translateX(-50%);
        }

        &--left {
            right: calc(100% + h.useVar("dropdown-menu-spacer"));
            left: auto;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
        }

        &--right {
            right: auto;
            left: calc(100% + h.useVar("dropdown-menu-spacer"));
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
        }

        &--top-right {
            right: 0;
            left: auto;
            top: auto;
            bottom: calc(100% + h.useVar("dropdown-menu-spacer"));
        }

        &--top-left {
            right: auto;
            left: 0;
            top: auto;
            bottom: calc(100% + h.useVar("dropdown-menu-spacer"));
        }

        &--bottom-right {
            right: 0;
            left: auto;
            top: calc(100% + h.useVar("dropdown-menu-spacer"));
            bottom: auto;
        }

        &--bottom-left {
            right: auto;
            left: 0;
            top: calc(100% + h.useVar("dropdown-menu-spacer"));
            bottom: auto;
        }
    }

    &__item {
        display: block;
        position: relative;

        padding: h.useVar("dropdown-item-padding");

        color: h.useVar("dropdown-item-color");
        font-size: h.useVar("dropdown-item-font-size");
        font-weight: h.useVar("dropdown-item-font-weight");
        line-height: h.useVar("dropdown-item-line-height");

        background-color: h.useVar("dropdown-item-background-color");

        &--disabled {
            @include h.disabled(h.useVar("dropdown-disabled-opacity"));
        }

        &--active {
            @include h.defineVar(
                "dropdown-item-color",
                h.useVar("dropdown-item-active-color")
            );
            @include h.defineVar(
                "dropdown-item-background-color",
                h.useVar("dropdown-item-active-background-color")
            );
        }

        &--clickable {
            @include h.clickable;
        }

        &--clickable:not(&--active) {
            &:hover,
            &.o-dropdown__item--focused {
                @include h.defineVar(
                    "dropdown-item-color",
                    h.useVar("dropdown-item-hover-color")
                );
                @include h.defineVar(
                    "dropdown-item-background-color",
                    h.useVar("dropdown-item-hover-background-color")
                );
            }
        }
    }

    &--inline {
        display: inline;

        .o-dropdown__menu {
            position: static;
            display: inline-block;
            padding: 0;
        }
    }

    &--expanded {
        width: 100%;

        .o-dropdown__menu {
            width: 100%;
        }
    }

    &--disabled {
        @include h.disabled(h.useVar("dropdown-disabled-opacity"));
    }

    &--teleport {
        width: unset;
    }

    &--modal {
        @include h.defineVar("dropdown-modal-zindex", $dropdown-modal-zindex);
        @include h.defineVar(
            "dropdown-modal-max-height",
            $dropdown-modal-max-height
        );
        @include h.defineVar(
            "dropdown-modal-min-width",
            $dropdown-modal-min-width
        );
        @include h.defineVar(
            "dropdown-modal-max-width",
            $dropdown-modal-max-width
        );

        > .o-dropdown__overlay {
            pointer-events: auto;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            background-color: h.useVar("dropdown-overlay-background-color");
            z-index: h.useVar("dropdown-overlay-zindex");
        }

        > .o-dropdown__menu {
            pointer-events: auto;
            position: fixed;
            top: 25%;
            left: 50%;
            bottom: unset;
            right: unset;
            transform: translate3d(-50%, -25%, 0);

            min-width: h.useVar("dropdown-modal-min-width");
            max-width: h.useVar("dropdown-modal-max-width");
            max-height: h.useVar("dropdown-modal-max-height");
            z-index: h.useVar("dropdown-modal-zindex");
        }
    }
}