@use 'sass:map';

@use "@wfp/themes-core/dist/scss/tokensMapDeep" as *;
@use "@wfp/themes-core/dist/scss/tokens" as tokens;
@use "./breakpoint" as *;

@mixin reset() {
}

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map.get($map, $key);
  }
  @return $map;
}

$code-font-family: var(--code-font-family);
//$font-family-primary: var(--font-family-primary);

@mixin font-family($family) {
  @if $family == "code" {
    /* font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
      'Courier New', monospace;*/
    font-family: tokens.$font-family-monospace;
  } @else {
    font-family: tokens.$font-family-primary;
    //font-family: 'Open Sans', Arial, sans-serif;
  }
}

@mixin type-style($style) {
  $maped: map-deep-get($tokens, "typography", $style);

  //@warn 'This is  a step of the WFP Type Scale!', $maped;
  @if map-deep-get($tokens, "typography", $style) {
    $typographyMap: map.get($tokens, "typography", $style);
    font-size: map.get($typographyMap, "fontSize");
    font-weight: map.get($typographyMap, "fontWeight");
    letter-spacing: map.get($typographyMap, "letterSpacing");
    text-transform: map.get($typographyMap, "textTransform");

    @if map-deep-get($tokens, "typography", $style, "md") {
      @include breakpoint-up("md") {
        $typographyMapMd: map.get($tokens, "typography", $style, "md");
        font-weight: map.get($typographyMapMd, "fontWeight");
        letter-spacing: map.get($typographyMapMd, "letterSpacing");
        text-transform: map.get($typographyMapMd, "textTransform");
      }
    }
  }
  /*@if map-has-key($typographyMap, 'body-short-02',$style) {
      @warn 'This is  a step of the WFP Type Scale!';
      $elements: map-get($tokens, $style);
      font-family: map-get($elements, 'fontFamily');
      font-size: map-get($elements, 'fontSize');
    } @else {
      //@warn 'This is  a step of the WFP Type Scale!';
      //@warn 'This is not a step of the WFP Type Scale!' + $style;
    }
  } @else {
    @warn 'No typography step found!';
  }*/
}

// TODO: Temporary type scale
$typescale-map: (
  "giga": 4.625rem,
  "mega": 3.625rem,
  "alpha": 2.25rem,
  "beta": 1.75rem,
  "omicron": 1.5625rem,
  "sigma": 1.375rem,
  "gamma": 1.25rem,
  "delta": 1.125rem,
  "epsilon": 1rem,
  "zeta": 0.875rem,
  "omega": 0.75rem,
  "theta": 0.6875rem,
);

@mixin typescale($size) {
  @if map.has-key($typescale-map, $size) {
    font-size: map.get($typescale-map, $size);
  } @else {
    @warn 'This is not a step of the WFP Type Scale!';
  }
}
/*
 <Text fontSize="6xl">In love with React & Next</Text>
  <Text fontSize="5xl">In love with React & Next</Text>
  <Text fontSize="4xl">In love with React & Next</Text>
  <Text fontSize="3xl">In love with React & Next</Text>
  <Text fontSize="2xl">In love with React & Next</Text>
  <Text fontSize="xl">In love with React & Next</Text>
  <Text fontSize="lg">In love with React & Next</Text>
  <Text fontSize="md">In love with React & Next</Text>
  <Text fontSize="sm">In love with React & Next</Text>
  <Text fontSize="xs">In love with React & Next</Text>

  */

/*
@use 'config';
@forward '@un/type' show
  // Mixins
  reset,
  type-style,
  font-family,

  // Variables
  $caption-01,
  $caption-02,
  $label,
  $label-02,
  $helper-text-01,
  $body-short,
  $body-short-02,
  $body-long-01,
  $body-long-02,
  $code-01,
  $code-02,
  $heading-01,
  $heading-02,
  $productive-heading-01,
  $productive-heading-02,
  $productive-heading-03,
  $productive-heading-04,
  $productive-heading-05,
  $productive-heading-06,
  $productive-heading-07,
  $expressive-paragraph-01,
  $expressive-heading-01,
  $expressive-heading-02,
  $expressive-heading-03,
  $expressive-heading-04,
  $expressive-heading-05,
  $expressive-heading-06,
  $quotation-01,
  $quotation-02,
  $display-01,
  $display-02,
  $display-03,
  $display-04,
  $tokens;
*/