@use 'sass:meta';
@use 'sass:list';
@use 'sass:map';

// this is imported so that we have access to the SCSS design tokens
// Used mainly to check if font tokens exist using meta.variable-exists()
@use '@justeat/pie-design-tokens/dist/jet.scss' as *;

@mixin font-theme($token-name) {
    // Define the wide breakpoint to be used in the responsive media query.
    // This should match your design system's 'desktop' or 'large' breakpoint.
    $dt-breakpoint-wide: $breakpoint-md;

    // 1. Define properties that are typically responsive (size, line-height)
    // These will use --narrow/--wide suffixes and calc(* 1px)
    $responsive-properties: (
        'size': 'font-size',
        'line-height': 'line-height',
    );

    // 2. Define properties that are static
    // These use the base suffix only.
    $static-properties: (
        'family': 'font-family',
        'weight': 'font-weight',
        'text-decoration': 'text-decoration',
        'font-style': 'font-style',
    );

    // --- Mobile-First (Narrow) and Static Properties ---

    // Apply Static Properties (font-family, font-weight, text-decoration and font-style)
    @each $suffix, $css-prop in $static-properties {
        // Example variable structure (assuming $token-name is 'font-heading-l'): --dt-font-heading-l-family
        $scss-name: '#{$token-name}-#{$suffix}';
        $var-name: '--dt-#{$token-name}-#{$suffix}';

        @if meta.variable-exists($scss-name) {
            @if $suffix == 'font-style' {
                // if we're setting font-style: italic, we need to add the font-variation-settings for slant
                #{$css-prop}: var(#{$var-name});
                font-variation-settings: 'slnt' -20;
            } @else {
                #{$css-prop}: var(#{$var-name});
            }
        }
    }

    // Setup a list which will be populated only if responsive variables exists
    // This is then used to generate the wide variants of those properties
    $wide-var-names: ();

    // Apply Responsive Properties (font-size, line-height) for the default (Narrow) screen.
    // Priority: 1. --narrow token | 2. Base token
    @each $suffix, $css-prop in $responsive-properties {
        $narrow-var-name: '--dt-#{$token-name}-#{$suffix}--narrow';
        $has-narrow-var-name: meta.variable-exists('#{$token-name}-#{$suffix}--narrow');
        $base-var-name: '--dt-#{$token-name}-#{$suffix}';

        // Check if the variable exists. If not then
        @if $has-narrow-var-name {
            $wide-var-names: list.append($wide-var-names, (css-prop: $css-prop, suffix: $suffix), 'comma');
            #{$css-prop}: calc(var(#{$narrow-var-name}) * 1px);
        } @else {
            #{$css-prop}: calc(var(#{$base-var-name}) * 1px);
        }
    }


    // --- Wide Screen Overrides ---

    // Apply wide-screen overrides inside a media query
    @if $wide-var-names != () {
        @media (min-width: $dt-breakpoint-wide) {
            @each $var-name in $wide-var-names {
                $css-prop: map.get($var-name, css-prop);
                $suffix: map.get($var-name, suffix);
                $wide-var-name: '--dt-#{$token-name}-#{$suffix}--wide';
                #{$css-prop}: calc(var(#{$wide-var-name}) * 1px);
            }
        }
    }
}

@mixin typography-spacing($token-name) {
    $paragraph-scss-name: '#{$token-name}-paragraph';
    $paragraph-var-name: '--dt-#{$token-name}-paragraph';

    @if meta.variable-exists($paragraph-scss-name) {
        margin-block-end: calc(var(#{$paragraph-var-name}) * 1px);
    }
}