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

// BsChip variants -- scss mixins
//-------------------------------
@mixin make-default-variant-light($name, $color) {
  .chip-#{$name} {
    $chip-bg: helper.set-color-contrast(
      $color,
      helper.set-color-contrast($color, colors.$white, helper.shift-color($color, 65%), 90%),
      color.change(helper.shift-color($color, 60%), $alpha: 0.5)
    );
    $chip-border: helper.set-color-contrast($color, colors.$neutral-lighten-3, $chip-bg, 90%);
    $chip-color: helper.set-color-contrast($color, colors.$neutral-darken-1, colors.$black, 90%);
    $icon-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          colors.$gray-900,
          color.adjust($color, $lightness: -25%),
          90%
        ),
        color.adjust($color, $lightness: -5%)
      )
    );

    $hover-bg: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        helper.shift-color($color, 15%),
        helper.shift-color($color, 45%),
        90%
      ),
      color.change(helper.shift-color($color, 45%), $alpha: 0.7)
    );
    $hover-border: helper.set-color-contrast(
      $color,
      helper.to-oklch(color.scale(colors.$neutral-lighten-3, $lightness: -5%)),
      $hover-bg,
      90%
    );
    $active-bg: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          color.scale(colors.$gray-500, $lightness: 85%),
          helper.shift-color($color, 10%),
          90%
        ),
        color.change(color.adjust($color, $lightness: 25%), $alpha: 0.8)
      )
    );
    $active-border: helper.set-color-contrast($color, colors.$gray-300, $active-bg, 90%);
    $active-color: helper.set-color-contrast($active-bg, colors.$black, colors.$white);
    $active-icon-color: helper.to-oklch(
      helper.set-color-contrast(
        $active-bg,
        helper.set-color-contrast(
          $active-bg,
          colors.$gray-900,
          color.adjust($color, $lightness: -25%),
          90%
        ),
        color.adjust($color, $lightness: -10%)
      )
    );
    $focus-border: colors.$neutral-lighten-3;
    $box-shadow-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        colors.$neutral-lighten-1,
        color.scale($color, $lightness: -10%),
        90%
      ),
      $color
    );

    @if ($name == 'secondary') {
      $chip-bg: helper.to-oklch(color.scale($color, $lightness: 75%));
      $chip-hover: helper.to-oklch(color.scale($color, $lightness: 60%));
      $chip-active: helper.to-oklch(color.scale($color, $lightness: 50%));

      --#{vars.$prefix}chip-bg: #{$chip-bg};
      --#{vars.$prefix}chip-border-color: #{$chip-bg};
      --#{vars.$prefix}chip-hover-bg: #{$chip-hover};
      --#{vars.$prefix}chip-hover-border-color: #{$chip-hover};
      --#{vars.$prefix}chip-active-bg: #{$chip-active};
      --#{vars.$prefix}chip-active-border-color: #{$chip-active};
    } @else {
      --#{vars.$prefix}chip-bg: #{$chip-bg};
      --#{vars.$prefix}chip-border-color: #{$chip-border};
      --#{vars.$prefix}chip-hover-bg: #{$hover-bg};
      --#{vars.$prefix}chip-hover-border-color: #{$hover-border};
      --#{vars.$prefix}chip-active-bg: #{$active-bg};
      --#{vars.$prefix}chip-active-border-color: #{$active-border};
    }

    --#{vars.$prefix}chip-color: #{$chip-color};
    --#{vars.$prefix}chip-icon-color: #{$icon-color};
    --#{vars.$prefix}chip-hover-color: #{$chip-color};
    --#{vars.$prefix}chip-active-color: #{$active-color};
    --#{vars.$prefix}chip-active-icon-color: #{$active-icon-color};
    --#{vars.$prefix}chip-focus-border-color: #{$focus-border};
    --#{vars.$prefix}chip-focus-shadow-color: #{$box-shadow-color};
  }
}

