@use 'sass:color';
@use '../utils/color-helper' as helper;
@use '../color-vars' as colors;
@use '../variables' as vars;

// BsAlert variants -- scss mixins
//---------------------------------
@mixin make-default-variant-light($name, $color) {
  .alert-#{$name} {
    $background-color: helper.set-color-contrast(
      $color,
      helper.shift-color($color, 65%),
      helper.shift-color($color, 80%),
      90%
    );
    $border-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        helper.shift-color($color, 5%),
        helper.shift-color($color, 45%),
        90%
      ),
      helper.shift-color($color, 60%),
      80%
    );
    $text-color: helper.shift-color($color, -40%);

    --#{vars.$prefix}alert-bg: #{$background-color};
    --#{vars.$prefix}alert-border-color: #{$border-color};
    --#{vars.$prefix}alert-color: #{$text-color};

    $link-color: helper.to-oklch(color.mix(colors.$black, $text-color, 20%, oklch));
    --#{vars.$prefix}alert-link-color: #{$link-color};

    @if ($name != 'secondary' and $name != 'dark' and $name != 'light') {
      .btn-flat-#{$name} {
        $hover-bg: helper.set-color-contrast(
          $color,
          color.change(color.scale($color, $lightness: 30%), $alpha: 0.45),
          color.change($color, $alpha: 0.25),
          90%
        );

        &.btn-close-action {
          --#{vars.$prefix}btn-color: #{helper.to-oklch($text-color)};
          --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($hover-bg)};
        }
      }
    }
  }
}

// Make default alert with dark theme
//-----------------------------------
@mixin make-default-variant-dark($name, $color) {
  .alert-#{$name} {
    $bg-color: helper.set-color-contrast(
      $color,
      color.change(helper.shift-color($color, -67%), $alpha: 0.85),
      color.change(helper.shift-color($color, -65%), $alpha: 0.5),
      90%
    );
    $border-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        helper.shift-color($color, -50%),
        helper.shift-color($color, -35%),
        90%
      ),
      helper.shift-color($color, -35%),
      80%
    );
    $text-color: helper.shift-color($color, 38%);

    --#{vars.$prefix}alert-bg: #{$bg-color};
    --#{vars.$prefix}alert-border-color: #{$border-color};
    --#{vars.$prefix}alert-color: #{$text-color};

    $link-color: helper.shift-color($text-color, 20%);
    --#{vars.$prefix}alert-link-color: #{$link-color};

    @if ($name != 'secondary' and $name != 'dark' and $name != 'light') {
      .btn-flat-#{$name} {
        $hover-bg: helper.set-color-contrast(
          $color,
          color.change(color.scale($color, $lightness: 30%), $alpha: 0.45),
          color.change($color, $alpha: 0.25),
          90%
        );

        &.btn-close-action {
          --#{vars.$prefix}btn-color: #{helper.to-oklch($text-color)};
          --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($hover-bg)};
        }
      }
    }
  }
}

// Make outlined alert with light theme
//-------------------------------------
@mixin make-outline-variant-light($name, $color) {
  .alert-outline-#{$name} {
    $border-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast($color, $color, color.adjust($color, $lightness: -10%), 90%),
      helper.to-oklch(color.adjust($color, $lightness: 15%)),
      80%
    );

    $link-color: helper.set-color-contrast(
      $color,
      colors.$neutral-darken-3,
      color.adjust($color, $lightness: -10%),
      90%
    );
    $text-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        colors.$neutral-darken-3,
        color.adjust($color, $lightness: -15%),
        90%
      ),
      helper.shift-color($color, 10%)
    );

    @if ($name == 'secondary') {
      --#{vars.$prefix}alert-color: #{colors.$neutral-darken-3};
      --#{vars.$prefix}alert-link-color: #{colors.$neutral-darken-3};
    } @else {
      --#{vars.$prefix}alert-color: #{helper.to-oklch($text-color)};
      --#{vars.$prefix}alert-link-color: #{helper.to-oklch($link-color)};
    }

    --#{vars.$prefix}alert-border-color: #{$border-color};
  }
}

// Make outlined alert with dark theme
//------------------------------------
@mixin make-outline-variant-dark($name, $color) {
  .alert-outline-#{$name} {
    $border-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast($color, $color, color.adjust($color, $lightness: -10%), 90%),
      helper.to-oklch(color.adjust($color, $lightness: 15%)),
      80%
    );
    $text-color: helper.shift-color($color, 35%);
    $link-color: helper.shift-color($color, 20%);

    --#{vars.$prefix}alert-color: #{$text-color};
    --#{vars.$prefix}alert-link-color: #{$link-color};
    --#{vars.$prefix}alert-border-color: #{color.change($border-color, $alpha: 0.6)};
  }
}

// Make solid alert with generic theme
//------------------------------------
@mixin make-solid-variant($name, $color) {
  .alert-solid-#{$name} {
    $text-color: helper.set-color-contrast($color, colors.$gray-900, colors.$white);
    $hr-border-color: helper.set-color-contrast(
      $color,
      color.adjust($color, $lightness: -25%),
      color.change(color.adjust(colors.$white, $lightness: -4%), $alpha: 0.65)
    );

    --#{vars.$prefix}alert-bg: #{$color};
    --#{vars.$prefix}alert-color: #{$text-color};
    --#{vars.$prefix}alert-link-color: #{$text-color};
    --#{vars.$prefix}alert-hr-color: #{helper.to-oklch($hr-border-color)};
  }
}