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

// BsButton variants -- scss mixins
//----------------------------------
@mixin make-default-variant($name, $color, $dark-mode: false) {
  @if ($dark-mode == true) {
    @include make-default-variant-dark($name, $color);
  } @else {
    @include make-default-variant-light($name, $color);
  }
}

@mixin make-outline-variant($name, $color, $dark-mode: false) {
  @if ($dark-mode == true) {
    @include make-outline-variant-dark($name, $color);
  } @else {
    @include make-outline-variant-light($name, $color);
  }
}

@mixin make-flat-variant($name, $color, $dark-mode: false) {
  @if ($dark-mode == true) {
    @include make-flat-variant-dark($name, $color);
  } @else {
    @include make-flat-variant-light($name, $color);
  }
}

// Make default BsButton with light theme
//---------------------------------------
@mixin make-default-variant-light($name, $color) {
  .btn-#{$name} {
    $focus-box-shadow-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.scale($color, $lightness: -15%),
        color.scale($color, $lightness: 15%)
      )
    );
    $dark-text-color: helper.to-oklch(color.scale($color, $lightness: -75%));
    $text-color: helper.set-color-contrast($color, $dark-text-color, colors.$white);
    $hover-bg: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.scale($color, $lightness: -10%),
        /* tune dark colors */ color.adjust($color, $lightness: 25%),
        25%
      )
    );
    $active-bg: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          color.scale($color, $lightness: -10%),
          color.scale($color, $lightness: -20%)
        ),
        /* tune dark colors */ color.adjust($color, $lightness: -35%),
        25%
      )
    );

    --#{vars.$prefix}btn-bg: #{$color};
    --#{vars.$prefix}btn-color: #{$text-color};
    --#{vars.$prefix}btn-border-color: #{$color};
    --#{vars.$prefix}btn-active-bg: #{$active-bg};
    --#{vars.$prefix}btn-active-color: #{$text-color};
    --#{vars.$prefix}btn-active-border-color: #{$active-bg};
    --#{vars.$prefix}btn-hover-bg: #{$hover-bg};
    --#{vars.$prefix}btn-hover-color: #{$text-color};
    --#{vars.$prefix}btn-hover-border-color: #{$hover-bg};
    --#{vars.$prefix}btn-focus-shadow-color: #{$focus-box-shadow-color};

    &.#{vars.$prefix}btn-fab,
    &.btn-tonal {
      $text-color: helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          helper.set-color-contrast($color, $color, color.adjust($color, $lightness: -35%), 90%),
          color.scale($color, $lightness: -35%)
        ),
        /* tune dark colors */ colors.$black,
        25%
      );
      $bg-color: helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          helper.set-color-contrast(
            $color,
            color.change(color.adjust($color, $lightness: -2%), $alpha: 0.5),
            /* tune warning and info colors */ color.mix($color, #fff, 25%, oklch),
            90%
          ),
          color.mix($color, #fff, 20%, oklch)
        ),
        /* tune dark colors */
          color.change(color.adjust($color, $chroma: -10%, $lightness: 55%), $alpha: 0.8),
        25%
      );
      $hover-bg: helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          helper.set-color-contrast(
            $color,
            color.change(color.adjust($color, $lightness: 20%), $alpha: 0.5),
            /* tune warning and info colors */ color.scale($color, $chroma: -10%, $lightness: 65%),
            90%
          ),
          color.scale($color, $chroma: -25%, $lightness: 65%)
        ),
        /* tune dark colors */ color.adjust($color, $chroma: -10%, $lightness: 50%),
        25%
      );
      $hover-text: helper.set-color-contrast(
        $color,
        helper.set-color-contrast(
          $color,
          helper.set-color-contrast(
            $color,
            color.scale($color, $lightness: 60%),
            /* tune warning and info colors */ color.adjust($color, $lightness: -40%),
            90%
          ),
          color.scale($color, $lightness: -50%)
        ),
        /* tune dark colors */ colors.$black,
        25%
      );
      $active-bg: color.adjust($color, $lightness: -5%);
      $active-text: helper.set-color-contrast(
        $active-bg,
        color.scale($color, $lightness: -75%),
        colors.$white
      );

      --#{vars.$prefix}btn-bg: #{helper.to-oklch($bg-color)};
      --#{vars.$prefix}btn-color: #{helper.to-oklch($text-color)};
      --#{vars.$prefix}btn-border-color: transparent;
      --#{vars.$prefix}btn-active-bg: #{helper.to-oklch($active-bg)};
      --#{vars.$prefix}btn-active-color: #{helper.to-oklch($active-text)};
      --#{vars.$prefix}btn-active-border-color: #{helper.to-oklch($active-bg)};
      --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($hover-bg)};
      --#{vars.$prefix}btn-hover-color: #{helper.to-oklch($hover-text)};
      --#{vars.$prefix}btn-hover-border-color: transparent;
    }
  }

  .#{vars.$prefix}segmented-button {
    > .btn-#{$name}:not(:first-child):not(:focus-visible) {
      &:not(:disabled):not(.disabled):not(.active) {
        $border-color: helper.to-oklch(color.adjust($color, $lightness: -10%));
        border-left-color: $border-color !important;

        &.readonly {
          $border-color: helper.to-oklch(color.adjust($color, $lightness: -5%));
          border-left-color: $border-color !important;
        }

        &.btn-tonal {
          //$border-color: helper.to-oklch(color.adjust($color, $lightness: 24%));
          border-left-color: color.change($color, $alpha: 0.14) !important;
        }
      }
    }
  }
}

