////
/// @group typography
////

@import '~@react-md/theme/dist/helpers';
@import '~@react-md/theme/dist/mixins';
@import '~@react-md/utils/dist/mixins';
@import './variables';
@import './functions';

/// Creates the styles for one of the typography's theme values. This is mostly
/// going to be an internal helper mixin util.
///
/// @param {String} property - The property to set a
/// `rmd-typography-theme-values` value to.
/// @param {String} theme-style - One of the keys of
/// `rmd-typography-theme-values` to extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-typography-theme-values` map when
/// `null`.
@mixin rmd-typography-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-typography-theme-values,
    typography
  );
}

/// Updates one of the typography's theme variables with the new value for the
/// section of your app.
///
/// @param {String} theme-style - The typography theme style type to update.
/// This should be one of the `$rmd-typography-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-typography-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var($value, $theme-style, $rmd-typography-theme-values, typography);
}

/// Applies each property value from the `$rmd-typography-styles` map that
/// matches the style name.
///
/// @example scss - Simple Examples
///   .body-1-font-size {
///     // when no properties are provided, it will default to font-size
///     @include rmd-typography-value(body-1);
///   }
///
///   .headline-4-letter-spacing {
///     @include rmd-typography-value(headline-4, letter-spacing);
///   }
///
///   .caption-styles {
///     @include rmd-typography-value(caption, font-size, letter-spacing, line-height);
///   }
///
/// @param {String} style - The typography style to get value(s) for. This
/// should be one of the keys from the `$rmd-typography-styles` map.
/// @param {String...} properties [font-size] - A list of properties to get and
/// create. When no properties are provided, it will default to using
/// `font-size`.
@mixin rmd-typography-value($style, $properties...) {
  @if length($properties) == 0 {
    $properties: append($properties, font-size);
  }

  @each $property in $properties {
    #{$property}: rmd-typography-value($style, $property);
  }
}

/// Applies the base typography styles to an element.
///
/// @example scss - Example Usage SCSS
///   .custom-class-name {
///     @include rmd-typography-base;
///
///     font-size: 1.3rem;
///  }
@mixin rmd-typography-base {
  @each $key, $value in $rmd-typography-base {
    #{$key}: $value;
  }
}

/// Applies one of the provided material design styles to an element.
/// @param {String} style - One of the typography styles from
/// `$rmd-typography-styles`.
/// @param {List} omit - A list of keys to omit
@mixin rmd-typography($style, $omit: ()) {
  $style-props: rmd-utils-validate($rmd-typography-styles, $style, typography);

  @each $key, $value in $style-props {
    @if not index($omit, $key) {
      #{$key}: $value;
    }
  }
}

