/**
 * @file _flex-grid-system.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * @@VERSION@@
 * @brief Styles für die Flex-Grid-System.
 *
 * Diese Datei enthält die CSS-Regeln, um die Flex funktionalität mit Klassen zu steuern
 */

@use "sass:map";
@use '../utilities/maps';

// ============================================
// I. VARIABLEN & KONFIGURATION
// ============================================
$prefix: 'kern-';

$gaps: (
    none: var(--kern-metric-space-none),
    xxs: var(--kern-metric-space-2x-small),
    xs: var(--kern-metric-space-x-small),
    sm: var(--kern-metric-space-small),
    md: var(--kern-metric-space-default),
    lg: var(--kern-metric-space-large),
    xl: var(--kern-metric-space-x-large),
);

$breakpoints: (
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1600px
);

// Geteilte Maps für Flex/Grid (Justify, Align)
$layout-justification: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
    // stretch: stretch wurde entfernt, da ungültig für justify-content
);

$layout-alignments: (
    start: flex-start,
    end: flex-end,
    center: center,
    stretch: stretch,
    baseline: baseline,
);

$flex-directions: (
    row: row,
    col: column,
    row-reverse: row-reverse,
    col-reverse: column-reverse,
);

$flex-wrap-options: (
    wrap: wrap,
    nowrap: nowrap,
    wrap-reverse: wrap-reverse,
);

// MAXIMALE DEFINITIONEN FÜR GRID-TEMPLATES
$max-grid-cols: 12;
$max-grid-rows: 6;

// AUTO-GRÖSSEN FÜR GRID
$grid-auto-sizes: (
    auto: auto,
    min: min-content,
    max: max-content,
    fr: minmax(0, 1fr)
);

// Display Utilities
$display-types: (
    block: block,
    inline-block: inline-block,
    inline: inline,
    hidden: none,
);

// Overflow Utilities
$overflow-types: (
    auto: auto,
    hidden: hidden,
    visible: visible,
    scroll: scroll,
);

// ============================================
// II. MIXINS
// ============================================

// Mixin für Media Queries (Mobile First)
@mixin respond-to($breakpoint) {
    @if map.has-key($breakpoints, $breakpoint) {
        @media (min-width: map.get($breakpoints, $breakpoint)) {
            @content;
        }
    }
}

/**
  * Generiert ALLE Container-Eigenschaften (Flex, Grid, Gap, Justify, Align-Items).
  * Schema: kern-[Eigenschaft]-[Wert][-[BP]]
  */
@mixin generate-container-classes($suffix: '') {

    // Display
    .#{$prefix}flex#{$suffix} {
        display: flex;
    }

    .#{$prefix}inline-flex#{$suffix} {
        display: inline-flex;
    }

    .#{$prefix}grid#{$suffix} {
        display: grid;
        grid-template-columns: repeat(#{$max-grid-cols}, minmax(0, 1fr)); // Default $max-grid-cols = 12
        // gap: map.get($gaps, lg);
    }

    .#{$prefix}inline-grid#{$suffix} {
        display: inline-grid;
    }

    // Additional Display Types
    @each $key, $value in $display-types {
        .#{$prefix}#{$key}#{$suffix} {
            display: $value;
        }
    }

    // Flex Direction & Wrap
    @each $key, $value in $flex-directions {
        .#{$prefix}flex-#{$key}#{$suffix} {
            flex-direction: $value;
        }
    }

    @each $key, $value in $flex-wrap-options {
        .#{$prefix}flex-#{$key}#{$suffix} {
            flex-wrap: $value;
        }
    }

    // Flex Order
    @for $i from 0 through 12 {
        .#{$prefix}order-#{$i}#{$suffix} {
            order: $i;
        }
    }

    .#{$prefix}order-first#{$suffix} {
        order: -9999;
    }

    .#{$prefix}order-last#{$suffix} {
        order: 9999;
    }

    // Geteilte Alignment (Justify, Items, Content)
    @each $key, $value in $layout-justification {
        .#{$prefix}justify-content-#{$key}#{$suffix} {
            justify-content: $value;
        }

        .#{$prefix}align-content-#{$key}#{$suffix} {
            align-content: $value;
        }
    }

    @each $key, $value in $layout-alignments {
        .#{$prefix}align-items-#{$key}#{$suffix} {
            align-items: $value;
        }
    }

    // Justify Items (für Grid)
    @each $key, $value in $layout-alignments {
        .#{$prefix}justify-items-#{$key}#{$suffix} {
            justify-items: $value;
        }
    }

    // Place Items & Place Content (Shorthand für Grid)
    @each $key, $value in $layout-alignments {
        .#{$prefix}place-items-#{$key}#{$suffix} {
            place-items: $value;
        }
    }

    @each $key, $value in $layout-justification {
        .#{$prefix}place-content-#{$key}#{$suffix} {
            place-content: $value;
        }
    }

    // Grid Templates
    @for $i from 1 through $max-grid-cols {
        .#{$prefix}grid-cols-#{$i}#{$suffix} {
            grid-template-columns: repeat($i, minmax(0, 1fr));
        }
    }

    @for $i from 1 through $max-grid-rows {
        .#{$prefix}grid-rows-#{$i}#{$suffix} {
            grid-template-rows: repeat($i, minmax(0, 1fr));
        }
    }

    .#{$prefix}grid-cols-none#{$suffix} {
        grid-template-columns: none;
    }

    .#{$prefix}grid-rows-none#{$suffix} {
        grid-template-rows: none;
    }

    // Grid Auto Flow & Auto Tracks
    .#{$prefix}grid-flow-row#{$suffix} {
        grid-auto-flow: row;
    }

    .#{$prefix}grid-flow-col#{$suffix} {
        grid-auto-flow: column;
    }

    .#{$prefix}grid-flow-dense#{$suffix} {
        grid-auto-flow: dense;
    }

    .#{$prefix}grid-flow-row-dense#{$suffix} {
        grid-auto-flow: row dense;
    }

    .#{$prefix}grid-flow-col-dense#{$suffix} {
        grid-auto-flow: column dense;
    }

    // Grid Auto Columns & Rows
    @each $name, $value in $grid-auto-sizes {
        .#{$prefix}auto-cols-#{$name}#{$suffix} {
            grid-auto-columns: #{$value};
        }

        .#{$prefix}auto-rows-#{$name}#{$suffix} {
            grid-auto-rows: #{$value};
        }
    }

    // Geteilte Gaps
    @each $name, $value in $gaps {
        .#{$prefix}gap-#{$name}#{$suffix} {
            gap: #{$value};
        }

        .#{$prefix}gap-x-#{$name}#{$suffix} {
            column-gap: #{$value};
        }

        .#{$prefix}gap-y-#{$name}#{$suffix} {
            row-gap: #{$value};
        }
    }

    // Overflow Utilities
    @each $key, $value in $overflow-types {
        .#{$prefix}overflow-#{$key}#{$suffix} {
            overflow: $value;
        }

        .#{$prefix}overflow-x-#{$key}#{$suffix} {
            overflow-x: $value;
        }

        .#{$prefix}overflow-y-#{$key}#{$suffix} {
            overflow-y: $value;
        }
    }
}