// Make default BsButton with dark theme
//--------------------------------------
@mixin make-default-variant-dark($name, $color) {
  .btn-#{$name} {
    $box-shadow-focus: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: 5%),
        color.adjust($color, $lightness: 40%),
        25%
      )
    );
    $border-focus: helper.to-oklch(
      helper.set-color-contrast($color, colors.$gray-800, colors.$black, 25%)
    );
    $text-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: -70%),
        color.adjust(colors.$white, $lightness: -5%),
        72%
      )
    );
    $bg-hover: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: -8%),
        color.adjust($color, $lightness: 8%),
        25%
      )
    );
    $bg-active: helper.to-oklch(color.adjust($color, $lightness: -20%));
    $text-active: helper.to-oklch(
      helper.set-color-contrast($bg-active, colors.$neutral-darken-4, colors.$white, 72%)
    );

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

    &.#{vars.$prefix}btn-fab,
    &.btn-tonal {
      $tonal-text-color: functions.fn-if(
        $name == 'warning',
        oklch(0.91 0.11 84.51),
        helper.to-oklch(
          helper.set-color-contrast(
            $color,
            color.adjust($color, $lightness: 65%),
            color.adjust(colors.$white, $lightness: -5%),
            23%
          )
        )
      );
      $tonal-text-hover: helper.to-oklch(color.adjust(colors.$white, $lightness: -2%));
      $tonal-bg: helper.set-color-contrast(
        $color,
        color.change($color, $alpha: 0.15),
        color.change($color, $alpha: 0.25)
      );
      $tonal-bg-hover: helper.to-oklch(
        color.change(color.scale($color, $lightness: 30%), $alpha: 0.4)
      );
      $tonal-bg-active: helper.to-oklch(
        helper.set-color-contrast(
          $color,
          $color,
          color.change(color.adjust($color, $lightness: 30%), $alpha: 0.35),
          23%
        )
      );
      $tonal-text-active: helper.to-oklch(
        helper.set-color-contrast(
          $tonal-bg-active,
          color.adjust($color, $lightness: -65%),
          colors.$white,
          72%
        )
      );

      --#{vars.$prefix}btn-bg: #{$tonal-bg};
      --#{vars.$prefix}btn-color: #{$tonal-text-color};
      --#{vars.$prefix}btn-border-color: #{color.change($color, $alpha: 0.01)};
      --#{vars.$prefix}btn-hover-bg: #{$tonal-bg-hover};
      --#{vars.$prefix}btn-hover-color: #{$tonal-text-hover};
      --#{vars.$prefix}btn-hover-border-color: #{color.change($tonal-bg-hover, $alpha: 0.1)};
      --#{vars.$prefix}btn-active-bg: #{$tonal-bg-active};
      --#{vars.$prefix}btn-active-color: #{$tonal-text-active};
      --#{vars.$prefix}btn-active-border-color: #{color.change($color, $alpha: 0.1)};
    }
  }

  .#{vars.$prefix}segmented-button {
    > .btn-#{$name}:not(:first-child):not(:focus-visible) {
      &:not(:disabled):not(.disabled):not(.active) {
        $border-color: color.adjust($color, $lightness: -15%);
        border-left-color: #{color.change($border-color, $alpha: 0.7)} !important;

        &.readonly {
          $border-color: color.adjust($color, $lightness: -25%);
          border-left-color: #{helper.to-oklch(color.change($border-color, $alpha: 0.8))} !important;
        }

        &.btn-tonal {
          border-left-color: transparent !important;
        }
      }
    }
  }
}