/// Creates the base styles required for the text container. These styles are
/// used to be able to center the text in a container once the `max-width` value
/// has also been applied.
@mixin rmd-text-container-base {
  @include rmd-typography-theme(max-width, line-width);

  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/// This will generate the styles to apply to an element that will set the max
/// width for legibility. By default, this will create styles that change based
/// on the provided `$mobile-breakpoint` and apply different max widths on a
/// media query. This feature can be disabled by setting the
/// `$mobile-breakpoint` or the `$desktop-max-width` parameters to `null`.
///
/// Unlike everything else in react-md, the text container relies on having the
/// `box-sizing` set to `content-box` so that the text contents can be centered
/// correctly with a max width and padding. When this is set to `border-box`,
/// you will lose the padding real estate in your text container which is
/// something that might not be desired. Keeping this as `content-box` will
/// allow padding to be applied without shrinking the max line length.
///
/// @example scss - Creating a "blog"
///   .blog {
///     @include rmd-text-container-base;
///     @include rmd-text-container-auto;
///   }
///
///   .title {
///     @include rmd-typography(headline-2);
///   }
///
///   .paragraph {
///     @include rmd-typography(headline-4);
///
///     @media (max-width: 800px) {
///       @include rmd-typography(headline-5);
///     }
///   }
///
/// @example html - Creating a "blog"
///    <main class="blog">
///      <h1 class="title">Blog Title</h1>
///      <p class="paragraph">Lorem ipsum...</p>
///      <p class="paragraph">Lorem ipsum...</p>
///    </main>
///
///
/// @param {Number} mobile-max-width [$rmd-typography-mobile-max-line-length] -
/// The max width for a line of text on mobile devices. This number is
/// recommended to be between 17em and 18em.
/// @param {Number} desktop-max-width [$rmd-typography-desktop-max-line-length] -
/// The max width for a line of text on desktop screens. This number is
/// recommended to be between 38em and 42em.
/// @param {Number} mobile-breakpoint [$rmd-typography-text-container-breakpoint]
/// - The breakpoint for switching between a mobile device and a desktop screen.
/// This is used to automatically change the max line-width for better
/// legibility.
@mixin rmd-text-container-auto(
  $mobile-max-width: $rmd-typography-mobile-max-line-length,
  $desktop-max-width: $rmd-typography-desktop-max-line-length,
  $mobile-breakpoint: $rmd-typography-text-container-breakpoint
) {
  @media (max-width: #{$mobile-breakpoint}) {
    @include rmd-typography-theme-update-var(
      line-width,
      rmd-typography-theme-var(mobile-line-width)
    );
  }
}

/// Creates all the styles for the text container component.
///
/// @access private
@mixin rmd-text-container {
  @include rmd-text-container-base;

  &--auto {
    @include rmd-text-container-auto;
  }

  &--mobile {
    @include rmd-typography-theme-update-var(
      line-width,
      rmd-typography-theme-var(mobile-line-width)
    );
  }

  &--desktop {
    @include rmd-typography-theme-update-var(
      line-width,
      rmd-typography-theme-var(desktop-line-width)
    );
  }
}

/// A simple mixin that can be used to update an element to ellipsis text when
/// it is too long.
///
/// @example scss - Example Usage
///   .truncate-this {
///     @include rmd-typography-text-overflow-ellipsis;
///
///     width: 5rem;
///   }
@mixin rmd-typography-text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/// A simple mixin that allows you to use the `-webkit-box` behavior for
/// overflowing text that spans multiple lines
///
/// @link https://caniuse.com/#search=line-clamp
/// @param {String|Number} lines [2] - The number of lines that the text should be
/// clamped to.
@mixin rmd-typography-line-clamp($lines: 2) {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  display: -webkit-box;
}

/// Creates all the typography styles from the react-md typography variables.
@mixin react-md-typography {
  @include rmd-theme-create-root-theme($rmd-typography-theme-values, typography);

  .rmd-typography {
    @include rmd-typography-base;

    @each $suffix in map-keys($rmd-typography-styles) {
      &--#{$suffix} {
        @include rmd-typography($suffix);
      }
    }

    @each $weight in $rmd-typography-default-font-weights {
      &--#{$weight} {
        font-weight: map-get($rmd-typography-font-weights, $weight);
      }
    }

    @each $font-style in $rmd-typography-font-styles {
      &--#{$font-style} {
        font-style: $font-style;
      }
    }

    @each $suffix, $theme-style in $rmd-typography-colors {
      &--#{$suffix} {
        @include rmd-theme(color, $theme-style);
      }
    }

    @each $align in $rmd-typography-alignments {
      &--#{$align} {
        text-align: $align;
      }
    }

    @each $decoration in $rmd-typography-decorations {
      $suffix: $decoration + if($decoration == overline, 'overline-decoration', '');

      &--#{$suffix} {
        text-decoration: $decoration;
      }
    }

    @each $transform in $rmd-typography-transforms {
      &--#{$transform} {
        text-transform: $transform;
      }
    }

    &--no-margin {
      margin: 0;
    }

    &--no-margin-top {
      margin-top: 0;
    }

    &--no-margin-bottom {
      margin-bottom: 0;
    }
  }

  .rmd-text-container {
    @include rmd-text-container;
  }

  .rmd-sr-only {
    @include rmd-utils-sr-only(true);
  }
}

