@use '../scss/global.scss';
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/elevation.scss';
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';

// ==== mixins ====
@mixin state-colors($bg, $text, $icon: null) {
  background-color: $bg;

  .menu-item-inner-el {
    color: $text;
  }

  @if $icon != null {
    slot[name='icon']::slotted(span),
    .check-icon {
      color: $icon;
    }
  }
}

@mixin disabled-common($bg-default) {
  color: var(--kd-color-text-level-disabled);

  .menu-item-inner-el {
    color: var(--kd-color-text-level-disabled);
  }

  &,
  & * {
    cursor: not-allowed;
  }

  pointer-events: none;
  user-select: none;
  touch-action: none;

  &,
  &:hover,
  &:focus,
  &:focus-within,
  &:focus-visible,
  &:active {
    background-color: $bg-default;
    border-color: transparent;
  }

  slot[name='icon']::slotted(span),
  .check-icon {
    color: var(--kd-color-icon-disabled);
  }
}

@mixin pressed($bg, $text, $icon, $layered: true) {
  @if $layered {
    background: $bg;
  } @else {
    background-color: $bg;
  }

  border-color: transparent;
  .menu-item-inner-el {
    color: $text;
  }

  slot[name='icon']::slotted(span),
  .check-icon {
    color: $icon;
  }
}

// ==== defaults ====
.menu-item {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  border: 1px solid transparent;
  background-clip: padding-box;

  background-color: var(--kd-color-background-menu-state-default);
  transition: background-color 150ms ease-out;
  outline-offset: -1px;

  .menu-item-inner-el {
    color: var(--kd-color-text-level-primary);
    transition: color 150ms ease-out;
  }

  .check-icon {
    color: var(--kd-color-icon-primary);
  }

  &:not(:hover) {
    &:focus,
    &:focus-within,
    &:focus-visible {
      outline: 1px solid var(--kd-color-border-variants-focus);
      background-color: var(--kd-color-background-menu-state-focused);
      border-color: transparent;
    }
  }

  &[disabled] {
    @include disabled-common(var(--kd-color-background-menu-state-default));
  }

  &[readonly] {
    cursor: default;
    background-color: var(--kd-color-background-menu-state-default);

    &:hover,
    &:active,
    &:focus,
    &:focus-visible {
      background-color: var(--kd-color-background-menu-state-default);
      border-color: transparent;
    }

    .menu-item-inner-el {
      color: var(--kd-color-text-level-primary);
    }

    .check-icon,
    slot[name='icon']::slotted(span) {
      color: var(--kd-color-icon-primary);
    }
  }

  &[selected]:not([disabled]):not([readonly]):not(.destructive) {
    @include state-colors(
      var(--kd-color-background-menu-state-open),
      var(--kd-color-text-level-primary)
    );
  }

  &.ai-connected {
    background-color: var(--kd-color-background-menu-state-ai-default);
    color: var(--kd-color-text-level-primary);

    &:hover:not(:active):not([disabled]):not([readonly]) {
      background-color: var(--kd-color-background-menu-state-ai-hover);

      .menu-item-inner-el {
        color: var(--kd-color-text-level-primary);
      }

      slot[name='icon']::slotted(span),
      .check-icon {
        color: var(--kd-color-icon-primary);
      }
    }

    &[highlighted] {
      background-color: var(--kd-color-background-menu-state-ai-focused);
    }

    &[selected]:not([disabled]):not([readonly]):hover:not(:active),
    &[highlighted]:not([disabled]):not([readonly]):hover:not(:active) {
      @include state-colors(
        var(--kd-color-background-menu-state-ai-hover),
        var(--kd-color-text-level-primary),
        var(--kd-color-icon-primary)
      );
    }

    &[disabled] {
      @include disabled-common(
        var(--kd-color-background-menu-state-ai-default)
      );
    }
  }
}

/* --- generic (non-destructive) states --- */
.menu-item:hover:not(:active):not([disabled]):not([readonly]):not(
    .destructive
  ):not(.ai-connected) {
  @include state-colors(
    var(--kd-color-background-menu-state-hover),
    var(--kd-color-text-level-light),
    var(--kd-color-icon-light)
  );
}

.menu-item[selected]:not([disabled]):not([readonly]):hover:not(:active):not(
    .destructive
  ):not(.ai-connected) {
  @include state-colors(
    var(--kd-color-background-menu-state-hover),
    var(--kd-color-text-level-light),
    var(--kd-color-icon-light)
  );
}

.menu-item:active:not(.destructive):not(.ai-connected):not([disabled]):not(
    [readonly]
  ),
.menu-item[data-pressed]:not(.destructive):not(.ai-connected):not(
    [disabled]
  ):not([readonly]),
.menu-item[selected]:active:not(.destructive):not(.ai-connected):not(
    [disabled]
  ):not([readonly]),
.menu-item[selected][data-pressed]:not(.destructive):not(.ai-connected):not(
    [disabled]
  ):not([readonly]),
.menu-item[highlighted]:active:not(.destructive):not(.ai-connected):not(
    [disabled]
  ):not([readonly]),
.menu-item[highlighted][data-pressed]:not(.destructive):not(.ai-connected):not(
    [disabled]
  ):not([readonly]),
.menu-item[highlighted]:not(.destructive):not(.ai-connected):not(
    [disabled]
  ):not([readonly]) {
  @include pressed(
    var(--kd-color-background-menu-state-pressed),
    var(--kd-color-text-level-light),
    var(--kd-color-icon-light),
    $layered: true
  );
}

/* --- pressed states (AI) --- */
.menu-item.ai-connected:active:not([disabled]):not([readonly]),
.menu-item.ai-connected[data-pressed]:not([disabled]):not([readonly]),
.menu-item.ai-connected:hover:active:not([disabled]):not([readonly]),
.menu-item.ai-connected:hover[data-pressed]:not([disabled]):not([readonly]) {
  @include pressed(
    var(--kd-color-background-menu-state-ai-pressed),
    var(--kd-color-text-level-primary),
    var(--kd-color-icon-primary),
    $layered: true
  );
}

/* --- destructive variant --- */
.menu-item.destructive {
  color: var(--kd-color-badge-light-text-error);
  border-top: 1px solid var(--kd-color-border-level-tertiary);
  background-color: var(--kd-color-background-menu-state-default);

  .menu-item-inner-el {
    color: var(--kd-color-badge-light-text-error);
  }

  &:hover:not(:active):not([disabled]):not([readonly]) {
    border-top: 1px solid var(--kd-color-border-level-tertiary);
    background-color: var(
      --kd-color-background-button-primary-destructive-hover
    );

    .menu-item-inner-el {
      color: var(--kd-color-text-level-light);
    }
  }

  &:focus,
  &:focus-within,
  &:focus-visible {
    outline-color: var(--kd-color-border-variants-destructive);
    background-color: var(
      --kd-color-background-button-primary-destructive-focused
    );
    color: var(--kd-color-text-level-light);
    border-top: 1px solid transparent;

    .menu-item-inner-el {
      color: var(--kd-color-text-level-light);
    }
  }

  &:active:not([disabled]):not([readonly]),
  &[data-pressed]:not([disabled]):not([readonly]) {
    @include pressed(
      var(--kd-color-background-button-secondary-destructive-pressed),
      var(--kd-color-text-level-light),
      var(--kd-color-text-level-light),
      $layered: true
    );
  }
}

/* --- destructive + disabled --- */
.menu-item.destructive[disabled] {
  @include disabled-common(var(--kd-color-background-menu-state-default));
}