// _generator.scss unit tests
@use 'sass:map';
@use '../test_base' as *;

@use '../../src/internal/generator_v2';
@use '../../src/internal/mixins';

@include describe('utility()') {
    @include it('simple variant support') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.utility(
                    $base-class-name: 'text',
                    $class-value-pairs: (
                        'blue': (
                            'color': blue,
                        ),
                    ),
                    $variants: (
                        'dark',
                    ),
                    $override: '!important'
                );
            }
            @include expect($selector: false) {
                .u-text-blue {
                    color: blue !important;
                }

                @media (prefers-color-scheme: dark) {
                    .dark\:u-text-blue {
                        color: blue !important;
                    }
                }
            }
        }
    }
    @include it('test for rules, viewports, and other variants') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.utility(
                    $base-class-name: 'text',
                    $class-value-pairs: (
                        'blue': (
                            'color': blue,
                        ),
                    ),
                    $variants: (
                        'responsive',
                        'dark',
                        'hover',
                        'reduce-motion',
                        'group-hover',
                        'group-focus',
                    ),
                    $override: '!important'
                );
            }
            @include expect($selector: false) {
                .u-text-blue {
                    color: blue !important;
                }

                .hover\:u-text-blue:hover {
                    color: blue !important;
                }

                .group:hover .group-hover\:u-text-blue {
                    color: blue !important;
                }

                .group:focus .group-focus\:u-text-blue {
                    color: blue !important;
                }

                @media screen and (min-width: 640px) {
                    .sm\:u-text-blue {
                        color: blue !important;
                    }

                    .sm\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .group:hover .sm\:group-hover\:u-text-blue {
                        color: blue !important;
                    }

                    .group:focus .sm\:group-focus\:u-text-blue {
                        color: blue !important;
                    }
                }

                @media screen and (min-width: 768px) {
                    .md\:u-text-blue {
                        color: blue !important;
                    }

                    .md\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .group:hover .md\:group-hover\:u-text-blue {
                        color: blue !important;
                    }

                    .group:focus .md\:group-focus\:u-text-blue {
                        color: blue !important;
                    }
                }

                @media screen and (min-width: 1024px) {
                    .lg\:u-text-blue {
                        color: blue !important;
                    }

                    .lg\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .group:hover .lg\:group-hover\:u-text-blue {
                        color: blue !important;
                    }

                    .group:focus .lg\:group-focus\:u-text-blue {
                        color: blue !important;
                    }
                }

                @media screen and (min-width: 1280px) {
                    .xl\:u-text-blue {
                        color: blue !important;
                    }

                    .xl\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .group:hover .xl\:group-hover\:u-text-blue {
                        color: blue !important;
                    }

                    .group:focus .xl\:group-focus\:u-text-blue {
                        color: blue !important;
                    }
                }

                @media (prefers-color-scheme: dark) {
                    .dark\:u-text-blue {
                        color: blue !important;
                    }

                    .dark\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .group:hover .dark\:group-hover\:u-text-blue {
                        color: blue !important;
                    }

                    .group:focus .dark\:group-focus\:u-text-blue {
                        color: blue !important;
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .reduce-motion\:u-text-blue {
                        color: blue !important;
                    }

                    .reduce-motion\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .group:hover .reduce-motion\:group-hover\:u-text-blue {
                        color: blue !important;
                    }

                    .group:focus .reduce-motion\:group-focus\:u-text-blue {
                        color: blue !important;
                    }
                }
            }
        }
    }
    @include it('works with single nested parent') {
        @include assert {
            @include output($selector: false) {
                .fizz {
                    @include generator_v2.utility(
                        $base-class-name: 'text',
                        $class-value-pairs: (
                            'blue': (
                                'color': blue,
                            ),
                        ),
                        $variants: (
                            'dark',
                        ),
                        $override: '!important'
                    );
                }
            }
            @include expect($selector: false) {
                .fizz .u-text-blue {
                    color: blue !important;
                }

                @media (prefers-color-scheme: dark) {
                    .fizz .dark\:u-text-blue {
                        color: blue !important;
                    }
                }
            }
        }
    }

    @include it('works with multiple nested parents and attached classes') {
        @include assert {
            @include output($selector: false) {
                .fizz.zzif {
                    .buzz {
                        @include generator_v2.utility(
                            $base-class-name: 'text',
                            $class-value-pairs: (
                                'blue': (
                                    'color': blue,
                                ),
                            ),
                            $variants: (
                                'dark',
                            ),
                            $override: '!important'
                        );
                    }
                }
            }
            @include expect($selector: false) {
                .fizz.zzif .buzz .u-text-blue {
                    color: blue !important;
                }

                @media (prefers-color-scheme: dark) {
                    .fizz.zzif .buzz .dark\:u-text-blue {
                        color: blue !important;
                    }
                }
            }
        }
    }

    @include it('should generate expected utility classes with variant support for viewports') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.utility(
                    $base-class-name: 'col',
                    $class-value-pairs: (
                        '0': (
                            'width': 0%,
                        ),
                        '1': (
                            'width': 25%,
                        ),
                        '2': (
                            'width': 50%,
                        ),
                        '3': (
                            'width': 75%,
                        ),
                        '4': (
                            'width': 100%,
                        ),
                    ),
                    $variants: ('responsive'),
                    $class-prefix: '',
                    $override: '!important'
                );
            }
            @include expect($selector: false) {
                .col-0 {
                    width: 0% !important;
                }

                .col-1 {
                    width: 25% !important;
                }

                .col-2 {
                    width: 50% !important;
                }

                .col-3 {
                    width: 75% !important;
                }

                .col-4 {
                    width: 100% !important;
                }

                @media screen and (min-width: 640px) {
                    .sm\:col-0 {
                        width: 0% !important;
                    }

                    .sm\:col-1 {
                        width: 25% !important;
                    }

                    .sm\:col-2 {
                        width: 50% !important;
                    }

                    .sm\:col-3 {
                        width: 75% !important;
                    }

                    .sm\:col-4 {
                        width: 100% !important;
                    }
                }

                @media screen and (min-width: 768px) {
                    .md\:col-0 {
                        width: 0% !important;
                    }

                    .md\:col-1 {
                        width: 25% !important;
                    }

                    .md\:col-2 {
                        width: 50% !important;
                    }

                    .md\:col-3 {
                        width: 75% !important;
                    }

                    .md\:col-4 {
                        width: 100% !important;
                    }
                }

                @media screen and (min-width: 1024px) {
                    .lg\:col-0 {
                        width: 0% !important;
                    }

                    .lg\:col-1 {
                        width: 25% !important;
                    }

                    .lg\:col-2 {
                        width: 50% !important;
                    }

                    .lg\:col-3 {
                        width: 75% !important;
                    }

                    .lg\:col-4 {
                        width: 100% !important;
                    }
                }

                @media screen and (min-width: 1280px) {
                    .xl\:col-0 {
                        width: 0% !important;
                    }

                    .xl\:col-1 {
                        width: 25% !important;
                    }

                    .xl\:col-2 {
                        width: 50% !important;
                    }

                    .xl\:col-3 {
                        width: 75% !important;
                    }

                    .xl\:col-4 {
                        width: 100% !important;
                    }
                }
            }
        }
    }

    @include it('works with empty base class name') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.utility(
                    $base-class-name: '',
                    $class-value-pairs: (
                        'blue': (
                            'color': blue,
                        ),
                    ),
                    $override: '!important'
                );
            }
            @include expect($selector: false) {
                .u-blue {
                    color: blue !important;
                }
            }
        }
    }

    @include it('works for all non-group pseudos') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.utility(
                    $base-class-name: 'text',
                    $class-value-pairs: (
                        'blue': (
                            'color': blue,
                        ),
                    ),
                    $variants: (
                        'dark',
                        'light',
                        'reduce-motion',
                        'expand',
                        'first-of-type',
                        'last-of-type',
                        'portrait',
                        'landscape',
                        'hover',
                        'focus',
                        'focus-visible',
                        'focus-within',
                        'active',
                        'checked',
                        'disabled',
                    ),
                    $override: '!important'
                );
            }
            @include expect($selector: false) {
                .u-text-blue {
                    color: blue !important;
                }

                .expand\:u-text-blue:expand {
                    color: blue !important;
                }

                .first-of-type\:u-text-blue:first-of-type {
                    color: blue !important;
                }

                .last-of-type\:u-text-blue:last-of-type {
                    color: blue !important;
                }

                .hover\:u-text-blue:hover {
                    color: blue !important;
                }

                .focus\:u-text-blue:focus {
                    color: blue !important;
                }

                .focus-visible\:u-text-blue:focus-visible {
                    color: blue !important;
                }

                .focus-within\:u-text-blue:focus-within {
                    color: blue !important;
                }

                .active\:u-text-blue:active {
                    color: blue !important;
                }

                .checked\:u-text-blue:checked {
                    color: blue !important;
                }

                .disabled\:u-text-blue:disabled {
                    color: blue !important;
                }

                @media (prefers-color-scheme: dark) {
                    .dark\:u-text-blue {
                        color: blue !important;
                    }

                    .dark\:expand\:u-text-blue:expand {
                        color: blue !important;
                    }

                    .dark\:first-of-type\:u-text-blue:first-of-type {
                        color: blue !important;
                    }

                    .dark\:last-of-type\:u-text-blue:last-of-type {
                        color: blue !important;
                    }

                    .dark\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .dark\:focus\:u-text-blue:focus {
                        color: blue !important;
                    }

                    .dark\:focus-visible\:u-text-blue:focus-visible {
                        color: blue !important;
                    }

                    .dark\:focus-within\:u-text-blue:focus-within {
                        color: blue !important;
                    }

                    .dark\:active\:u-text-blue:active {
                        color: blue !important;
                    }

                    .dark\:checked\:u-text-blue:checked {
                        color: blue !important;
                    }

                    .dark\:disabled\:u-text-blue:disabled {
                        color: blue !important;
                    }
                }

                @media (prefers-color-scheme: light) {
                    .light\:u-text-blue {
                        color: blue !important;
                    }

                    .light\:expand\:u-text-blue:expand {
                        color: blue !important;
                    }

                    .light\:first-of-type\:u-text-blue:first-of-type {
                        color: blue !important;
                    }

                    .light\:last-of-type\:u-text-blue:last-of-type {
                        color: blue !important;
                    }

                    .light\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .light\:focus\:u-text-blue:focus {
                        color: blue !important;
                    }

                    .light\:focus-visible\:u-text-blue:focus-visible {
                        color: blue !important;
                    }

                    .light\:focus-within\:u-text-blue:focus-within {
                        color: blue !important;
                    }

                    .light\:active\:u-text-blue:active {
                        color: blue !important;
                    }

                    .light\:checked\:u-text-blue:checked {
                        color: blue !important;
                    }

                    .light\:disabled\:u-text-blue:disabled {
                        color: blue !important;
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .reduce-motion\:u-text-blue {
                        color: blue !important;
                    }

                    .reduce-motion\:expand\:u-text-blue:expand {
                        color: blue !important;
                    }

                    .reduce-motion\:first-of-type\:u-text-blue:first-of-type {
                        color: blue !important;
                    }

                    .reduce-motion\:last-of-type\:u-text-blue:last-of-type {
                        color: blue !important;
                    }

                    .reduce-motion\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .reduce-motion\:focus\:u-text-blue:focus {
                        color: blue !important;
                    }

                    .reduce-motion\:focus-visible\:u-text-blue:focus-visible {
                        color: blue !important;
                    }

                    .reduce-motion\:focus-within\:u-text-blue:focus-within {
                        color: blue !important;
                    }

                    .reduce-motion\:active\:u-text-blue:active {
                        color: blue !important;
                    }

                    .reduce-motion\:checked\:u-text-blue:checked {
                        color: blue !important;
                    }

                    .reduce-motion\:disabled\:u-text-blue:disabled {
                        color: blue !important;
                    }
                }

                @media (orientation: portrait) {
                    .portrait\:u-text-blue {
                        color: blue !important;
                    }

                    .portrait\:expand\:u-text-blue:expand {
                        color: blue !important;
                    }

                    .portrait\:first-of-type\:u-text-blue:first-of-type {
                        color: blue !important;
                    }

                    .portrait\:last-of-type\:u-text-blue:last-of-type {
                        color: blue !important;
                    }

                    .portrait\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .portrait\:focus\:u-text-blue:focus {
                        color: blue !important;
                    }

                    .portrait\:focus-visible\:u-text-blue:focus-visible {
                        color: blue !important;
                    }

                    .portrait\:focus-within\:u-text-blue:focus-within {
                        color: blue !important;
                    }

                    .portrait\:active\:u-text-blue:active {
                        color: blue !important;
                    }

                    .portrait\:checked\:u-text-blue:checked {
                        color: blue !important;
                    }

                    .portrait\:disabled\:u-text-blue:disabled {
                        color: blue !important;
                    }
                }

                @media (orientation: landscape) {
                    .landscape\:u-text-blue {
                        color: blue !important;
                    }

                    .landscape\:expand\:u-text-blue:expand {
                        color: blue !important;
                    }

                    .landscape\:first-of-type\:u-text-blue:first-of-type {
                        color: blue !important;
                    }

                    .landscape\:last-of-type\:u-text-blue:last-of-type {
                        color: blue !important;
                    }

                    .landscape\:hover\:u-text-blue:hover {
                        color: blue !important;
                    }

                    .landscape\:focus\:u-text-blue:focus {
                        color: blue !important;
                    }

                    .landscape\:focus-visible\:u-text-blue:focus-visible {
                        color: blue !important;
                    }

                    .landscape\:focus-within\:u-text-blue:focus-within {
                        color: blue !important;
                    }

                    .landscape\:active\:u-text-blue:active {
                        color: blue !important;
                    }

                    .landscape\:checked\:u-text-blue:checked {
                        color: blue !important;
                    }

                    .landscape\:disabled\:u-text-blue:disabled {
                        color: blue !important;
                    }
                }
            }
        }
    }
}