// Make default BsChip with dark theme
//------------------------------------
@mixin make-default-variant-dark($name, $color) {
  .chip-#{$name} {
    $chip-bg: helper.set-color-contrast(
      $color,
      color.change(helper.shift-color($color, 10%), $alpha: 0.15),
      color.change(helper.shift-color($color, 25%), $alpha: 0.22),
      80%
    );
    $chip-color: helper.set-color-contrast(
      $chip-bg,
      colors.$neutral-lighten-3,
      helper.shift-color(colors.$neutral-lighten-2, 10%),
      90%
    );
    $icon-color: helper.to-oklch(color.adjust($color, $lightness: -10%));
    $hover-bg: helper.set-color-contrast(
      $color,
      color.change(helper.shift-color($color, 15%), $alpha: 0.22),
      color.change(helper.shift-color($color, 30%), $alpha: 0.28),
      80%
    );
    $active-bg: helper.set-color-contrast(
      $color,
      color.change(helper.shift-color($color, 30%), $alpha: 0.4),
      helper.to-oklch(color.change(color.adjust($color, $lightness: 20%), $alpha: 0.35)),
      80%
    );
    $active-color: helper.set-color-contrast(
      $active-bg,
      colors.$white,
      colors.$neutral-lighten-3,
      95%
    );
    $active-icon-color: helper.to-oklch(
      helper.set-color-contrast(
        $active-bg,
        colors.$white,
        color.adjust($color, $lightness: 15%),
        95%
      )
    );
    $box-shadow-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: 5%),
        color.adjust($color, $lightness: 40%),
        25%
      )
    );
    $focus-border: helper.to-oklch(
      helper.set-color-contrast($color, colors.$gray-800, colors.$black, 25%)
    );

    --#{vars.$prefix}chip-bg: #{$chip-bg};
    --#{vars.$prefix}chip-color: #{$chip-color};
    --#{vars.$prefix}chip-border-color: #{color.change($chip-bg, $alpha: 0.05)};
    --#{vars.$prefix}chip-icon-color: #{$color};
    --#{vars.$prefix}chip-hover-bg: #{$hover-bg};
    --#{vars.$prefix}chip-hover-color: #{$active-color};
    --#{vars.$prefix}chip-hover-border-color: #{color.change($hover-bg, $alpha: 0.1)};
    --#{vars.$prefix}chip-active-bg: #{$active-bg};
    --#{vars.$prefix}chip-active-color: #{$active-color};
    --#{vars.$prefix}chip-active-border-color: #{color.change($active-bg, $alpha: 0.2)};
    --#{vars.$prefix}chip-active-icon-color: #{$active-icon-color};
    --#{vars.$prefix}chip-focus-border-color: #{$focus-border};
    --#{vars.$prefix}chip-focus-shadow-color: #{$box-shadow-color};
  }
}

// Make outlined BsChip with light theme
//--------------------------------------
@mixin make-outline-variant-light($name, $color) {
  .chip-outline-#{$name} {
    $chip-border: colors.$gray-500;
    $chip-color: colors.$gray-800;
    $icon-color: helper.set-color-contrast($color, colors.$gray-800, $color, 90%);
    $hover-bg: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        colors.$white,
        functions.fn-if(
          ($name == 'secondary'),
          color.change($color, $alpha: 0.2),
          color.change(color.adjust($color, $lightness: 20%), $alpha: 0.2)
        ),
        90%
      )
    );
    $hover-border: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          colors.$neutral-lighten-1,
          functions.fn-if(
            ($name == 'secondary'),
            colors.$gray-600,
            color.scale($color, $lightness: -20%)
          ),
          90%
        ),
        $color
      )
    );
    $hover-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        colors.$neutral-darken-4,
        color.scale($color, $lightness: -40%),
        90%
      )
    );
    $active-bg: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        helper.shift-color(colors.$indigo-base, 85%),
        helper.shift-color($color, 65%),
        90%
      ),
      functions.fn-if(
        ($name == 'secondary'),
        helper.to-oklch(color.scale($color, $lightness: 75%)),
        helper.shift-color($color, 70%)
      )
    );
    $active-border: helper.set-color-contrast(
      $color,
      colors.$neutral-lighten-2,
      color.scale($active-bg, $lightness: -15%),
      90%
    );
    $active-icon-color: helper.to-oklch(
      helper.set-color-contrast($color, colors.$black, color.scale($color, $lightness: -40%), 90%)
    );
    $focus-border: colors.$neutral-lighten-3;
    $box-shadow-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        colors.$neutral-lighten-1,
        color.scale($color, $lightness: -10%),
        90%
      ),
      $color
    );

    --#{vars.$prefix}chip-bg: transparent;
    --#{vars.$prefix}chip-color: #{$chip-color};
    --#{vars.$prefix}chip-border-color: #{$chip-border};
    --#{vars.$prefix}chip-icon-color: #{$icon-color};
    --#{vars.$prefix}chip-hover-bg: #{$hover-bg};
    --#{vars.$prefix}chip-hover-color: #{$hover-color};
    --#{vars.$prefix}chip-hover-border-color: #{$hover-border};
    --#{vars.$prefix}chip-active-bg: #{$active-bg};
    --#{vars.$prefix}chip-active-color: #{colors.$black};
    --#{vars.$prefix}chip-active-border-color: #{$active-border};
    --#{vars.$prefix}chip-active-icon-color: #{$active-icon-color};
    --#{vars.$prefix}chip-focus-border-color: #{$focus-border};
    --#{vars.$prefix}chip-focus-shadow-color: #{$box-shadow-color};
  }
}

