@use "helper-functions";
@use "colors_definitions";
@use "sass:color";
@use "sass:map";

@mixin customRainbow($tone) {
    @each $color in map.keys(map.get(colors_definitions.$rainbow-colors, $tone)) {
        $c: helper-functions.map-deep-get(colors_definitions.$rainbow-colors, $tone, $color);
        --color-#{$color}: #{$c};
        --color-#{$color}-rgb:
            #{color.channel($c, "red", $space: rgb), color.channel($c, "green", $space: rgb),
            color.channel($c, "blue", $space: rgb)};
    }
}

// Create the block for custom theme (no mixing)
@each $tone in ("light", "dark") {
    .is-mobile.theme-#{$tone}.fas-custom-#{$tone},
    .theme-#{$tone}.fas-custom-#{$tone} {
        @include customRainbow($tone);
    }

    @media print {
        .fas-theme-#{$tone}-print.fas-custom-#{$tone} {
            @include customRainbow($tone);
        }
    }
}

@mixin predefinedRainbow($tone, $theme, $primary, $text, $space, $mix-with) {
    // For each rainbow color
    @each $color in map.keys(map.get(colors_definitions.$rainbow-colors, $tone)) {
        $c: helper-functions.map-deep-get(colors_definitions.$rainbow-colors, $tone, $color);
        $c: color.mix($c, $mix-with, colors_definitions.$keep); // Keep n% of the color

        @if $tone == "light" {
            $c: helper-functions.darken-till-contrast($c, $primary);
            --color-#{$color}: #{$c};

            $c:
                color.channel($c, "red", $space: rgb), color.channel($c, "green", $space: rgb),
                color.channel($c, "blue", $space: rgb);
            --color-#{$color}-rgb: #{$c};
        } @else {
            $c: helper-functions.lighten-till-contrast($c, $primary);
            --color-#{$color}: #{$c};

            $c:
                color.channel($c, "red", $space: rgb), color.channel($c, "green", $space: rgb),
                color.channel($c, "blue", $space: rgb);
            --color-#{$color}-rgb: #{$c};
        }
    }
}

@each $tone, $theme, $primary, $text, $space in colors_definitions.$themes {
    // Compute middle color between primary and text, used to mix the palette
    $hue-primary: color.channel($primary, "hue", $space: hsl);
    $hue-text: color.channel($text, "hue", $space: hsl);
    $mix-with: hsl(color.channel(color.mix($primary, $text), "hue", $space: hsl), 100%, 50%);
    @if color.channel($primary, "saturation", $space: hsl) < 1 and color.channel($text, "saturation", $space: hsl) < 1 {
        $mix-with: hsl(
            0,
            0%,
            calc(
                (color.channel($primary, "lightness", $space: hsl) + color.channel($text, "lightness", $space: hsl)) / 2
            )
        );
    }

    // Create the class CSS block
    .is-mobile.theme-#{$tone}.fas-#{$tone},
    .theme-#{$tone}.fas-#{$theme} {
        @include predefinedRainbow($tone, $theme, $primary, $text, $space, $mix-with);
    }

    @media print {
        .fas-theme-#{$tone}-print.fas-#{$theme} {
            @include predefinedRainbow($tone, $theme, $primary, $text, $space, $mix-with);
        }
    }
}