// Make outlined BsButton with light theme
//----------------------------------------
@mixin make-outline-variant-light($name, $color) {
  .btn-outline-#{$name} {
    $focus-box-shadow-color: helper.set-color-contrast(
      $color,
      color.scale($color, $lightness: -15%),
      color.adjust($color, $lightness: 5%)
    );
    $text-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        colors.$gray-300,
        /* tune warning and info colors */ color.scale($color, $lightness: -20%),
        90%
      ),
      $color
    );
    $border-color: color.scale(colors.$gray-500, $lightness: 10%);
    $active-bg: helper.set-color-contrast(
      $color,
      color.change(color.scale($color, $lightness: 50%), $alpha: 0.45),
      $color,
      90%
    );
    $active-border: helper.set-color-contrast(
      $color,
      color.change(color.scale($color, $lightness: 50%), $alpha: 0.15),
      $color,
      90%
    );
    $active-text: helper.set-color-contrast(
      $color,
      helper.set-color-contrast($color, colors.$white, color.scale($color, $lightness: -75%), 90%),
      colors.$white
    );
    $hover-bg: helper.set-color-contrast(
      $color,
      color.change(color.scale($color, $lightness: 45%), $alpha: 0.35),
      color.change(color.mix($color, #fff, 30%, oklch), $alpha: 0.9),
      90%
    );
    $hover-text: helper.set-color-contrast(
      $color,
      colors.$white,
      color.scale($color, $lightness: -30%),
      90%
    );
    $hover-border: helper.set-color-contrast($color, $border-color, $color, 90%);

    @if ($name == 'secondary') {
      --#{vars.$prefix}btn-color: #{colors.$elegant-color-dark};
      --#{vars.$prefix}btn-hover-color: #{colors.$neutral-darken-4};
    } @else {
      --#{vars.$prefix}btn-color: #{helper.to-oklch($text-color)};
      --#{vars.$prefix}btn-hover-color: #{helper.to-oklch($hover-text)};
    }

    --#{vars.$prefix}btn-border-color: #{helper.to-oklch($border-color)};
    --#{vars.$prefix}btn-active-bg: #{helper.to-oklch($active-bg)};
    --#{vars.$prefix}btn-active-color: #{helper.to-oklch($active-text)};
    --#{vars.$prefix}btn-active-border-color: #{helper.to-oklch($active-border)};
    --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($hover-bg)};
    --#{vars.$prefix}btn-hover-border-color: #{helper.to-oklch($hover-border)};
    --#{vars.$prefix}btn-focus-shadow-color: #{$focus-box-shadow-color};
  }
}

