@use '@finastra/fds-theme/typography' as fds;
@use '@finastra/fds-theme/typography/variables' as fds-variables;
@use 'sass:map';
@use '@angular/material' as mat;

$typography-config: mat.m2-define-typography-config(
  $font-family: fds-variables.$font-family,
  $headline-1:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'headline-1', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'headline-1', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'headline-1', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'headline-1', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'headline-1', 'letter-spacing')
    ),
  $headline-2:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'headline-2', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'headline-2', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'headline-2', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'headline-2', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'headline-2', 'letter-spacing')
    ),
  $headline-3:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'headline-3', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'headline-3', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'headline-3', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'headline-3', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'headline-3', 'letter-spacing')
    ),
  $headline-4:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'headline-4', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'headline-4', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'headline-4', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'headline-4', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'headline-4', 'letter-spacing')
    ),
  $headline-5:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'headline-5', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'headline-5', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'headline-5', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'headline-5', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'headline-5', 'letter-spacing')
    ),
  $headline-6:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'headline-6', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'headline-6', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'headline-6', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'headline-6', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'headline-6', 'letter-spacing')
    ),
  $subtitle-1:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'subtitle-1', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'subtitle-1', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'subtitle-1', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'subtitle-1', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'subtitle-1', 'letter-spacing')
    ),
  $subtitle-2:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'subtitle-2', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'subtitle-2', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'subtitle-2', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'subtitle-2', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'subtitle-2', 'letter-spacing')
    ),
  $body-1:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'body-1', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'body-1', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'body-1', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'body-1', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'body-1', 'letter-spacing')
    ),
  $body-2:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'body-2', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'body-2', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'body-2', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'body-2', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'body-2', 'letter-spacing')
    ),
  $caption:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'caption', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'caption', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'caption', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'caption', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'caption', 'letter-spacing')
    ),
  $button:
    mat.m2-define-typography-level(
      $font-family: map.get(fds-variables.$properties, 'button-1', 'font-family'),
      $font-size: map.get(fds-variables.$properties, 'button-1', 'font-size'),
      $font-weight: map.get(fds-variables.$properties, 'button-1', 'font-weight'),
      $line-height: map.get(fds-variables.$properties, 'button-1', 'line-height'),
      $letter-spacing: map.get(fds-variables.$properties, 'button-1', 'letter-spacing')
    )
);
@include mat.typography-hierarchy($typography-config);

@mixin uxg-base-typography($selector: '.uxg-typography') {
  .uxg-h1,
  #{$selector} h1 {
    @include fds.typography(headline-1);

    margin: 0 0 16px;
  }

  .uxg-h2,
  #{$selector} h2 {
    @include fds.typography(headline-2);

    margin: 0 0 16px;
  }

  .uxg-h3,
  #{$selector} h3 {
    @include fds.typography(headline-3);

    margin: 0 0 16px;
  }

  .uxg-h4,
  #{$selector} h4 {
    @include fds.typography(headline-4);

    margin: 0 0 16px;
  }

  .uxg-h5,
  #{$selector} h5 {
    @include fds.typography(headline-5);

    margin: 0 0 16px;
  }

  .uxg-h6,
  #{$selector} h6 {
    @include fds.typography(headline-6);

    margin: 0 0 16px;
  }

  .uxg-subtitle-1 {
    @include fds.typography(subtitle-1);
  }

  .uxg-subtitle-2 {
    @include fds.typography(subtitle-2);
  }

  .uxg-subtitle-3 {
    @include fds.typography(subtitle-3);
  }

  .uxg-body-1 {
    @include fds.typography(body-1);
  }

  .uxg-body-2 {
    @include fds.typography(body-2);
  }

  .uxg-body-3 {
    @include fds.typography(body-3);
  }

  .uxg-caption {
    @include fds.typography(caption);
  }

  .uxg-overline {
    @include fds.typography(overline);
  }

  // DEPRECATED (ng15)
  // only used for backwards compatibility

  .uxg-display-1 {
    font-size: 72px;
    line-height: 108px;
    font-weight: 300;
    font-family: map.get(fds-variables.$properties, 'body-1', 'font-family');
  }

  .uxg-display-2 {
    font-size: 60px;
    line-height: 90px;
    font-weight: 300;
    font-family: map.get(fds-variables.$properties, 'body-1', 'font-family');
  }

  .uxg-display-3 {
    font-size: 48px;
    line-height: 72px;
    font-weight: 300;
    font-family: map.get(fds-variables.$properties, 'body-1', 'font-family');
  }

  .uxg-display-4 {
    font-size: 44px;
    line-height: 66px;
    font-weight: 300;
    font-family: map.get(fds-variables.$properties, 'body-1', 'font-family');
  }

  .uxg-display-5 {
    font-size: 28px;
    line-height: 42px;
    font-weight: 300;
    font-family: map.get(fds-variables.$properties, 'body-1', 'font-family');
  }

  .uxg-display-6 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    font-family: map.get(fds-variables.$properties, 'body-1', 'font-family');
  }
}