// ============================================================================================= //
//                                             TEST                                              //
// ============================================================================================= //

@use "pkg:sass-true" as *;
@use "../mixins";
@use "../functions";

@include describe("core") {
    @include describe("mixins") {
        @include describe("emit-custom-props()") {
            @include it("Should return theme custom properties declarations.") {
                @include assert {
                    @include output(false) {
                        $tokens: (
                            "text-color": darkcyan,
                            "text-size": 16px,
                            "padding": (
                                "top": 12px
                            )
                        );

                        .test {
                            @include mixins.emit-custom-props($tokens, "button");
                        }
                    }

                    @include expect(false) {
                        .test {
                            --mg-button-text-color: darkcyan;
                            --mg-button-text-size: 16px;
                            --mg-button-padding-top: 12px;
                        }
                    }
                }
            }

            @include it("Should return theme custom properties declarations without component name.") {
                @include assert {
                    @include output(false) {
                        $tokens: (
                            "text-color": darkcyan,
                            "text-size": 16px,
                            "padding": (
                                "top": 12px
                            )
                        );

                        .test {
                            @include mixins.emit-custom-props($tokens);
                        }
                    }

                    @include expect(false) {
                        .test {
                            --mg-text-color: darkcyan;
                            --mg-text-size: 16px;
                            --mg-padding-top: 12px;
                        }
                    }
                }
            }
        }

        @include describe("emit-theme-vars()") {
            @include it("Should return custom theme declarations.") {
                @include assert {
                    @include output(false) {
                        $tokens: (
                            "text-color": darkcyan,
                            "text-size": 16px,
                            "padding": (
                                "top": 12px
                            )
                        );

                        .test {
                            @include mixins.emit-theme-vars(functions.create-theme-vars($tokens, "button"));
                        }
                    }

                    @include expect(false) {
                        .test {
                            --mg-button-text-color: darkcyan;
                            --mg-button-text-size: 16px;
                            --mg-button-padding-top: 12px;
                        }
                    }
                }
            }

            @include it("Should return custom theme declarations without `null` value.") {
                @include assert {
                    @include output(false) {
                        $theme: functions.create-theme-vars((
                            "text-color": darkcyan,
                            "text-size": null
                        ), "button");

                        .test {
                            @include mixins.emit-theme-vars($theme);
                        }
                    }

                    @include expect(false) {
                        .test {
                            --mg-button-text-color: darkcyan;
                        }
                    }
                }
            }
        }

        @include describe("emit-color-scheme()") {
            @include it("Should return the CSS declarations for light color theme.") {
                @include assert {
                    @include output(false) {
                        .test {
                            @include mixins.emit-color-scheme("light") {
                                --mg-button-text-color: darkcyan;
                            }
                        }
                    }

                    @include expect(false) {
                        @media (prefers-color-scheme: light) {
                            .test {
                                --mg-button-text-color: darkcyan;
                            }
                        }
                    }
                }
            }

            @include it("Should return the CSS declarations for dark color theme.") {
                @include assert {
                    @include output(false) {
                        .test {
                            @include mixins.emit-color-scheme("dark") {
                                --mg-button-text-color: darkorange;
                            }
                        }
                    }

                    @include expect(false) {
                        @media (prefers-color-scheme: dark) {
                            .test {
                                --mg-button-text-color: darkorange;
                            }
                        }
                    }
                }
            }
        }
    }
}