@use 'true' as *;
@use 'sass:math';
@use '../src/functions';
@use '../src/harmony';

@function _limit-decimals($n) {
    @return math.div(math.floor($n * 1000), 1000);
}

@include describe('harmony') {
    @include it('modular-scale') {
        @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em, 1.1)), 1em,    'Zero iterations, 1em base, 1.1 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em, 1.1)), 1.1em,  '1 iteration, 1em base, 1.1 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 2rem, 2)), 1rem,   '-1 iteration, 2rem base, 2 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale');

        @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em 2em, 1.1)), 1em,        'Zero iterations, 1em 2em base, 1.1 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em 2em, 1.1)), 1.026em,    '1 iteration, 1em 2em base, 1.1 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(2, 1em 2em, 1.1)), 1.1em,      '2 iterations, 1em 2em base, 1.1 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 1em 1.5em, 1.2)), 0.868em, '-1 iteration, 1em 2em base, 1.1 scale');
        @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 1em 1.5em, 1.2)), 0.833em, '-2 iterations, 1em 2em base, 1.1 scale');
    }

    @include it('responsive-modular-scale') {
        @include assert('Single-stranded, fluid') {
            $ms: (
                320px: (1rem, 1.1),
                640px: (1rem, 1.2)
            );

            $rem320px:  functions.px-to-rem(320px);
            $rem640px:  functions.px-to-rem(640px);
            $diff320px: functions.strip-unit($rem640px - $rem320px);

            @include output {
                h3 {
                    @include harmony.responsive-modular-scale(font-size, 0, $ms);
                }

                h2 {
                    @include harmony.responsive-modular-scale(font-size, 1, $ms);
                }

                h1 {
                    @include harmony.responsive-modular-scale(font-size, 2, $ms);
                }
            }

            @include expect {
                h3 {
                    font-size: 1rem;

                    @media (min-width: 320px) and (max-width: 640px) {
                        font-size: calc(1rem + 0 * (100vw - #{$rem320px}) / #{$diff320px});
                    }

                    @media (min-width: 640px) {
                        font-size: 1rem;
                    }
                }

                h2 {
                    font-size: 1.1rem;

                    @media (min-width: 320px) and (max-width: 640px) {
                        font-size: calc(1.1rem + 0.1 * (100vw - #{$rem320px}) / #{$diff320px});
                    }

                    @media (min-width: 640px) {
                        font-size: 1.2rem;
                    }
                }

                h1 {
                    font-size: 1.21rem;

                    @media (min-width: 320px) and (max-width: 640px) {
                        font-size: calc(1.21rem + 0.23 * (100vw - #{$rem320px}) / #{$diff320px});
                    }

                    @media (min-width: 640px) {
                        font-size: 1.44rem;
                    }
                }
            }
        }

        @include assert('Single-stranded, non-fluid') {
            $ms: (
                320px: (1rem, 1.1),
                640px: (1rem, 1.2)
            );

            $rem320px:  functions.px-to-rem(320px);
            $rem640px:  functions.px-to-rem(640px);
            $diff320px: functions.strip-unit($rem640px - $rem320px);

            @include output {
                h3 {
                    @include harmony.responsive-modular-scale(font-size, 0, $ms, false);
                }

                h2 {
                    @include harmony.responsive-modular-scale(font-size, 1, $ms, false);
                }

                h1 {
                    @include harmony.responsive-modular-scale(font-size, 2, $ms, false);
                }
            }

            @include expect {
                h3 {
                    font-size: 1rem;

                    @media (min-width: 640px) {
                        font-size: 1rem;
                    }
                }

                h2 {
                    font-size: 1.1rem;

                    @media (min-width: 640px) {
                        font-size: 1.2rem;
                    }
                }

                h1 {
                    font-size: 1.21rem;

                    @media (min-width: 640px) {
                        font-size: 1.44rem;
                    }
                }
            }
        }

        @include assert('Double-stranded, fluid') {
            $ms: (
                320px: (1rem 2rem, 1.1),
                640px: (1rem 2rem, 1.2)
            );

            $rem320px:  functions.px-to-rem(320px);
            $rem640px:  functions.px-to-rem(640px);
            $diff320px: functions.strip-unit($rem640px - $rem320px);

            @include output {
                h3 {
                    @include harmony.responsive-modular-scale(font-size, 0, $ms);
                }

                h2 {
                    @include harmony.responsive-modular-scale(font-size, 1, $ms);
                }

                h1 {
                    @include harmony.responsive-modular-scale(font-size, 2, $ms);
                }
            }

            @include expect {
                h3 {
                    font-size: 1rem;

                    @media (min-width: 320px) and (max-width: 640px) {
                        font-size: calc(1rem + 0 * (100vw - #{$rem320px}) / #{$diff320px});
                    }

                    @media (min-width: 640px) {
                        font-size: 1rem;
                    }
                }

                h2 {
                    font-size: 1.0263162365rem;

                    @media (min-width: 320px) and (max-width: 640px) {
                        font-size: calc(1.0263162365rem + 0.1310911709 * (100vw - #{$rem320px}) / #{$diff320px});
                    }

                    @media (min-width: 640px) {
                        font-size: 1.1574074074rem;
                    }
                }

                h1 {
                    font-size: 1.1rem;

                    @media (min-width: 320px) and (max-width: 640px) {
                        font-size: calc(1.1rem + 0.1 * (100vw - #{$rem320px}) / #{$diff320px});
                    }

                    @media (min-width: 640px) {
                        font-size: 1.2rem;
                    }
                }
            }
        }

        @include assert('Double-stranded, non-fluid') {
            $ms: (
                320px: (1rem 2rem, 1.1),
                640px: (1rem 2rem, 1.2)
            );

            $rem320px:  functions.px-to-rem(320px);
            $rem640px:  functions.px-to-rem(640px);
            $diff320px: functions.strip-unit($rem640px - $rem320px);

            @include output {
                h3 {
                    @include harmony.responsive-modular-scale(font-size, 0, $ms, false);
                }

                h2 {
                    @include harmony.responsive-modular-scale(font-size, 1, $ms, false);
                }

                h1 {
                    @include harmony.responsive-modular-scale(font-size, 2, $ms, false);
                }
            }

            @include expect {
                h3 {
                    font-size: 1rem;

                    @media (min-width: 640px) {
                        font-size: 1rem;
                    }
                }

                h2 {
                    font-size: 1.0263162365rem;;

                    @media (min-width: 640px) {
                        font-size: 1.1574074074rem;;
                    }
                }

                h1 {
                    font-size: 1.1rem;

                    @media (min-width: 640px) {
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
}