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

// BsListView variants -- scss mixins
//-----------------------------------
@mixin make-listview-variant($name, $color) {
  .list-#{$name} {
    $subheader-color: helper.set-color-contrast(
      $color,
      color.change(helper.to-oklch(color.adjust(colors.$gray-900, $lightness: 5%)), $alpha: 0.6),
      color.change(colors.$white, $alpha: 0.6)
    );

    --#{vars.$prefix}listview-bg: #{helper.to-oklch($color)};
    --#{vars.$prefix}subheader-color: #{$subheader-color};

    $tile-indicator-border-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.adjust(colors.$mdb-default-color, $lightness: -5%),
        color.adjust(helper.set-alt-bgcolor($color, 0.65), $lightness: 45%),
        86.2%
      )
    );

    --#{vars.$prefix}tile-indicator-border-color: #{helper.set-color-contrast(
        $color,
        helper.to-oklch(
          color.change(color.adjust(colors.$mdb-default-color, $lightness: -5%), $alpha: 0.9)
        ),
        $tile-indicator-border-color,
        80%
      )};

    // configure list-items color scheme
    $tile-hover-bg: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        vars.$default-hover-bgcolor,
        helper.set-color-contrast(
          $color,
          color.change(color.adjust($color, $lightness: -30%), $alpha: 0.25),
          color.change(color.adjust($color, $lightness: -20%), $alpha: 0.25),
          62.75%
        ),
        86%
      )
    );

    $tile-active-bg: helper.set-alt-bgcolor($color, 0.2);

    @if ($name == 'black') {
      $tile-hover-bg: helper.set-alt-bgcolor($color, 0.2);
      $tile-active-bg: color.change(
        helper.to-oklch(color.scale($color, $lightness: 55%)),
        $alpha: 0.3
      );
    }

    $tile-title-color: helper.set-color-contrast($color, colors.$gray-900, colors.$white);
    $tile-subtitle-color: helper.set-color-contrast(
      $color,
      colors.$gray-700,
      color.change(colors.$white, $alpha: 0.7)
    );

    $tile-leading-color: helper.set-color-contrast(
      $color,
      color.change(colors.$black, $alpha: 0.54),
      color.change(colors.$white, $alpha: 0.6)
    );

    $tile-active-title-color: helper.set-color-contrast(
      $color,
      color.change(
        helper.to-oklch(color.adjust(vars.$default-active-bgcolor, $lightness: -20%)),
        $alpha: 1
      ),
      colors.$white,
      86.2%
    );

    $tile-active-subtitle-color: helper.set-color-contrast(
      $color,
      color.change(
        helper.to-oklch(color.adjust(vars.$default-active-bgcolor, $lightness: -10%)),
        $alpha: 1
      ),
      color.change(colors.$white, $alpha: 0.77),
      86.2%
    );

    $tile-active-leading-icon-color: helper.to-oklch(
      helper.set-color-contrast(
        $color,
        color.change(vars.$default-active-bgcolor, $alpha: 0.54),
        color.change(colors.$white, $alpha: 0.75),
        86.2%
      )
    );

    .#{vars.$prefix}list-tile {
      --#{vars.$prefix}tile-action-color: #{$tile-leading-color};
      --#{vars.$prefix}tile-leading-color: #{$tile-leading-color};
      --#{vars.$prefix}tile-leading-icon-color: #{$tile-leading-color};
      --#{vars.$prefix}tile-title-color: #{$tile-title-color};
      --#{vars.$prefix}tile-subtitle-color: #{$tile-subtitle-color};
      --#{vars.$prefix}tile-hover-bg: #{$tile-hover-bg};

      --#{vars.$prefix}tile-active-bg: #{$tile-active-bg};
      --#{vars.$prefix}tile-active-action-color: #{$tile-active-leading-icon-color};
      --#{vars.$prefix}tile-active-leading-color: #{$tile-active-title-color};
      --#{vars.$prefix}tile-active-leading-icon-color: #{$tile-active-leading-icon-color};
      --#{vars.$prefix}tile-active-title-color: #{$tile-active-title-color};
      --#{vars.$prefix}tile-active-subtitle-color: #{$tile-active-subtitle-color};
    }

    $divider-color: helper.set-color-contrast(
      $color,
      colors.$gray-300,
      color.change(colors.$white, $alpha: 0.18),
      86.2%
    );

    .#{vars.$prefix}list-nav {
      $nav-item-expanded-bg: helper.set-alt-bgcolor($color);

      --#{vars.$prefix}nav-item-color: #{$tile-title-color};
      --#{vars.$prefix}nav-item-divider-color: #{$divider-color};
      --#{vars.$prefix}nav-item-icon-color: #{$tile-leading-color};
      --#{vars.$prefix}nav-item-active-bg: #{$tile-active-bg};
      --#{vars.$prefix}nav-item-active-color: #{$tile-active-title-color};
      --#{vars.$prefix}nav-item-active-icon-color: #{$tile-active-leading-icon-color};
      --#{vars.$prefix}nav-item-expanded-bg: #{$nav-item-expanded-bg};
      --#{vars.$prefix}nav-item-hover-bg: #{$tile-hover-bg};
    }

    .#{vars.$prefix}divider {
      --#{vars.$prefix}divider-color: #{$divider-color};
    }
  }
}