// Make outlined BsChip with dark theme
//-------------------------------------
@mixin make-outline-variant-dark($name, $color) {
  .chip-outline-#{$name} {
    $border-color: helper.to-oklch(color.change(colors.$gray-500, $alpha: 0.4));
    $chip-color: helper.shift-color(colors.$neutral-lighten-2, 7%);
    $hover-bg: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.change(color.adjust($color, $lightness: -5%), $alpha: 0.2),
        color.change(color.adjust($color, $lightness: 20%), $alpha: 0.2),
        90%
      )
    );
    $hover-border: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          color.scale(colors.$neutral-lighten-3, $lightness: -10%),
          color.adjust($color, $lightness: -10%),
          90%
        ),
        color.adjust($color, $lightness: 12%)
      )
    );
    $hover-color: functions.fn-if(
      $name == 'warning',
      oklch(0.91 0.11 84.51),
      helper.to-oklch(
        helper.set-color-contrast(
          $color,
          colors.$neutral-lighten-3,
          color.adjust($color, $lightness: 20%),
          90%
        )
      )
    );
    $active-bg: helper.set-color-contrast(
      $color,
      color.change(helper.shift-color($color, 15%), $alpha: 0.35),
      color.change(helper.shift-color($color, 30%), $alpha: 0.35),
      80%
    );
    $active-border: helper.set-color-contrast($color, colors.$neutral-lighten-3, $active-bg, 90%);
    $active-color: helper.set-color-contrast(
      $active-bg,
      colors.$white,
      colors.$neutral-lighten-3,
      95%
    );
    $active-icon-color: helper.to-oklch(
      helper.set-color-contrast(
        $active-bg,
        colors.$white,
        color.adjust($color, $lightness: 15%),
        95%
      )
    );
    $box-shadow-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: 5%),
        color.adjust($color, $lightness: 40%),
        25%
      )
    );
    $focus-border: helper.to-oklch(
      helper.set-color-contrast($color, colors.$gray-800, colors.$black, 25%)
    );

    --#{vars.$prefix}chip-bg: transparent;
    --#{vars.$prefix}chip-color: #{$chip-color};
    --#{vars.$prefix}chip-border-color: #{$border-color};
    --#{vars.$prefix}chip-icon-color: #{$color};
    --#{vars.$prefix}chip-hover-bg: #{$hover-bg};
    // prettier-ignore
    --#{vars.$prefix}chip-hover-color: #{functions.fn-if(($name == 'secondary'), colors.$neutral-lighten-3, $hover-color)};
    --#{vars.$prefix}chip-hover-border-color: #{$hover-border};
    --#{vars.$prefix}chip-active-bg: #{$active-bg};
    --#{vars.$prefix}chip-active-color: #{$active-color};
    --#{vars.$prefix}chip-active-border-color: #{$active-bg};
    --#{vars.$prefix}chip-active-icon-color: #{$active-icon-color};
    --#{vars.$prefix}chip-focus-border-color: #{$focus-border};
    --#{vars.$prefix}chip-focus-shadow-color: #{$box-shadow-color};
  }
}

// BsChip disable state with dark theme
//-------------------------------------
@mixin make-disabled-variant-dark() {
  .#{vars.$prefix}chip {
    --#{vars.$prefix}chip-disabled-bg: oklch(0.53 0.01 261.34 / 0.15);
    --#{vars.$prefix}chip-disabled-border-color: oklch(0.234 0.005 248.037);
    --#{vars.$prefix}chip-disabled-color: #{colors.$neutral-base};
    --#{vars.$prefix}chip-disabled-icon-color: oklch(0.52 0 0);
  }
}