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

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin switch($theme) {
    @include css-vars($theme);
    @include scale-in-out($start-scale: .9);

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

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

    $switch-height: map.get((
        'material': 14px,
        'fluent': 20px,
        'bootstrap': 16px,
        'indigo': 16px
    ), $variant);

    $switch-thumb-width: map.get((
        'material': 20px,
        'fluent': 12px,
        'bootstrap': 10px,
        'indigo': 8px
    ), $variant);

    $switch-on-offset: map.get((
        'material': 1px,
        'fluent': 5px,
        'bootstrap': 4px,
        'indigo': 7px
    ), $variant);

    $switch-off-offset: map.get((
        'material': -1px,
        'fluent': 3px,
        'bootstrap': math.div($switch-thumb-width, 4),
        'indigo': math.div($switch-thumb-width, 3),
    ), $variant);

    $ripple-display: map.get((
        'material': block,
        'fluent': none,
        'bootstrap': none,
        'indigo': none
    ), $variant);

    $thumb-resting-shadow: map.get((
        'material': var-get($theme, 'resting-elevation'),
        'fluent': none,
        'bootstrap': none,
        'indigo': none
    ), $variant);

    $thumb-hover-shadow: map.get((
        'material': var-get($theme, 'hover-elevation'),
        'fluent': none,
        'bootstrap': none,
        'indigo': none
    ), $variant);

    $thumb-disabled-shadow: map.get((
        'material': var-get($theme, 'disabled-elevation'),
        'fluent': none,
        'bootstrap': none,
        'indigo': none
    ), $variant);

    $switch-thumb-height: $switch-thumb-width;

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

    $label-margin: map.get((
        'material': rem(12px),
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(8px)
    ), $variant);

    $input-transition: all .2s $ease-in-out-quad;

    %switch-display {
        position: relative;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        cursor: pointer;
    }

    %switch-input {
        @include hide-default();
    }

    %switch-display--disabled {
        user-select: none;
        pointer-events: none;
        cursor: initial;
    }

    %switch-composite {
        display: flex;
        align-items: center;
        width: rem($switch-width);
        height: rem($switch-height);
        border: rem(1px) solid var-get($theme, 'border-color');
        border-radius: var-get($theme, 'border-radius-track');
        background: var-get($theme, 'track-off-color');
        user-select: none;
        transition: $input-transition;

        @if $variant == 'indigo' {
            border: rem(2px) solid var-get($theme, 'border-color');
        }

        //ripple color
        --color: #{var-get($theme, 'track-off-color')}
    }

    %switch-composite--hover {
        border-color: var-get($theme, 'border-hover-color');

        %switch-thumb {
            background: var-get($theme, 'thumb-off-hover-color');
        }

        %switch-thumb--x {
            background: var-get($theme, 'thumb-on-color');
        }
    }

    %switch-composite--x {
        background: var-get($theme, 'track-on-color');
        border-color: var-get($theme, 'border-on-color');

        //ripple color
        --color: #{var-get($theme, 'thumb-on-color')};
    }

    %switch-composite--x--hover {
        background: var-get($theme, 'track-on-hover-color');
        border-color: var-get($theme, 'border-on-hover-color');

        %switch-thumb {
            background: var-get($theme, 'thumb-on-color');
        }
    }

    %switch-composite--disabled {
        background: var-get($theme, 'track-disabled-color');
        border-color: var-get($theme, 'border-disabled-color');
    }

    %switch-composite-thumb {
        width: rem($switch-thumb-width);
        height: $switch-thumb-height;
        min-width: rem($switch-thumb-width);
        border-radius: var-get($theme, 'border-radius-thumb');
        transition: $input-transition;
        transform: translateX(#{rem($switch-off-offset)});

        [dir='rtl'] & {
            transform: translateX(#{rem(-1 * $switch-off-offset)});
        }
    }

    %switch-composite-thumb--x {
        transform: translateX(#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)});

        [dir='rtl'] & {
            transform: translateX(-#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)});
        }
    }

    %switch-thumb {
        position: relative;
        display: block;
        width: rem($switch-thumb-width);
        height: $switch-thumb-height;
        min-width: rem($switch-thumb-width);
        border-radius: var-get($theme, 'border-radius-thumb');
        background: var-get($theme, 'thumb-off-color');
        transition: $input-transition;

        @if $variant == 'material' {
            box-shadow: $thumb-resting-shadow;

            &:hover {
                box-shadow: $thumb-hover-shadow;
            }
        }
    }

    %switch-thumb--x {
        background: var-get($theme, 'thumb-on-color');
    }

    %switch-thumb--disabled {
        background: var-get($theme, 'thumb-disabled-color');
        box-shadow: $thumb-disabled-shadow;
    }

    %switch-ripple {
        display: $ripple-display;
        position: absolute;
        top: calc(50% - #{$ripple-radius});
        inset-inline-start: calc(50% - #{$ripple-radius});
        width: $ripple-size;
        height: $ripple-size;
        overflow: hidden;
        pointer-events: none;
        filter: opacity(1);
        border-radius: var-get($theme, 'border-radius-ripple');
    }

    %igx-switch--focused {
        @if $variant == 'fluent' {
            %switch-composite {
                position: relative;
                $focus-outline-offset: rem(3px);

                &::after {
                    content: '';
                    position: absolute;
                    inset: -$focus-outline-offset;
                    box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color');
                }
            }

            &.igx-checkbox--focused::after {
                opacity: 0;
            }
        }

        @if $variant == 'bootstrap' {
            %switch-composite {
                border-color: var-get($theme, 'focus-fill-color');
                box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
            }

            %switch-thumb {
                background: var-get($theme, 'focus-fill-color');
            }
        }

        @if $variant == 'indigo' {
            %switch-composite {
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
            }
        }
    }

    %igx-switch--focused--hover {
        @if $variant == 'bootstrap' {
            border-color: var-get($theme, 'focus-fill-hover-color');

            %switch-thumb {
                background: var-get($theme, 'focus-fill-hover-color');
            }
        }
    }

    %igx-switch--focused-checked {
        @if $variant == 'bootstrap' {
            %switch-composite {
                border-color: var-get($theme, 'border-on-color');
            }

            %switch-thumb--x {
                background: var-get($theme, 'thumb-on-color');
            }
        }

        @if $variant == 'indigo' {
            %switch-composite {
                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
            }
        }
    }

    %igx-switch--disabled-checked {
        %switch-composite--x {
            background: var-get($theme, 'track-on-disabled-color');
        }

        %switch-thumb--x {
            background: var-get($theme, 'thumb-on-disabled-color');
        }

        @if $variant == 'bootstrap' or $variant == 'fluent'{
            %switch-composite--x {
                border-color: var-get($theme, 'track-on-disabled-color');
            }
        }

        @if $variant == 'indigo' {
            %switch-composite--x {
                border-color: transparent;
            }
        }
    }

    %switch-ripple--focused {
        background: color($color: 'gray', $variant: 600);
        transition: background .2s $ease-out-quad;
        opacity: .12;

        @if $theme-variant == 'dark' {
            opacity: .24;
        }
    }

    %switch-ripple--focused-checked {
        background: var-get($theme, 'thumb-on-color');
    }

    %switch-label {
        display: inline-block;
        color: var-get($theme, 'label-color');
        user-select: none;
        word-wrap: break-all;

        &:empty {
            margin: 0;
        }
    }

    %switch-label--before,
    %switch-label--after {
        &:empty {
            margin: 0;
        }
    }

    %switch-label--after {
        margin-inline-start: $label-margin;
    }

    %switch-label--before {
        order: -1;
        margin-inline-end: $label-margin;
    }

    %switch-label--hover {
        color: var-get($theme, 'label-hover-color');
    }

    %switch-label--disabled {
        color: var-get($theme, 'label-disabled-color');
    }

    %switch-ripple--hover {
        &::after {
            position: absolute;
            content: '';
            opacity: .06;
            inset: 0;

            @if $theme-variant == 'dark' {
                opacity: .12;
            }
        }
    }

    %switch-ripple--hover-unchecked {
        &::after {
            background: color($color: 'gray', $variant: 600);
        }
    }

    %switch-ripple--hover-checked {
        &::after {
            background: var-get($theme, 'thumb-on-color');
        }
    }

    %switch-ripple--pressed {
        &::after {
            opacity: .12;

            @if $theme-variant == 'dark' {
                opacity: .24;
            }
        }
    }
}

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

    %switch-label {
        @include type-style($label) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}