@include describe('get-base-class()') {
    @include it('basic test') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.get-base-class(
                        $config: (
                            'delimiter': '-',
                            'variant-delimiter': '\\:',
                        ),
                        $context: (
                            // Note that prefix is inserted in the parent mixin
                            base-class-name: 'text-blue',
                            variant: 'hover',
                            pseudo: 'hover',
                        )
                    )
                    using ($props...) {
                    color: blue;
                }
            }
            @include expect($selector: false) {
                .hover\:text-blue:hover {
                    color: blue;
                }
            }
        }
    }
}

@include describe('utility-with-body()') {
    @include it('basic test') {
        @include assert {
            @include output($selector: false) {
                @include generator_v2.utility-with-body(
                        $variants: (
                            'responsive',
                            'dark',
                            'hover',
                            'reduce-motion',
                            'group-hover',
                            'group-focus',
                        ),
                        $override: '!important'
                    )
                    using ($props...) {
                        @include generator_v2.inline-class-generator('foo', $props...) using ($config) {
                            color: #fff #{map.get($config, override)};
                        }
                    }
            }
            @include expect($selector: false) {
                .foo {
                    color: #fff !important;
                }

                .hover\:foo:hover {
                    color: #fff !important;
                }

                .group:hover .group-hover\:foo {
                    color: #fff !important;
                }

                .group:focus .group-focus\:foo {
                    color: #fff !important;
                }

                @media screen and (min-width: 640px) {
                    .sm\:foo {
                        color: #fff !important;
                    }

                    .sm\:hover\:foo:hover {
                        color: #fff !important;
                    }

                    .group:hover .sm\:group-hover\:foo {
                        color: #fff !important;
                    }

                    .group:focus .sm\:group-focus\:foo {
                        color: #fff !important;
                    }
                }

                @media screen and (min-width: 768px) {
                    .md\:foo {
                        color: #fff !important;
                    }

                    .md\:hover\:foo:hover {
                        color: #fff !important;
                    }

                    .group:hover .md\:group-hover\:foo {
                        color: #fff !important;
                    }

                    .group:focus .md\:group-focus\:foo {
                        color: #fff !important;
                    }
                }

                @media screen and (min-width: 1024px) {
                    .lg\:foo {
                        color: #fff !important;
                    }

                    .lg\:hover\:foo:hover {
                        color: #fff !important;
                    }

                    .group:hover .lg\:group-hover\:foo {
                        color: #fff !important;
                    }

                    .group:focus .lg\:group-focus\:foo {
                        color: #fff !important;
                    }
                }

                @media screen and (min-width: 1280px) {
                    .xl\:foo {
                        color: #fff !important;
                    }

                    .xl\:hover\:foo:hover {
                        color: #fff !important;
                    }

                    .group:hover .xl\:group-hover\:foo {
                        color: #fff !important;
                    }

                    .group:focus .xl\:group-focus\:foo {
                        color: #fff !important;
                    }
                }

                @media (prefers-color-scheme: dark) {
                    .dark\:foo {
                        color: #fff !important;
                    }

                    .dark\:hover\:foo:hover {
                        color: #fff !important;
                    }

                    .group:hover .dark\:group-hover\:foo {
                        color: #fff !important;
                    }

                    .group:focus .dark\:group-focus\:foo {
                        color: #fff !important;
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .reduce-motion\:foo {
                        color: #fff !important;
                    }

                    .reduce-motion\:hover\:foo:hover {
                        color: #fff !important;
                    }

                    .group:hover .reduce-motion\:group-hover\:foo {
                        color: #fff !important;
                    }

                    .group:focus .reduce-motion\:group-focus\:foo {
                        color: #fff !important;
                    }
                }
            }
        }
    }
}

// @include describe('utility-with-body()') {
//     @include it('should generate expected utility classes with variant support') {
//         @include assert {
//             @include output {
//                 @include generator_v2.utility-with-body(
//                         $variants: (
//                             'hover',
//                             'dark',
//                             'reduce-motion',
//                         ),
//                         $generate-viewports: 'true',
//                         $override: '!important'
//                     )
//                     using
//                     (
//                         $viewport-str,
//                         $variant-prefix,
//                         $prefix,
//                         $common-class,
//                         $delimiter,
//                         $key,
//                         $variant-suffix,
//                         $override
//                     ) {
//                     $colors: red, white;
//                     @each $color in $colors {
//                         .#{$viewport-str}#{$variant-prefix}#{$prefix}#{$color}#{$variant-suffix} {
//                             color: #{$color} #{$override};
//                         }
//                     }
//                 }
//             }
//             @include expect {
//                 .u-red {
//                     color: red !important;
//                 }

//                 .u-white {
//                     color: white !important;
//                 }

//                 .hover\:u-red:hover {
//                     color: red !important;
//                 }

//                 .hover\:u-white:hover {
//                     color: white !important;
//                 }

//                 @media (prefers-color-scheme: dark) {
//                     .dark\:u-red {
//                         color: red !important;
//                     }

//                     .dark\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media (prefers-reduced-motion: reduce) {
//                     .reduce-motion\:u-red {
//                         color: red !important;
//                     }

//                     .reduce-motion\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 640px) {
//                     .sm\:u-red {
//                         color: red !important;
//                     }

//                     .sm\:u-white {
//                         color: white !important;
//                     }

//                     .sm\:hover\:u-red:hover {
//                         color: red !important;
//                     }

//                     .sm\:hover\:u-white:hover {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
//                     .sm\:dark\:u-red {
//                         color: red !important;
//                     }

//                     .sm\:dark\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 640px) and (prefers-reduced-motion: reduce) {
//                     .sm\:reduce-motion\:u-red {
//                         color: red !important;
//                     }

//                     .sm\:reduce-motion\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 768px) {
//                     .md\:u-red {
//                         color: red !important;
//                     }

//                     .md\:u-white {
//                         color: white !important;
//                     }

//                     .md\:hover\:u-red:hover {
//                         color: red !important;
//                     }

//                     .md\:hover\:u-white:hover {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
//                     .md\:dark\:u-red {
//                         color: red !important;
//                     }

//                     .md\:dark\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
//                     .md\:reduce-motion\:u-red {
//                         color: red !important;
//                     }

//                     .md\:reduce-motion\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 1024px) {
//                     .lg\:u-red {
//                         color: red !important;
//                     }

//                     .lg\:u-white {
//                         color: white !important;
//                     }

//                     .lg\:hover\:u-red:hover {
//                         color: red !important;
//                     }

//                     .lg\:hover\:u-white:hover {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 1024px) and (prefers-color-scheme: dark) {
//                     .lg\:dark\:u-red {
//                         color: red !important;
//                     }

//                     .lg\:dark\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
//                     .lg\:reduce-motion\:u-red {
//                         color: red !important;
//                     }

//                     .lg\:reduce-motion\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 1280px) {
//                     .xl\:u-red {
//                         color: red !important;
//                     }

//                     .xl\:u-white {
//                         color: white !important;
//                     }

//                     .xl\:hover\:u-red:hover {
//                         color: red !important;
//                     }

//                     .xl\:hover\:u-white:hover {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 1280px) and (prefers-color-scheme: dark) {
//                     .xl\:dark\:u-red {
//                         color: red !important;
//                     }

//                     .xl\:dark\:u-white {
//                         color: white !important;
//                     }
//                 }

//                 @media screen and (min-width: 1280px) and (prefers-reduced-motion: reduce) {
//                     .xl\:reduce-motion\:u-red {
//                         color: red !important;
//                     }

//                     .xl\:reduce-motion\:u-white {
//                         color: white !important;
//                     }
//                 }
//             }
//         }
//     }
// }