@use "sass:list";
@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/form/shared" as bulma-form;

$tooltip-arrow-size: 5px !default;
$tooltip-arrow-margin: 2px !default;
$tooltip-multiline-sizes: (
    small: 180px,
    medium: 240px,
    large: 300px
) !default;
$tooltip-colors: bulma-form.$form-colors !default;

// Map Local variables
$-css-vars-map: (
    "tooltip-arrow-size": $tooltip-arrow-size,
    "tooltip-arrow-margin": $tooltip-arrow-margin,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("b-tooltip", $-css-vars-map);

@mixin tooltip-arrow-color($direction, $color) {
    @if  $direction == "is-top" {
        border-top-color: $color;
    } @else if $direction == "is-bottom" {
        border-bottom-color: $color;
    } @else if $direction == "is-right" {
        border-right-color: $color;
    } @else if $direction == "is-left" {
        border-left-color: $color;
    }
}

@mixin tooltip($direction) {
    &.#{$direction} {
        .tooltip-content {
            // TODO: move calculations calc(100... to CSS Var
            --tooltip-content-spacing: calc(100% + var(--tooltip-arrow-size) + var(--tooltip-arrow-margin));

            @if  $direction == "is-top" {
                inset: auto auto var(--tooltip-content-spacing) 50%;
                transform: translateX(-50%);

                &::before {
                    inset: 100% auto auto 50%;
                    border-top: var(--tooltip-arrow-size) solid var(--primary);
                    border-right: var(--tooltip-arrow-size) solid transparent;
                    border-left: var(--tooltip-arrow-size) solid transparent;
                    transform: translateX(-50%);
                }
            } @else if $direction == "is-bottom" {
                inset: var(--tooltip-content-spacing) auto auto 50%;
                transform: translateX(-50%);

                &::before {
                    inset: auto auto 100% 50%;
                    border-right: var(--tooltip-arrow-size) solid transparent;
                    border-bottom: var(--tooltip-arrow-size) solid var(--primary);
                    border-left: var(--tooltip-arrow-size) solid transparent;
                    transform: translateX(-50%);
                }
            } @else if $direction == "is-right" {
                inset: 50% auto auto var(--tooltip-content-spacing);
                transform: translateY(-50%);

                &::before {
                    inset: 50% 100% auto auto;
                    border-top: var(--tooltip-arrow-size) solid transparent;
                    border-right: var(--tooltip-arrow-size) solid var(--primary);
                    border-bottom: var(--tooltip-arrow-size) solid transparent;
                    transform: translateY(-50%);
                }
            } @else if $direction == "is-left" {
                inset: 50% var(--tooltip-content-spacing) auto auto;
                transform: translateY(-50%);

                &::before {
                    inset: 50% auto auto 100%;
                    border-top: var(--tooltip-arrow-size) solid transparent;
                    border-bottom: var(--tooltip-arrow-size) solid transparent;
                    border-left: var(--tooltip-arrow-size) solid var(--primary);
                    transform: translateY(-50%);
                }
            }
        }

        @each $name, $pair in $tooltip-colors {
            $color: list.nth($pair, 1);
            &.is-#{$name} {
                .tooltip-content::before {
                    @include tooltip-arrow-color($direction, var(--#{$name}))
                }

                // If light and dark colors are provided
                @if list.length($pair) >= 4 {
                    $color-light: list.nth($pair, 3);

                    &.is-light {
                        .tooltip-content::before {
                            @include tooltip-arrow-color($direction, var(--#{$name}-light))
                        }
                    }
                }
            }
        }
    }
}

// Base
.b-tooltip {
    @include tooltip("is-top");
    @include tooltip("is-right");
    @include tooltip("is-bottom");
    @include tooltip("is-left");

    position: relative;
    display: inline-flex;

    .tooltip-content {
        position: absolute;
        z-index: 38;
        width: auto;
        padding: 0.35rem 0.75rem;
        font-size: 0.85rem;
        font-weight: var(--weight-normal);
        white-space: nowrap;
        border-radius: var(--radius-large);
        box-shadow: 0 1px 2px 1px rgb(var(--scheme-invert-rgb) 0.2);

        &::before {
            position: absolute;
            z-index: 38;
            pointer-events: none;
            content: "";
        }
    }

    .tooltip-trigger {
        width: 100%;
    }

    // Modifiers
    @each $name, $pair in $tooltip-colors {
        $color: list.nth($pair, 1);
        $color-invert: list.nth($pair, 2);
        &.is-#{$name} {
            .tooltip-content {
                color: var(--#{$name}-invert);
                background: var(--#{$name})
            }

            // If light and dark colors are provided
            @if list.length($pair) >= 4 {
                $color-light: list.nth($pair, 3);
                $color-dark: list.nth($pair, 4);

                &.is-light {
                    .tooltip-content {
                        color: var(--#{$name}-dark);
                        background: var(--#{$name}-light);
                    }
                }
            }
        }
    }

    &.is-always {
        .tooltip-content::before,
        .tooltip-content {
            visibility: visible;
            opacity: 1;
        }
    }

    &.is-multiline {
        .tooltip-content {
            display: flex-block;
            text-align: center;
            white-space: normal;
        }

        @each $name, $size in $tooltip-multiline-sizes {
            &.is-#{$name} {
                .tooltip-content {
                    width: $size;
                }
            }
        }
    }

    &.is-dashed {
        .tooltip-trigger {
            cursor: default;
            border-bottom: 1px dashed var(--grey-light);
        }
    }

    &.is-square {
        .tooltip-content {
            border-radius: 0;
        }
    }
}