@use 'sass:map';
@use 'sass:math';
@use 'units';

@function define-typography-level(
  $font-size,
  $line-height,
  $font-weight: 400,
  $font-family: null,
  $letter-spacing: normal
) {
  @if type-of($letter-spacing) == number {
    $letter-spacing: math.div($letter-spacing, units.strip-unit($font-size) * 16) * 1em;
  }

  @return (
    font-family: $font-family,
    font-weight: $font-weight,
    font-size: $font-size,
    line-height: $line-height,
    letter-spacing: $letter-spacing
  );
}

@function define-typography-config(
  $font-family: null,
  $headline-1: null,
  $headline-2: null,
  $headline-3: null,
  $headline-4: null,
  $headline-5: null,
  $headline-6: null,
  $subtitle-1: null,
  $subtitle-2: null,
  $body-1: null,
  $body-2: null,
  $caption: null,
  $button: null,
  $overline: null
) {
  $headline-family: $font-family or 'Bungee', 'Helvetica Neue', sans-serif;
  $body-family: $font-family or 'Rubik', 'Helvetica Neue', sans-serif;

  $config: (
    headline-1: $headline-1 or define-typography-level(6rem, 6rem, 300, $headline-family),
    headline-2: $headline-2 or define-typography-level(3.75rem, 3.75rem, 300, $headline-family),
    headline-3: $headline-3 or define-typography-level(3rem, 3.125rem, 400, $headline-family),
    headline-4: $headline-4 or define-typography-level(2.125rem, 2.5rem, 400, $headline-family),
    headline-5: $headline-5 or define-typography-level(1.5rem, 2rem, 400, $headline-family),
    headline-6: $headline-6 or define-typography-level(1.25rem, 2rem, 500, $headline-family),
    subtitle-1: $subtitle-1 or define-typography-level(1rem, 1.75rem, 400, $body-family),
    subtitle-2: $subtitle-2 or define-typography-level(0.875rem, 1.375rem, 500, $body-family),
    body-1: $body-1 or define-typography-level(1rem, 1.5rem, 400, $body-family),
    body-2: $body-2 or define-typography-level(0.875rem, 1.25rem, 400, $body-family),
    caption: $caption or define-typography-level(0.75rem, 1.25rem, 400, $body-family),
    button: $button or define-typography-level(0.875rem, 2.25rem, 500, $body-family),
    overline: $overline or define-typography-level(0.75rem, 2rem, 500, $body-family) // Default was .8 for both
  );

  @each $key, $level in $config {
    @if map.get($level, font-family) == null {
      $new-level: map.merge(
        $level,
        (
          font-family: $font-family
        )
      );

      $config: map.merge(
        $config,
        (
          $key: $new-level
        )
      );
    }
  }

  @return $config;
}

@mixin typography-level($typography) {
  font-family: var(--font-#{$typography}-family);
  font-size: var(--font-#{$typography}-size);
  font-weight: var(--font-#{$typography}-weight);
  line-height: var(--font-#{$typography}-line-height);
  letter-spacing: var(--font-#{$typography}-letter-spacing);
}

@mixin create-typography-variables($theme) {
  $typography: map.get($theme, typography);

  @each $name, $values in $typography {
    --font-#{$name}-family: #{map.get($values, font-family)};
    --font-#{$name}-size: #{map.get($values, font-size)};
    --font-#{$name}-weight: #{map.get($values, font-weight)};
    --font-#{$name}-line-height: #{map.get($values, line-height)};
    --font-#{$name}-letter-spacing: #{map.get($values, letter-spacing)};
  }
}