////
/// (c) hidoo | MIT License
/// @group plugin/spritesheet
////

@use "sass:map";
@use "sass:meta";
@use "../../../lib/mixin";
@use "./function" as _function;
@use "./mixin" as _mixin;
@use "../settings" as _settings;

/// default options
/// @access private
/// @type Map
///
$_default-options: (
  "use2x": false,
  "as-mask": false,
  "responsive": false,
  "toggle": false,
  "capturing-selectors": ()
) !default;

/// Define spritesheet
/// @param {String} $type type of spritesheet
/// @param {String} $name name of spritesheet item
/// @param {Map} $options [()] options
/// @param {Boolean} $options.use2x [false] use 2x image or (one of `true`, `false` or breakpoint name)
/// @param {Boolean} $options.as-mask [false] use as mask image or not
/// @param {Boolean} $options.responsive [false] responsive or not
/// @param {Boolean} $options.toggle [false] toggle or not
/// @param {List} $options.capturing-selectors [("a", "button")] capturing parent selectors
///
/// @example scss - scss inputs
///   // use spritesheet plugin with configuration
///   @use "path/to/node_modules/unit/src/plugin/spritesheet" with (
///     $spritesheets: (
///       "icon-image": (
///         "image": "path/to/sprite/icon-image.png",
///         "items": (
///           "logo": (
///             "width": 10px,
///             "height": 10px,
///             "total-width": 30px,
///             "total-height": 30px,
///             "offset-x": -10px,
///             "offset-y": -10px
///           )
///         )
///       )
///     )
///   );
///
///   // use this mixin
///   .selector {
///     @include spritesheet.define($type: "icon-image", $name: "logo");
///   }
///
/// @example css - css outputs
///   .selector-logo {
///     --background-image: url(path/to/sprite/icon-image.png);
///     background-image: var(--background-image);
///   }
///   .selector-logo {
///     --overflow: hidden;
///     --color: transparent;
///     --text-indent: -100%;
///   }
///   .selector-logo {
///     --width: 10px;
///     width: var(--width);
///     --height: 10px;
///     height: var(--height);
///     --background-position: -10px -10px;
///     background-position: var(--background-position);
///     --background-size: 30px 30px;
///     background-size: var(--background-size);
///   }
///
@mixin define($type, $name, $options: ()) {
  @if meta.type-of($type) != "string" or $type == "" {
    @error "@mixin spritesheet.define: Argument $type must be valid string.";
  }

  @if meta.type-of($name) != "string" or $name == "" {
    @error "@mixin spritesheet.define: Argument $name must be valid string.";
  }

  // normalize spritesheets value
  $spritesheets: _function.normalize(_settings.$spritesheets);

  // normalize options
  $options: if(
    meta.type-of($options) == "map",
    map.merge($_default-options, $options),
    $_default-options
  );
  $use2x: map.get($options, "use2x");
  $as-mask: map.get($options, "as-mask");

  @if meta.type-of($spritesheets) == "map" {
    $sheet-by-type: _function.get-sheet-by-type($type, $spritesheets);

    @if meta.type-of($sheet-by-type) == "map" {
      $image: map.get($sheet-by-type, "image");
      $items: map.get($sheet-by-type, "items");
      $type-background: "#{$type}-background";
      $type-mask: "#{$type}-mask";

      @include mixin.placeholder-define($name: $type-background) {
        --background-image: url(#{$image});

        background-image: var(--background-image);
      }

      @include mixin.placeholder-define($name: $type-mask) {
        --mask-image: url(#{$image});

        mask-image: var(--mask-image);
      }

      @if map.get($options, "toggle") {
        $type-before: "#{$type}-before";

        @include mixin.placeholder-define($name: $type) {
          --overflow: hidden;
          --vertical-align: baseline;
          --field-position: absolute;
          --field-z-index: 1;
          --field-inset: 0 0;
          --field-width: 100%;
          --field-height: 100%;
          --field-opacity: 0;
          --pseudo-content: "";
          --pseudo-position: relative;
          --pseudo-z-index: 0;
          --pseudo-display: block;
          --pseudo-color: transparent;
          --pseudo-text-indent: -100%;
        }

        @include mixin.placeholder-define($name: $type-before) {
          content: var(--pseudo-content);

          position: var(--pseudo-position);
          z-index: var(--pseudo-z-index);

          display: var(--pseudo-display);

          color: var(--pseudo-color);
          text-indent: var(--pseudo-text-indent);
        }

        @if map.get($options, "responsive") {
          @include _mixin.define-responsive-toggle-item(
            $name: $name,
            $items: $items,
            $options: $options
          ) {
            @extend %#{$type};

            &::before {
              @extend %#{$type-before};

              @if $as-mask {
                @extend %#{$type-mask};
              } @else {
                @extend %#{$type-background};
              }
            }
          }
        } @else {
          @include _mixin.define-toggle-item(
            $name: $name,
            $items: $items,
            $options: $options
          ) {
            @extend %#{$type};

            &::before {
              @extend %#{$type-before};

              @if $as-mask {
                @extend %#{$type-mask};
              } @else {
                @extend %#{$type-background};
              }
            }
          }
        }
      } @else {
        @include mixin.placeholder-define($name: $type) {
          --overflow: hidden;
          --color: transparent;
          --text-indent: -100%;
        }

        @if map.get($options, "responsive") {
          @include _mixin.define-responsive-item(
            $name: $name,
            $items: $items,
            $options: $options
          ) {
            @extend %#{$type};

            @if $as-mask {
              @extend %#{$type-mask};
            } @else {
              @extend %#{$type-background};
            }
          }
        } @else {
          @include _mixin.define-item(
            $name: $name,
            $items: $items,
            $options: $options
          ) {
            @extend %#{$type};

            @if $as-mask {
              @extend %#{$type-mask};
            } @else {
              @extend %#{$type-background};
            }
          }
        }
      }
    } @else {
      @warn "@mixin spritesheet.define: Spritesheet '#{$name}' is not generate, because $type: '#{$type}' is not found."; // stylelint-disable-line max-line-length
    }
  } @else {
    @warn "@mixin spritesheet.define: Spritesheet '#{$name}' is not generate, because spritesheets value not configure."; // stylelint-disable-line max-line-length
  }
}