@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 slider($theme) {
    @include css-vars($theme);

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

    $slider-height: rem(48px);
    $ripple-size: rem(40px);
    $ripple-radius: math.div($ripple-size, 2);

    $thumb-label-width: map.get((
        'material': rem(40px),
        'fluent': rem(40px),
        'bootstrap': rem(40px),
        'indigo': rem(36px)
    ), $variant);

    $thumb-label-height: map.get((
        'material': rem(30px),
        'fluent': rem(30px),
        'bootstrap': rem(30px),
        'indigo': rem(22px)
    ), $variant);

    $slider-track-height: map.get((
        'material': 6px,
        'fluent': 4px,
        'bootstrap': 8px,
        'indigo': 2px
    ), $variant);

    $slider-outline-width: map.get((
        'material': 0,
        'fluent': 0,
        'bootstrap': 3px,
        'indigo': 3px
    ), $variant);

    // Slider ticks
    $base-tick-height: rem(8px);
    $tick-height: $base-tick-height;
    $tick-height--tall: $base-tick-height * 2;
    $tick-width: rem(2px);

    // Slider Thumb
    $thumb-size: map.get((
        'material': 20px,
        'fluent': 16px,
        'bootstrap': 16px,
        'indigo': 12px
    ), $variant);
    $thumb-radius: math.div($thumb-size, 2);

    $thumb-indigo-idle: math.div($thumb-size , $thumb-size * 0 + 1);
    $thumb-indigo-hover: calc(16 / $thumb-indigo-idle);

    $thumb-border-width: map.get((
        'material': 0,
        'fluent': 2px,
        'bootstrap': 1px,
        'indigo': 2px
    ), $variant);

    // Slider Steps
    $steps-top-position: map.get((
        'material': 2px,
        'fluent': 1px,
        'bootstrap': 3px,
        'indigo': 0
    ), $variant);

    // Slider Label
    $slider-label-width: rem(36px);
    $slider-label-height: $slider-label-width;
    $slider-label-radius: math.div($slider-label-width, 2);
    $slider-label-padding: 0 rem(2px);

    %igx-slider-display {
        display: flex;
        position: relative;
        // Z-index 0 is needed to set the stacking context for the inner elements with z-index.
        // https://github.com/IgniteUI/igniteui-angular/issues/11597
        z-index: 0;
        height: $slider-height;
        align-items: center;
        transition: all .2s $out-quad;
        touch-action: pan-y pinch-zoom;

        &:hover {
            %igx-slider-track-fill {
                background: var-get($theme, 'track-hover-color');
            }

            %igx-slider-track-inactive {
                background: var-get($theme, 'base-track-hover-color');
            }

            @if $variant == 'fluent'{
                %igx-slider-thumb__dot::before {
                    border: rem($thumb-border-width) solid var-get($theme, 'thumb-focus-color');
                }
            }
        }
    }

    %igx-slider-disabled {
        pointer-events: none;

        %igx-slider-track-inactive {
            background: var-get($theme, 'disabled-base-track-color');
        }
    }

    %igx-slider-thumbs-container {
        position: absolute;
        width: 100%;
        height: 0;
        cursor: default;
        z-index: 1;
        inset-inline-start: 0;
    }

    %igx-slider-track {
        position: relative;
        width: 100%;
        height: rem($slider-track-height);
        overflow: hidden;
        border-radius: border-radius(rem(32px));

        @if $variant == 'indigo' {
            border-radius: border-radius(rem(4px));
        }
    }

    %igx-slider-track-inactive {
        position: absolute;
        width: 100%;
        height: inherit;
        background: var-get($theme, 'base-track-color');
        transition: background .2s $out-quad;
        border-radius: inherit;

        @if $variant == 'material' {
            height: rem(4px);
            top: 50%;
            transform: translateY(-50%);
        }
    }

    %igx-slider-track-fill {
        position: absolute;
        width: 100%;
        background: var-get($theme, 'track-color');
        transform-origin: left center;
        transform: scaleX(0);
        border-radius: inherit;
        height: inherit;

        [dir='rtl'] & {
            transform-origin: right center;
        }

        @if $variant == 'bootstrap' {
            display: none;
        }
    }

    %igx-slider-track-fill--disabled {
        background: var-get($theme, 'disabled-fill-track-color');
    }

    %igx-slider__ticks {
        width: 100%;
        display: flex;
        position: absolute;
        bottom: 0;
        justify-content: space-between;

        &%igx-slider__ticks--top {
            bottom: auto;
            top: 0;
            align-items: flex-end;
        }

        @if $variant == 'indigo' {
            bottom: rem(3px);

            &%igx-slider__ticks--top {
                top: rem(3px);
            }
        }
    }

    %igx-slider__ticks-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &:first-of-type {
            margin-inline-start: rem(-1px);
        }

        &:last-of-type {
            margin-inline-end: rem(-1px);
        }
    }

    %igx-slider__ticks-label {
        color: var-get($theme, 'tick-label-color');
        position: absolute;
        top: $tick-height--tall;
        transform: translate(-50%);
        line-height: .7;
        opacity: 1;
        transition: opacity .2s $in-out-quad;

        [dir='rtl'] & {
            left: 100%;
        }
    }

    %igx-slider__ticks-tick {
        background: var-get($theme, 'tick-color');
        height: $tick-height;
        width: $tick-width;
    }

    %igx-slider__ticks--tall {
        %igx-slider__ticks-label {
            top: calc(#{$tick-height--tall} + #{$tick-height});

            @if $variant == 'indigo' {
                top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
            }
        }
    }

    %igx-slider__tick--disabled {
        background: var-get($theme, 'disabled-base-track-color') !important;
    }

    %igx-slider__ticks-labels--disabled {
        color: var-get($theme, 'disabled-base-track-color') !important;
    }

    %igx-slider__ticks-group--tall {
        %igx-slider__ticks-tick {
            height: $tick-height--tall;
        }

        %igx-slider__ticks-label {
            top: calc(#{$tick-height--tall} + #{$tick-height});

            @if $variant == 'indigo' {
                top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
            }
        }
    }

    %igx-slider__ticks--top {
        %igx-slider__ticks-label {
            bottom: calc(#{$tick-height} + #{$tick-height});
            top: auto;
        }

        &%igx-slider__ticks--tall {
            %igx-slider__ticks-label {
                bottom: calc(#{$tick-height--tall} + #{$tick-height});
                top: auto;
            }
        }
    }

    %igx-slider__tick-label--hidden {
        opacity: 0;
    }

    %igx-slider-track-steps {
        position: absolute;
        display: flex;
        width: 100%;
        height: rem(4px);
        opacity: .85;
        transition: opacity .2s ease-out;
        top: 50%;
        transform: translateY(-50%);
        color: var-get($theme, 'track-step-color');

        svg {
            clip-path: inset(0 rem(3px) 0 rem(3px));
        }

        line {
            stroke: currentColor;
            stroke-width: var-get($theme, 'track-step-size');
            stroke-linecap: round;
        }
    }

    %igx-slider-track-steps--disabled {
        @if $variant == 'indigo' {
            color: transparent;
        }
    }

    %igx-slider__tick-labels--top-bottom {
        %igx-slider__ticks-group {
            display: block;
        }

        %igx-slider__ticks-label {
            writing-mode: vertical-rl;
            transform: translate(-50%) rotate(0deg);
        }

        %igx-slider__ticks--tall {
            %igx-slider__ticks-label {
                top: calc(#{$tick-height--tall} + #{rem(2px)});
            }
        }

        &%igx-slider__ticks--top {
            %igx-slider__ticks-label {
                writing-mode: vertical-rl;
                transform: translate(-50%) rotate(0deg);
            }

            %igx-slider__ticks--tall {
                %igx-slider__ticks-label {
                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});
                }
            }
        }
    }

    %igx-slider__tick-labels--bottom-top {
        %igx-slider__ticks-group {
            display: block;
        }

        %igx-slider__ticks-label {
            writing-mode: vertical-rl;
            transform: translate(-50%) rotate(180deg);
        }

        &%igx-slider__ticks--top {
            %igx-slider__ticks-label {
                writing-mode: vertical-rl;
                transform: translate(-50%) rotate(180deg);
            }

            %igx-slider__ticks--tall {
                %igx-slider__ticks-label {
                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});
                }
            }
        }
    }

    %igx-thumb-display {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: rem($thumb-size);
        height: rem($thumb-size);
        outline-style: none;
        top: -#{rem($thumb-radius)};
        margin-inline-start: -#{rem($thumb-radius)};

        @if $variant == 'material' {
            &:hover div::after {
                opacity: .12;
                transform: scale(1);
            }

            &:focus div::after {
                opacity: .18;
                transform: scale(1);
            }
        }

        @if $variant == 'indigo' {
            transition: transform .2s $out-quad;

            &:hover,
            &:active {
                transform: scale($thumb-indigo-hover);

                div::before {
                    border-color: var-get($theme, 'thumb-border-hover-color');
                }
            }
        }

        &:focus div::before {
            box-shadow: 0 0 0 rem($slider-outline-width) var-get($theme, 'thumb-focus-color');

            @if $variant == 'bootstrap' {
                border-color: var-get($theme, 'thumb-border-focus-color');
            }
        }
    }

    @if $variant == 'fluent' {
        %igx-slider-thumb--focused {
            div::after {
                $focus-outline-offset: rem(2px);

                position: absolute;
                content: '';
                pointer-events: none;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0 0 0 rem(1px) var-get($theme, 'thumb-border-focus-color');
                width: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));
                height: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));
            }
        }
    }

    %igx-thumb--disabled {
        &:focus div::before {
            box-shadow: none;

            @if $variant == 'fluent' or $variant == 'indigo' {
                border-color: var-get($theme, 'thumb-disabled-border-color') !important;
            }
        }

        &:focus div::after {
            transform: scale(0);
        }
    }

    %igx-label-display {
        position: absolute;
        pointer-events: none;
        display: flex;
        top: calc(((#{$thumb-label-height}) + rem(20px)) * -1);
        height: $thumb-label-height;

        @if $variant == 'indigo' {
            top: calc(((#{$thumb-label-height}) + rem(18px)) * -1);
        }
    }

    %igx-slider-thumb-label__container {
        border-radius: rem(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        margin-inline-start: -50%;
        padding: 0 rem(8px);
        background: var-get($theme, 'label-background-color');
        color: var-get($theme, 'label-text-color');
        min-width: $thumb-label-width;
        opacity: 0;

        @if $variant == 'indigo' {
            border-radius: rem(3px);
        }

        &::after {
            content: '';
            position: absolute;
            top: 85%;
            border-inline-start: rem(10px) solid transparent;
            border-inline-end: rem(10px) solid transparent;
            border-top: rem(10px) solid var-get($theme, 'label-background-color');

            @if $variant == 'indigo' {
                top: rem(16px);
                border-top: rem(12px) solid var-get($theme, 'label-background-color');
            }
        }
    }

    %igx-slider-thumb__dot {
        position: relative;
        inset-inline-start: 0;
        pointer-events: none;

        &::before {
            position: absolute;
            content: '';
            width: rem($thumb-size);
            height: rem($thumb-size);
            inset-inline-start: #{rem($thumb-radius) - math.div(rem($thumb-size), 2)};
            top: calc((#{$thumb-size} - #{$thumb-radius}) * -1);
            margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1);
            background: var-get($theme, 'thumb-color');
            border: rem($thumb-border-width) solid var-get($theme, 'thumb-border-color');
            transition: transform .1s $out-quad, border-radius .1s $out-quad;
            border-radius: border-radius(rem($thumb-radius));
        }

        @if $variant == 'material' {
            &::after {
                position: absolute;
                content: '';
                width: $ripple-size;
                height: $ripple-size;
                background: var-get($theme, 'thumb-color');
                top: calc(50% - #{$ripple-radius});
                inset-inline-start: calc(50% - #{$ripple-radius});
                opacity: 0;
                transform: scale(0);
                transform-origin: center center;
                transition: transform .1s $out-quad, opacity .1s $out-quad;
                border-radius: border-radius(50%);
                overflow: hidden;
            }
        }
    }

    %igx-slider-thumb__dot--disabled {
        pointer-events: none;

        &::before {
            background: var-get($theme, 'disabled-thumb-color');
            border-color: var-get($theme, 'thumb-disabled-border-color');
            border-radius: border-radius(rem($thumb-radius));
        }
    }

    %igx-slider-thumb__dot--pressed {
        @if $variant == 'material' {
            &::after {
                opacity: .24 !important;
                transform: scale(1) !important;
            }
        }
    }

    %igx-slider-thumb-label__container--active {
        opacity: 1;
    }

    %igx-slider-thumb-label__container--pressed {
        z-index: 1;
    }
}

/// Adds typography styles for the igx-slider component.
/// Uses the 'caption'
/// categories from the typographic scale.
/// @group typography
/// @param {Map} $categories [(ticks-label: 'caption', thumb-label: 'caption')] - The categories from the typographic scale used for type styles.
@mixin slider-typography(
    $categories: (
        ticks-label: 'caption',
        thumb-label: 'caption',
    )
) {
    $ticks-label: map.get($categories, 'ticks-label');
    $thumb-label: map.get($categories, 'thumb-label');

    %igx-slider-thumb-label__container {
        @include type-style($thumb-label)
    }

    %igx-slider__tick-label {
        @include type-style($ticks-label)
    }
}