// Update: 24/04/2021

//---------------------
@use "sass:math";

@mixin textGlitch(
    $name,
    $steps,
    $textColor,
    $background,
    $highlightColor1,
    $highlightColor2
) {
    @include position;
    color: $textColor;

    // Ensure the @keyframes are generated at the root level
    @at-root {
        // We need two different ones
        @for $i from 1 through 2 {
            @keyframes #{$name}-anim-#{$i} {
                @for $i from 0 through $steps {
                    $top: random(100);
                    $bottom: random(101 - $top);
                    #{percentage($i*math.div(1, $steps))} {
                        clip-path: inset(unquote("#{$top}% 0 #{$bottom}% 0"));
                    }
                }
            }
        }
    }

    &:before,
    &:after {
        @include position(absolute);
        @include wh(100%);
        content: attr(data-text);
        background: $background;
    }

    &:after {
        @include text-shadow(-1px 0 $highlightColor1);
        @include animation(#{$name}-anim-1 2s infinite linear alternate-reverse);
        left: 2px;
    }

    &:before {
        @include text-shadow(2px 0 $highlightColor2);
        @include animation(#{$name}-anim-2 3s infinite linear alternate-reverse);
        left: -2px;
    }
}

@mixin imgGlitch(
    $name,
    $steps,
    $top,
    $left
) {
    @include position;

    @at-root {
        // We need two different ones
        @for $i from 1 through 2 {
            @keyframes #{$name}-anim-#{$i} {
                @for $i from 0 through $steps {
                    $top_1: random(100);
                    $bottom: random(101 - $top_1);
                    #{percentage($i*math.div(1, $steps))} {
                        clip-path: inset(unquote("#{$top_1}% 0 #{$bottom}% 0"));
                    }
                }
            }
        }
    }

    > img {
        @include position(absolute, $top+px, $left+px);

        &:nth-child(2) {
            left: ($left + 2) + px;
            animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
        }

        &:nth-child(3) {
            left: ($left - 2) + px;
            animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
        }
    }
}

@mixin svgGlitch($name, $steps, $fillColor, $background, $fillHighlight1, $fillHighlight2, $width, $height, $top, $left) {
    @include position;

    // Ensure the @keyframes are generated at the root level
    @at-root {
        // We need two different ones
        @for $i from 1 through 2 {
            @keyframes #{$name}-anim-#{$i} {
                @for $i from 0 through $steps {
                    $top_1: random(100);
                    $bottom: random(101 - $top_1);
                    #{percentage($i*math.div(1, $steps))} {
                        clip-path: inset(unquote("#{$top_1}% 0 #{$bottom}% 0"));
                    }
                }
            }
        }
    }

    svg {
        @include position(absolute, $top+px, $left+px);
        @include wh($width+px, $height+px);
        fill: $fillColor;
        background: $background;

        &:nth-child(2) {
            left: ($left - 2) + px;
            animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
            fill: $fillHighlight1;
        }

        &:nth-child(3) {
            left: ($left + 3) + px;
            animation: #{$name}-anim-2 3s infinite linear alternate-reverse;

            fill: $fillHighlight2;
        }
    }
}

/*
    NOTE: is neccesary import glitch_keyframes
*/
@mixin backgroundGlitch($attr) {
    $img: mapv($attr, img, "");
    $w_im: mapv($attr, width, 100vw);
    $h_im: mapv($attr, height, 100vh);
    $mwi: mapv($attr, max-width, initial);
    $mhe: mapv($attr, max-height, initial);
    $s_img: mapv($attr, size_img, cover);
    $gh: mapv($attr, gap-horizontal, 10px);
    $gv: mapv($attr, gap-vertical, 5px);
    $position: mapv($attr, position, absolute);
    $bc1: mapv($attr, blend-color-1, $c0);
    $bc2: mapv($attr, blend-color-2, $c0);
    $bc3: mapv($attr, blend-color-3, $c0);
    $bc4: mapv($attr, blend-color-4, $c0);
    $bc5: mapv($attr, blend-color-5, $c3);
    $bm1: mapv($attr, blend-mode-1, initial);
    $bm2: mapv($attr, blend-mode-2, initial);
    $bm3: mapv($attr, blend-mode-3, initial);
    $bm4: mapv($attr, blend-mode-4, initial);
    $bm5: mapv($attr, blend-mode-5, overlay);
    $time: mapv($attr, time, 4s);
    $delay: mapv($attr, delay, 2s);
    $ar: mapv($attr, ar, false);
    $ratio: mapv($attr, ratio, 1.77);

    --gap-horizontal: #{$gh};
    --gap-vertical: #{$gv};
    --time-anim: #{$time};
    --delay-anim: #{$delay};

    @include position;
    max-width: $mwi;
    max-height: $mhe;

    @if $ar {
        @include aspect-ratio($w_im, $ratio);
    } @else {
        @include wh($w_im, $h_im);
    }

    .glitch_bg {
        @include position($position);
        @include transform(translate3d(0, 0, 0));
        @include wh(calc(100% + var(--gap-horizontal) * 2), calc(100% + var(--gap-vertical) * 2));
        @include background(
            $img, no-repeat,
            top center,
            $bc1, $s_img
        );
        background-blend-mode: $bm1;

        &:not(:first-child) {
            opacity: 0;
            animation: {
                duration: var(--time-anim);
                delay: var(--delay-anim);
                timing-function: linear;
                iteration-count: infinite;
            }
        }

        $blend-color: ($bc2, $bc3, $bc4, $bc5);
        $blend-mode: ($bm2, $bm3, $bm4, $bm5);
        $animation-name: (glitch-anim-1, glitch-anim-2, glitch-anim-3, glitch-anim-flash);

        @for $i from 2 through 5 {
            &:nth-child(#{$i}) {
                animation-name: #{nth($animation-name, $i - 1)};
                background: {
                    color: #{nth($blend-color, $i - 1)};
                    blend-mode:  #{nth($blend-mode, $i - 1)};
                }
            }
        }
    }
}