// Make outlined BsButton with dark theme
//---------------------------------------
@mixin make-outline-variant-dark($name, $color) {
  .btn-outline-#{$name} {
    $box-shadow-focus: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: 10%),
        color.adjust($color, $lightness: 40%),
        25%
      )
    );
    $border-focus: helper.to-oklch(
      helper.set-color-contrast($color, colors.$gray-800, colors.$black, 25%)
    );
    $border-color: color.change(color.adjust(colors.$gray-500, $lightness: 25%), $alpha: 0.35);
    $border-hover: color.change(
      helper.set-color-contrast(
        $color,
        functions.fn-if(
          $name == 'secondary',
          color.adjust(colors.$gray-500, $lightness: 30%),
          color.adjust($color, $lightness: 10%)
        ),
        color.adjust(colors.$gray-500, $lightness: 30%),
        25%
      ),
      $alpha: 0.35
    );
    $text-color: functions.fn-if(
      $name == 'warning',
      oklch(0.91 0.11 84.51),
      helper.to-oklch(color.scale($color, $lightness: 55%))
    );
    $text-active: helper.to-oklch(
      helper.set-color-contrast($color, color.adjust($color, $lightness: -70%), colors.$white, 72%)
    );
    $bg-active: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        $color,
        color.change(color.adjust($color, $lightness: 30%), $alpha: 0.35),
        25%
      )
    );
    $bg-hover: helper.set-color-contrast(
      $color,
      color.change(color.scale($color, $lightness: 15%), $alpha: 0.125),
      color.change(color.scale($color, $lightness: 20%), $alpha: 0.14)
    );

    --#{vars.$prefix}btn-color: #{$text-color};
    --#{vars.$prefix}btn-border-color: #{helper.to-oklch($border-color)};
    --#{vars.$prefix}btn-active-bg: #{$bg-active};
    --#{vars.$prefix}btn-active-color: #{$text-active};
    --#{vars.$prefix}btn-active-border-color: #{color.change($bg-active, $alpha: 0.1)};
    --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($bg-hover)};
    --#{vars.$prefix}btn-hover-color: #{$text-color};
    --#{vars.$prefix}btn-hover-border-color: #{helper.to-oklch($border-hover)};
    --#{vars.$prefix}btn-focus-border-color: #{$border-focus};
    --#{vars.$prefix}btn-focus-shadow-color: #{$box-shadow-focus};
  }

  .#{vars.$prefix}segmented-button {
    > .btn-outline-#{$name}:not(:first-child):not(:focus-visible) {
      &:not(:disabled):not(.disabled):not(.active):not(:hover) {
        $border-color: helper.to-oklch(color.adjust(colors.$gray-500, $lightness: 25%));
        border-left-color: #{color.change($border-color, $alpha: 0.1)};
      }
    }
  }
}

