@use 'sass:string';
@use 'sass:meta';
@use 'sass:list';
@use 'sass:map';
@use '../config' as *;

$breakpointMap: (
    'xs': 4,
    'sm': 4,
    'md': 6,
    'lg': 8
);

$alignments: (
    'items-center': center,
    'items-start': flex-start,
    'items-end': flex-end,
    'items-baseline': baseline,
    'items-stretch': stretch,

    'justify-center': center,
    'justify-start': flex-start,
    'justify-end': flex-end,
    'justify-between': space-between,
    'justify-around': space-around,
    'justify-evenly': space-evenly,
    'justify-stretch': stretch  
);

@mixin utility() {
    .container {
        @include spacing(auto-none, px-default);
        max-width: 1200px;
    }

    .muted {
        @include typography(primary-20, md, hmd);
    }

    // Gaps
    .flex, .grid {
        @each $key, $value in $spacing {
            $numberList: ('2', '3', '4', '5');
            $firstLetter: string.slice($key, 1, 1);
            $class: $key;
            
            @if (list.index($numberList, $firstLetter)) {
              $class: string.slice($key, 2, -1) + $firstLetter;
            }

            &.#{$class} { gap: $value; }      

            @each $key, $v in $breakpoints {
                @include media($key) {
                    &.#{$key}-#{$class} { gap: $value; }   
                }
            }
        }
    }

    // Alignments
    @each $key, $value in $alignments {
        .#{$key} {
            @if (string.index($key, 'items')) {
                align-items: $value;
            } @else {
                justify-content: $value;
            } 
        }
    }

    .flex.center,
    .grid.center {
        justify-content: center;
        align-items: center;
    }

    @each $key, $value in $breakpoints {
        @include media($key) {
            @each $alignmentKey, $alignmentValue in $alignments {
                .#{$key}-#{$alignmentKey} {
                    @if (string.index($alignmentKey, 'items')) {
                        align-items: $alignmentValue;
                    } @else {
                        justify-content: $alignmentValue;
                    } 
                }
            }

            .flex.#{$key}-center,
            .grid.#{$key}-center {
                justify-content: center;
                align-items: center;
            }
        }
    }

    // Flex directions & wraps
    .flex {
        @include layout(flex, default);

        @each $direction in $flexDirectionValues {
            &.#{$direction} {
                flex-direction: $direction;
            }
        }

        @each $wrap in $flexWrapValues {
            &.#{$wrap} {
                flex-wrap: $wrap;
            }
        }
    }

    @each $key, $value in $breakpoints {
        @include media($key) {
            .flex {
                @each $direction in $flexDirectionValues {
                    &.#{$key}-#{$direction} {
                        flex-direction: $direction;
                    }
                }

                @each $wrap in $flexWrapValues {
                    &.#{$key}-#{$wrap} {
                        flex-wrap: $wrap;
                    }
                }
            }
        }
    }

    // Grid columns
    .grid {
        @include layout(grid, default);

        grid-template-columns: minmax(0, 1fr);

        &.col-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        &.col-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @each $key, $value in $breakpoints {
        @include media($key) {
            @for $i from 2 to map.get($breakpointMap, $key) + 1 {
                .grid.#{$key}-#{$i} {
                    grid-template-columns: repeat($i, minmax(0, 1fr));
                }
            }
        }
    }
}