@use 'sass:map';
@use 'sass:math';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin splitter($theme) {
    @include css-vars($theme);
    $splitter-color: var-get($theme, 'bar-color');
    $splitter-size: var-get($theme, 'size');
    $hitbox-size: rem(4px);
    $debug-hitbox: false;
    $hitbox-debug-color: rgba(coral, .24);

    $variant: map.get($theme, '_meta', 'theme');

    // Get unitless value from theme for use in CSS custom properties
    $size-unitless: unitless(map.get($theme, 'size'));

    %igx-splitter-base {
        // Define CSS custom properties that use --ig-base-font-size for dynamic calculations
        --splitter-size: calc(#{$size-unitless} * var(--ig-base-font-size, 16px) + 2px);
        --slim-splitter: calc(1 / calc(var(--splitter-size) / 1px));

        &[aria-orientation='horizontal'] {
            [dir='rtl'] & {
                flex-direction: row-reverse !important;
            }
        }
    }

    %handle-area {
        position: absolute;
        content: '';
        width: 100%;
        height: $hitbox-size;
        background: if($debug-hitbox, $hitbox-debug-color, transparent);

        @if $variant == 'indigo' {
            height: calc(var(--splitter-size) * 4);
        }
    }

    %handle-area--vertical {
        width: $hitbox-size;
        height: 100%;

        @if $variant == 'indigo' {
            width: calc(var(--splitter-size) * 4);
        }
    }

    %hide-controls {
        %igx-splitter-handle,
        %igx-splitter-expander {
            opacity: 0;
            transition: opacity .25s .3s ease;
            pointer-events: none;
        }
    }

    %show-controls {
        %igx-splitter-handle,
        %igx-splitter-expander {
            opacity: .68;
            transition: opacity .25s ease;
            pointer-events: auto;
        }
    }

    %expand-bars {
        [aria-orientation='horizontal'] & {
            transform: scaleX(1);
        }

        [aria-orientation='vertical'] & {
            transform: scaleY(1);
        }

        transition-delay: 0s !important;
    }

    %indigo-splitter-bar {
        @extend %hide-controls;
        transition: all .25s .3s $in-out-quad !important;

        [aria-orientation='horizontal'] & {
            transform: scaleX(var(--slim-splitter));
        }

        [aria-orientation='vertical'] & {
            transform: scaleY(var(--slim-splitter));
        }

        &:hover {
            @extend %expand-bars;
        }

        &.igx-splitter-bar--collapsible {
            &::before,
            &::after {
                transition-delay: 2s;
            }

            &:hover {
                %igx-splitter-handle,
                %igx-splitter-expander {
                    opacity: 1;
                    transition: opacity .25s ease;
                    pointer-events: auto;
                }

                &::before,
                &::after {
                    height: $hitbox-size;
                    width: 100%;
                    transition-delay: .5s;
                }

                &.igx-splitter-bar--vertical {
                    &::before,
                    &::after {
                        width: $hitbox-size;
                        height: 100%;
                    }
                }
            }
        }
    }

    %igx-splitter-bar {
        position: relative;
        display: flex;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        background: hsla(from $splitter-color h s l / 0.68);
        z-index: 99;
        padding-block: rem(1px);

        @if $variant != 'indigo' {
            transition: background .15s $out-quad !important;
            @extend %hide-controls;

            &.igx-splitter-bar--collapsible {
                @extend %show-controls;

                &:hover {
                    %igx-splitter-handle,
                    %igx-splitter-expander {
                        opacity: 1;
                    }
                }
            }
        }

        @if $variant == 'indigo' {
            @extend %indigo-splitter-bar;
        }

        &::before {
            @extend %handle-area;
            top: 100%;
        }

        &::after {
            @extend %handle-area;
            bottom: 100%;
        }

        &:hover {
            transition: all .25s ease-out;
            background: $splitter-color;
        }
    }

    %igx-splitter-bar--focus {
        // Remove the default browser outline styles
        outline: none;
        box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-color');
        transition: box-shadow .15s ease-in if($variant == 'indigo', .1s, 0s);
        z-index: 100;

        @if $variant == 'indigo' {
            %indigo-splitter-bar {
                @extend %expand-bars;

                &.igx-splitter-bar--collapsible {
                     @extend %show-controls;

                     &:hover {
                        %igx-splitter-handle,
                        %igx-splitter-expander {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    %igx-splitter-bar--active {
        background: var-get($theme, 'bar-color-active');
    }

    %igx-splitter-bar--vertical {
        padding: 0 rem(1px);
        flex-direction: column;
        height: 100%;

        &::before {
            @extend %handle-area--vertical;
            top: 0;
            right: 100%;
        }

        &::after {
            @extend %handle-area--vertical;
            top: 0;
            left: 100%;
        }
    }

    %igx-splitter-handle {
        background: var-get($theme, 'handle-color');
        border-radius: var-get($theme, 'border-radius');
    }

    %igx-splitter-handle--active {
        background: var-get($theme, 'handle-color-active');
    }

    %igx-splitter-handle--horizontal {
        width: 25%;
        height: $splitter-size;
        margin: 0 rem(48px);
    }

    %igx-splitter-handle--vertical {
        width: $splitter-size;
        height: 25%;
        margin: rem(48px) 0;
    }

    %igx-splitter-hitbox {
        position: absolute;
        content: '';
        background: if($debug-hitbox, $hitbox-debug-color, transparent);
    }

    %igx-splitter-expander {
        position: relative;
        width: 0;
        height: 0;
        border-inline-end: $splitter-size solid transparent;
        border-inline-start: $splitter-size solid transparent;
        cursor: pointer;
        z-index: 1;
    }

    %igx-splitter-expander--start {
        border-block-end: $splitter-size solid var-get($theme, 'expander-color');

        &::before {
            @extend %igx-splitter-hitbox;
            top: calc(100% - #{map.get($theme, 'size')});
            left: calc(100% - (#{map.get($theme, 'size')} * 2));
            width: calc(#{map.get($theme, 'size')} * 4);
            height: calc(#{map.get($theme, 'size')} * 3);
        }
    }

    %igx-splitter-expander--start--active {
        border-block-end-color: var-get($theme, 'expander-color-active');
    }

    %igx-splitter-expander--end {
        border-block-start: $splitter-size solid var-get($theme, 'expander-color');

        &::before {
            @extend %igx-splitter-hitbox;
            top: calc(100% - (#{map.get($theme, 'size')} * 2));
            left: calc(100% - (#{map.get($theme, 'size')} * 2));
            width: calc(#{map.get($theme, 'size')} * 4);
            height: calc(#{map.get($theme, 'size')} * 3);
        }
    }

    %igx-splitter-expander--end--active {
        border-block-start-color: var-get($theme, 'expander-color-active');
    }

    %igx-splitter-expander--start-vertical {
        border-block-start: $splitter-size solid transparent;
        border-inline-end: $splitter-size solid var-get($theme, 'expander-color');
        border-block-end: $splitter-size solid transparent;
        border-inline-start: unset;

        &::before {
            @extend %igx-splitter-hitbox;
            top: calc(100% - (#{map.get($theme, 'size')} * 2));
            left: calc(100% - (#{map.get($theme, 'size')} * 2));
            width: calc(#{map.get($theme, 'size')} * 3);
            height: calc(#{map.get($theme, 'size')} * 4);
        }
    }

    %igx-splitter-expander--start-vertical--active {
        border-block-end-color: transparent;
        border-inline-end-color: var-get($theme, 'expander-color-active');
    }

    %igx-splitter-expander--end-vertical {
        border-block-start: $splitter-size solid transparent;
        border-inline-end: unset;
        border-block-end: $splitter-size solid transparent;
        border-inline-start: $splitter-size solid var-get($theme, 'expander-color');

        &::before {
            @extend %igx-splitter-hitbox;
            left: calc(100% - (#{map.get($theme, 'size')} * 2));
            top: calc(100% - (#{map.get($theme, 'size')} * 2));
            height: calc(#{map.get($theme, 'size')} * 4);
            width: calc(#{map.get($theme, 'size')} * 3);
        }
    }

    %igx-splitter-expander--end-vertical--active {
        border-block-start-color: transparent;
        border-inline-start-color: var-get($theme, 'expander-color-active');
    }
}