/**
* -- Vector processing --
* To only ever be called from @mixin vectorMessage() {}
*/
@use "sass:list";
@use "../helpers" as *;
@use "../../errors/variables" as *;
@use "../../shared/variables" as *;
@use "../../warnings/variables" as *;

@function generate-vector-text($errorType, $code, $lines) {
  $textLines: ();

  @if list.length($lines) == 0 {
    // stylelint-disable-next-line scss/no-duplicate-dollar-variables
    $textLines: list.append('<text x="15" y="35">CAUTION: Unidentified issue</text>');
  } @else {
    $errorMessage: null;

    @if $errorType == error and str-index($code, "E") {
      $errorMessage: "ERROR (#{$code}): "; // stylelint-disable-line scss/no-duplicate-dollar-variables
    } @else if $errorType == warning and str-index($code, "W") {
      $errorMessage: "WARNING (#{$code}): "; // stylelint-disable-line scss/no-duplicate-dollar-variables
    }

    $lines: replace-nth($lines, 1, "#{$errorMessage}#{list.nth($lines, 1)}");

    @each $line in $lines {
      // stylelint-disable-next-line scss/no-duplicate-dollar-variables
      $textLines: list.append($textLines, '<text x="15" y="#{index($lines, $line) * 25 + 10}">#{$line}</text>');
    }
  }

  @return $textLines;
}

/**
* -- Vector message --
* To only be used with elements that cannot render a ::before or an ::after
* @include vectorMessage(params)
*
* PARAMS
* - errorType: type of the message (error or warning)
* - width: width of the generated image (the whole element will be set to this width)
* - lines: the rest of the parameters as a list (the lines of text to be displayed)
*
* ****IMPORTANT****:
* - Avoid special characters (#, <, >) when possible, or replace them with HTML entities (< --> &lt; etc)
* - lines needs to be an array of text otherwise it won't fit on one line (you may have to do a few attempts)
*/

@mixin vectorMessage($errorType, $code, $width: 400, $lines...) {
  border-block: 0.4rem solid;
  border-inline: 0.4rem solid;

  $border-svg: #000;
  $bg-svg: #fff;
  $text-svg: #000;
  $textLines: generate-vector-text($errorType, $code, $lines);
  $height: list.length($textLines) * 25 + 30; // number of lines * 25 (line height) + 30 (padding top and bottom)

  @if $errorType == error {
    $border-svg: $checka11y-border-error; // stylelint-disable-line scss/no-duplicate-dollar-variables
    $bg-svg: $checka11y-bg-error; // stylelint-disable-line scss/no-duplicate-dollar-variables
    $text-svg: $checka11y-text-error; // stylelint-disable-line scss/no-duplicate-dollar-variables

    border-color: var(--checka11y-border-error);
  } @else if $errorType == warning {
    $border-svg: $checka11y-border-warning; // stylelint-disable-line scss/no-duplicate-dollar-variables
    $bg-svg: $checka11y-bg-warning; // stylelint-disable-line scss/no-duplicate-dollar-variables
    $text-svg: $checka11y-text-warning; // stylelint-disable-line scss/no-duplicate-dollar-variables

    border-color: var(--checka11y-border-warning);
  } @else {
    @error "The $errorType must be either 'error' or 'warning' and the $code must start with either 'E' or 'W' respectively.";
  }

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}px" height="#{$height}px" viewBox="0 0 #{$width} #{$height}"><rect class="box" x="4" y="4" width="#{$width - 8}" height="#{$height - 8}" rx="12" ry="12" fill="#{transparentize($bg-svg, 0.000001)}" stroke-width="0.4rem" stroke="#{transparentize($border-svg, 0.000001)}" /><g fill="#{transparentize($text-svg, 0.000001)}" font-size="#{$checka11y-font-size}" font-weight="#{$checka11y-font-weight}" font-family="#{$checka11y-font-family}" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none">#{$textLines}</g></svg>');
  background-position: block-end center;
  background-repeat: no-repeat;
  min-inline-size: #{$width}px;
  padding-block-end: #{$height}px;
}