// Make flat BsButton with light theme
//------------------------------------
@mixin make-flat-variant-light($name, $color) {
  .btn-flat-#{$name} {
    $focus-box-shadow-color: helper.set-color-contrast(
      $color,
      color.scale($color, $lightness: -10%),
      color.scale($color, $lightness: 10%)
    );
    $text-color: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        color.scale($color, $lightness: -15%),
        /* tune warning and info colors */ color.scale($color, $lightness: -10%),
        90%
      ),
      $color
    );
    $active-bg: helper.set-color-contrast(
      $color,
      color.change(color.scale($color, $lightness: 30%), $alpha: 0.45),
      $color,
      90%
    );
    $active-text: helper.set-color-contrast(
      $color,
      helper.set-color-contrast($color, colors.$white, color.scale($color, $lightness: -75%), 90%),
      colors.$white
    );
    $hover-bg: helper.set-color-contrast(
      $color,
      helper.set-color-contrast(
        $color,
        /* tune light colors */ color.change(color.scale($color, $lightness: 15%), $alpha: 0.3),
        color.change(color.mix($color, #fff, 25%, oklch), $alpha: 0.9),
        90%
      ),
      /* tune dark colors */ color.change(color.mix($color, #fff, 15%, oklch), $alpha: 0.75),
      25%
    );
    $hover-text: helper.set-color-contrast(
      $color,
      colors.$white,
      color.scale($color, $lightness: -30%),
      90%
    );

    @if ($name == 'secondary') {
      --#{vars.$prefix}btn-color: #{colors.$elegant-color-dark};
      --#{vars.$prefix}btn-hover-color: #{colors.$neutral-darken-4};
      --#{vars.$prefix}btn-hover-bg: oklch(0.87 0.01 253.71 / 0.9);
    } @else {
      --#{vars.$prefix}btn-color: #{helper.to-oklch($text-color)};
      --#{vars.$prefix}btn-hover-color: #{helper.to-oklch($hover-text)};
      --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($hover-bg)};
    }

    --#{vars.$prefix}btn-active-bg: #{helper.to-oklch($active-bg)};
    --#{vars.$prefix}btn-active-color: #{helper.to-oklch($active-text)};
    --#{vars.$prefix}btn-focus-shadow-color: #{helper.to-oklch($focus-box-shadow-color)};

    @if ($name == 'secondary' or $name == 'dark') {
      &.btn-close-action {
        --#{vars.$prefix}btn-color: #{helper.shift-color(colors.$elegant-color-dark, 30%)};
        --#{vars.$prefix}btn-hover-bg: oklch(0 0 0 / 0.125);
      }
    }
  }
}

// Make flat BsButton with dark theme
//-----------------------------------
@mixin make-flat-variant-dark($name, $color) {
  .btn-flat-#{$name} {
    $box-shadow-focus: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust($color, $lightness: 10%),
        color.adjust($color, $lightness: 40%),
        25%
      )
    );
    $border-focus: helper.to-oklch(
      helper.set-color-contrast($color, colors.$gray-800, colors.$black, 25%)
    );
    $text-color: helper.set-color-contrast(
      $color,
      color.change($color, $alpha: 0.8),
      color.scale($color, $lightness: 55%),
      90
    );
    $text-active: helper.set-color-contrast(
      $color,
      color.adjust($color, $lightness: -70%),
      colors.$white,
      72%
    );
    $bg-active: helper.set-color-contrast(
      $color,
      color.change($color, $alpha: 0.8),
      color.change(color.adjust($color, $lightness: 30%), $alpha: 0.35),
      25%
    );
    $bg-hover: helper.set-color-contrast(
      $color,
      color.change(color.scale($color, $lightness: 15%), $alpha: 0.125),
      color.change(color.scale($color, $lightness: 20%), $alpha: 0.2)
    );

    --#{vars.$prefix}btn-color: #{helper.to-oklch($text-color)};
    --#{vars.$prefix}btn-active-bg: #{helper.to-oklch($bg-active)};
    --#{vars.$prefix}btn-active-color: #{helper.to-oklch($text-active)};
    --#{vars.$prefix}btn-hover-bg: #{helper.to-oklch($bg-hover)};
    --#{vars.$prefix}btn-hover-color: #{helper.to-oklch($text-color)};
    --#{vars.$prefix}btn-focus-border-color: #{$border-focus};
    --#{vars.$prefix}btn-focus-shadow-color: #{$box-shadow-focus};
  }
}

// BsButton disable state with dark theme
//---------------------------------------
@mixin make-disabled-variant-dark() {
  .#{vars.$prefix}btn,
  .#{vars.$prefix}btn-fab,
  .#{vars.$prefix}btn-icon {
    $disabled-bg: helper.to-oklch(color.adjust(colors.$gray-400, $lightness: 50%));

    --#{vars.$prefix}btn-disabled-bg: #{color.change($disabled-bg, $alpha: 0.08)};
    --#{vars.$prefix}btn-disabled-color: #{colors.$neutral-base};
    --#{vars.$prefix}btn-disabled-border-color: #{color.change(colors.$gray-500, $alpha: 0.05)};

    &[class*='btn-outline'] {
      --#{vars.$prefix}btn-disabled-border-color: #{color.change(colors.$gray-500, $alpha: 0.3)};
    }
  }
}