/**
  * Generiert ALLE Item-Eigenschaften (Col/Row Span/Start, Flex Grow/Shrink, Align Self).
  * Schema: kern-[Eigenschaft]-[Wert][-[BP]]
  */
@mixin generate-item-classes($suffix: '') {

    // Grid Col Span/Start/End
    @for $i from 1 through $max-grid-cols {
        .#{$prefix}col-#{$i}#{$suffix} {
            grid-column: auto / span $i;
        }
    }

    @for $i from 1 through ($max-grid-cols + 1) {
        .#{$prefix}col-start-#{$i}#{$suffix} {
            grid-column-start: $i;
        }

        .#{$prefix}col-end-#{$i}#{$suffix} {
            grid-column-end: $i;
        }
    }

    // Grid Col Special Values
    .#{$prefix}col-full#{$suffix} {
        grid-column: 1 / -1;
    }

    .#{$prefix}col-auto#{$suffix} {
        grid-column: auto;
    }

    .#{$prefix}col-start-auto#{$suffix} {
        grid-column-start: auto;
    }

    .#{$prefix}col-end-auto#{$suffix} {
        grid-column-end: auto;
    }

    // Grid Row Span/Start/End
    @for $i from 1 through $max-grid-rows {
        .#{$prefix}row-#{$i}#{$suffix} {
            grid-row: auto / span $i;
        }
    }

    @for $i from 1 through ($max-grid-rows + 1) {
        .#{$prefix}row-start-#{$i}#{$suffix} {
            grid-row-start: $i;
        }

        .#{$prefix}row-end-#{$i}#{$suffix} {
            grid-row-end: $i;
        }
    }

    // Grid Row Special Values
    .#{$prefix}row-full#{$suffix} {
        grid-row: 1 / -1;
    }

    .#{$prefix}row-auto#{$suffix} {
        grid-row: auto;
    }

    .#{$prefix}row-start-auto#{$suffix} {
        grid-row-start: auto;
    }

    .#{$prefix}row-end-auto#{$suffix} {
        grid-row-end: auto;
    }

    // 3. Flex Item Properties (Erweitert)
    .#{$prefix}flex-1#{$suffix} {
        flex: 1 1 0%;
    }

    .#{$prefix}flex-auto#{$suffix} {
        flex: 1 1 auto;
    }

    .#{$prefix}flex-initial#{$suffix} {
        flex: 0 1 auto;
    }

    .#{$prefix}flex-none#{$suffix} {
        flex: none;
    }

    @for $i from 0 through $max-grid-cols {
        .#{$prefix}flex-grow-#{$i}#{$suffix} {
            flex-grow: $i;
        }
    }

    .#{$prefix}flex-grow#{$suffix} {
        flex-grow: 1;
    }

    .#{$prefix}flex-grow-0#{$suffix} {
        flex-grow: 0;
    }

    .#{$prefix}flex-shrink#{$suffix} {
        flex-shrink: 1;
    }

    .#{$prefix}flex-shrink-0#{$suffix} {
        flex-shrink: 0;
    }

    // Flex Basis
    .#{$prefix}basis-auto#{$suffix} {
        flex-basis: auto;
    }

    .#{$prefix}basis-0#{$suffix} {
        flex-basis: 0;
    }

    .#{$prefix}basis-full#{$suffix} {
        flex-basis: 100%;
    }

    .#{$prefix}basis-1-2#{$suffix} {
        flex-basis: 50%;
    }

    .#{$prefix}basis-1-3#{$suffix} {
        flex-basis: 33.333333%;
    }

    .#{$prefix}basis-2-3#{$suffix} {
        flex-basis: 66.666667%;
    }

    .#{$prefix}basis-1-4#{$suffix} {
        flex-basis: 25%;
    }

    .#{$prefix}basis-3-4#{$suffix} {
        flex-basis: 75%;
    }

    // // Optional für Flexbox-Spalten um die Prozentwerte erweitern
    // @for $i from 1 through $max-grid-cols {
    //   .#{$prefix}flex-col-#{$i}#{$suffix} { 
    //     flex: 0 0 calc(100% / #{$max-grid-cols} * #{$i}); 
    //   }
    // }

    // 4. Align Self
    @each $key, $value in $layout-alignments {
        .#{$prefix}align-self-#{$key}#{$suffix} {
            align-self: $value;
        }
    }

    .#{$prefix}align-self-auto#{$suffix} {
        align-self: auto;
    }

    // Justify Self (für Grid)
    @each $key, $value in $layout-alignments {
        .#{$prefix}justify-self-#{$key}#{$suffix} {
            justify-self: $value;
        }
    }

    .#{$prefix}justify-self-auto#{$suffix} {
        justify-self: auto;
    }

    // Place Self (Shorthand für Grid)
    @each $key, $value in $layout-alignments {
        .#{$prefix}place-self-#{$key}#{$suffix} {
            place-self: $value;
        }
    }

    .#{$prefix}place-self-auto#{$suffix} {
        place-self: auto;
    }
}