/// Creates the font face declaration for a Google font with a provided font
/// weight. This will need to be called multiple times if you are including
/// multiple font weights.
///
/// This should only be used if you are hosting the Google font locally instead
/// of through the Google fonts service.
///
/// @example scss - Example Usage SCSS
///   @include rmd-typography-google-font-face(Roboto, regular, null);
///   @include rmd-typography-google-font-face('Source Code Pro', regular, null);
///
///
/// @param {String} font-name [Roboto] - The font name to use.
/// @param {String} font-weight [map-get($rmd-typography-font-weights, regular)] - The
/// font weight to use.
/// @param {String} font-url-or-prefix [null] - This is either a font url prefix
/// for the folder containing the font on your server or a url string to the
/// font icon file on your server. If you are using create-react-app, you
/// **must** use the url string approach for it to be correctly included in the
/// build process. If this value is null, it will default to have '/fonts/'
/// prefix and then a caterpillar-cased string. See the examples above for more
/// details.
@mixin rmd-typography-google-font-face(
  $font-name: Roboto,
  $font-weight: map-get($rmd-typography-font-weights, regular),
  $font-url-or-prefix: null
) {
  $full-font-name: str-replace($font-name, ' ', '') +
    rmd-typography-google-font-suffix($font-weight);

  $font-url-prefix: '';
  $font-url: null;
  @if $font-url-or-prefix == null or type-of($font-url-or-prefix) == 'string' {
    $font-url: if(
      $font-url-or-prefix == null,
      '/fonts/' + to-lower-case(str-replace($font-name, ' ', '-')),
      $font-url-or-prefix
    );
    $font-url: if(char-at($font-url) != '/', $font-url + '/', $font-url);
    $font-url: url($font-url + $full-font-name + '.ttf');
  } @else {
    $font-url: $font-url-or-prefix;
  }

  @font-face {
    font-family: quote($font-name);
    font-style: normal;
    font-weight: $font-weight;
    src: local(#{quote($font-name)}), local(#{quote($full-font-name)}),
      #{$font-url} format('truetype');
  }
}

/// Generates all the font faces (with font weights) for a Google font. This
/// should only be used if you are hosting the Google font on your own servers
/// instead of through the Google fonts service.
///
/// If you are using create-react-app, you must provide the
/// `$font-url-prefix-or-url-map` as a Map of urls to have the font files
/// correctly included and bundled during your build. See the examples for more
/// details.
///
/// @example scss - Using Absolute Paths
///   // This example will assume that your fonts have been downloaded and
///   // copied into a `public/fonts` directory within create-react-app.
///   // The fonts will not be bundled with your normal build process and just
///   // will be static assets.
///
///   // The next 3 lines are equivalent
///   @include rmd-typography-host-google-font;
///   @include rmd-typography-host-google-font(Roboto, $rmd-typography-default-font-weights, null);
///   @include rmd-typography-host-google-font(Roboto, $rmd-typography-default-font-weights, '/fonts/roboto');
///
///   @include rmd-typography-host-google-font('Source Code Pro');
///
/// @example scss - Using Relative Paths
///   // Since it might be useful to include the font in the normal build
///   // process to hash and prefix the urls as needed, you can also use
///   // relative paths instead of absolute paths.
///   // This example will assume you are working within a `src/fonts.scss` file
///   // and have copied your fonts into a `src/fonts` directory
///
///   // Note the `~./`. This will resolve this import to the `src` directory
///   // within create-react-app
///   @include rmd-typography-host-google-font(
///     Roboto,
///     $rmd-typography-default-font-weights,
///     '~./fonts/roboto'
///   );
///
///   @include rmd-typography-host-google-font(
///     'Source Code Pro',
///     regular,
///     '~./fonts/source-code-pro'
///   );
///
/// @example scss - Custom Font Map Declarations
///   // This is going to assume you have downloaded the material-icons zip with
///   // all the icon font files and copied it into `src/fonts/material-icons` and
///   // you are including the fonts in `src/index.scss`
///   @include rmd-typography-host-google-font(Roboto, $rmd-typography-default-font-weights, (
///     light: url(/fonts/roboto/Roboto-Light.ttf),
///     regular: url(/fonts/roboto/Roboto-Regular.ttf),
///     medium: url(/fonts/roboto/Roboto-Medium.ttf),
///     bold: url(/fonts/roboto/Roboto-Bold.ttf),
///   ));
///
///   @include rmd-typography-host-google-font(SourceCodePro, $rmd-typography-default-font-weights, (
///     light: url(/fonts/source-code-pro/SourceCodePro-Light.ttf),
///     regular: url(/fonts/source-code-pro/SourceCodePro-Regular.ttf),
///     medium: url(/fonts/source-code-pro/SourceCodePro-Medium.ttf),
///     bold: url(/fonts/source-code-pro/SourceCodePro-Bold.ttf),
///   ));
///
/// @param {String} font-name [Roboto] - The font name to use.
/// @param {List} weights [$rmd-typography-default-font-weights] - A list of
/// font weights to use. These should be one of the
/// `$rmd-typography-font-weights` keys.
/// @param {Map|String} font-url-prefix-or-url-map [null] - This is either a
/// font url prefix for the folder containing the font on your server or a url
/// string to the font icon file on your server. If you are using
/// create-react-app, you **must** use the url string approach for it to be
/// correctly included in the build process. If this value is null, it will
/// default to have '/fonts/' prefix and then a caterpillar-cased string. See
/// the `rmd-typography-google-font-face` mixin for more details.
/// @see rmd-typography-google-font-face
/// @link https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files Adding Images, Fonts, and Files
@mixin rmd-typography-host-google-font(
  $font-name: Roboto,
  $weights: $rmd-typography-default-font-weights,
  $font-url-prefix-or-url-map: null
) {
  @each $weight in $weights {
    @if type-of($font-url-prefix-or-url-map) == 'string' or $font-url-prefix-or-url-map == null {
      @include rmd-typography-google-font-face($font-name, $weight, $font-url-prefix-or-url-map);
    } @else {
      @include rmd-typography-google-font-face(
        $font-name,
        $weight,
        rmd-utils-validate($font-url-prefix-or-url-map, $weight, 'Google font weight')
      );
    }
  }
}