////
/// @group wysiwyg
////
/// For auto formatting general HTML elements (used around editor/body text). This selector can't currently be changed.

@use "sass:list";
@use "sass:map";

@use "../element";
@use "../typography";
@use "../utils";


/// Module Settings
/// @type Map
/// @prop {String} exclude-selector [".wysiwyg__exclude"] Applied to all selectors
/// @prop {List} img-excluded-selectors [()] Extra selectors to prevent <img> styling
/// @prop {List} ul-excluded-selectors [(".list-lines",)] Extra selectors to prevent <ul> styling
/// @prop {List} link-excluded-selectors [("[class]",)] Extra selectors to prevent <a> styling
/// @prop {Map} headline-sizes [Map] Headlines from typography sizes (ElementName : TypographySizeName, ...)

$config: (
  "exclude-selector" : ".wysiwyg__exclude",
  "img-excluded-selectors" : (),
  "ul-excluded-selectors" : (".list-lines",),
  "link-excluded-selectors" : ("[class]",),
  "headline-sizes" : (
    "h2" : "h2",
    "h3" : "h3",
    "h4" : "h4",
    "h5" : "h5",
    "h6" : "h6",
  )
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-wysiwyg-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-wysiwyg-get("property");

@function get($name) {
  @return utils.require-map-get($config, $name, "component-wysiwyg [config]");
}

/// Output component stylesheet
/// - Note this is setup so that it can be used for separate stylesheets (ie. tinyMCE or ckeditor)
/// @param {Boolean} $in-selector [true] - Whether to print with .wysiwyg selector or not, used when building like editor/ckeditor stylesheet where these aren't wrapped in selector and should just affect all elements in the editor
/// @example scss
///   @include ulu.component-wysiwyg-styles(true);
///   // Output not in selector (for editor stylesheet/preview)
///   @include ulu.component-wysiwyg-styles(false); 

@mixin styles($in-selector: true) {
  @if ($in-selector) {
    .wysiwyg {
      @include _styles;
    }
  } @else {
    @include _styles;
  }
}

// Internal mixin
@mixin _styles() {
  $exclude-selector: get("exclude-selector");
  $ul-excludes: list.join(get("ul-excluded-selectors"), ($exclude-selector), $separator: comma);
  $img-excludes: list.join(get("img-excluded-selectors"), ($exclude-selector), $separator: comma);
  $link-excludes: list.join(get("link-excluded-selectors"), ($exclude-selector), $separator: comma);

  a:not(#{ $link-excludes }) {
    @include element.link($visited: true, $active: true);
  }
  ul:not(#{ $ul-excludes }) {
    @include element.styles-unordered-list();
    margin-bottom: element.get("margin");
  }
  ol:not(#{ $exclude-selector }) {
    @include element.styles-ordered-list(inherit);
    margin-bottom: element.get("margin");
  }
  // ul,
  // ol {
  //   margin-bottom: element.get("margin");
  // }
  @each $element, $size in get("headline-sizes") {
    #{ $element }:not(#{ $exclude-selector }) {
      @include typography.size($size);
    }
  }
  img:not(#{ $img-excludes }) {
    margin-bottom: element.get("margin");
    margin-top: element.get("margin");
  }
}