/**
  * Generiert zusätzliche Utility-Klassen
  */
@mixin generate-utility-classes($suffix: '') {

    // Aspect Ratio (moderne Browser)
    .#{$prefix}aspect-square#{$suffix} {
        aspect-ratio: 1 / 1;
    }

    .#{$prefix}aspect-video#{$suffix} {
        aspect-ratio: 16 / 9;
    }

    .#{$prefix}aspect-auto#{$suffix} {
        aspect-ratio: auto;
    }

    // Min/Max Width
    .#{$prefix}min-w-0#{$suffix} {
        min-width: 0;
    }

    .#{$prefix}min-w-full#{$suffix} {
        min-width: 100%;
    }

    .#{$prefix}max-w-full#{$suffix} {
        max-width: 100%;
    }

    .#{$prefix}max-w-none#{$suffix} {
        max-width: none;
    }

    // Min/Max Height
    .#{$prefix}min-h-0#{$suffix} {
        min-height: 0;
    }

    .#{$prefix}min-h-full#{$suffix} {
        min-height: 100%;
    }

    .#{$prefix}min-h-screen#{$suffix} {
        min-height: 100vh;
    }

    .#{$prefix}max-h-full#{$suffix} {
        max-height: 100%;
    }

    .#{$prefix}max-h-screen#{$suffix} {
        max-height: 100vh;
    }

    // Width & Height
    .#{$prefix}w-full#{$suffix} {
        width: 100%;
    }

    .#{$prefix}w-auto#{$suffix} {
        width: auto;
    }

    .#{$prefix}w-screen#{$suffix} {
        width: 100vw;
    }

    .#{$prefix}h-full#{$suffix} {
        height: 100%;
    }

    .#{$prefix}h-auto#{$suffix} {
        height: auto;
    }

    .#{$prefix}h-screen#{$suffix} {
        height: 100vh;
    }
}

// Defaukt Stack
.kern-stack {
    display: flex;
    flex-direction: column;
    gap: map.get(maps.$spaces, md);
}

@mixin generate-stack-classes($suffix: '') {
    @each $name, $value in maps.$spaces {
        @if $name {
            .#{$prefix}stack-#{$name}#{$suffix} {
                display: flex;
                flex-direction: column;
                gap: $value;
            }
        }
    }
}

// ============================================
// III. GENERIERUNG (MOBILE FIRST)
// ============================================

// 1. Mobile First Basis-Klassen (Suffix: '')
@include generate-container-classes('');
@include generate-item-classes('');
@include generate-utility-classes('');
@include generate-stack-classes('');

// 2. Responsive Klassen (Suffix: -sm, -md, etc.)
@each $key, $value in $breakpoints {
    @include respond-to($key) {
        @include generate-container-classes('-#{$key}');
        @include generate-item-classes('-#{$key}');
        @include generate-utility-classes('-#{$key}');
        @include generate-stack-classes('-#{$key}');
    }
}

// Fixes for old grid
.kern-container-fluid,
.kern-container {
    &:has(.kern-grid) {
        padding: 0;
    }
}