@use "../../../../variables/index" as *;

@use "../../../../variables/dlt-c8y-icons-vars";
@use "../../../animations/component-animations";
@use "../../../core/buttons/buttons";
@use "../../../mixins/tab-focus";

/**
 * C8Y List Group - Modern list component with flexible layouts
 *
 * Note: Uses $size-* tokens for spacing, $size-base for calculations, and $component-padding.
 *
 * Intentionally hardcoded values:
 * - Off-token spacing (6px): Triangle and badge offsets not in token system
 * - Border widths (1px): Standard borders
 * - Negative offsets (-1px, -2px): Fine-tuning
 * - Percentages (100%): Layout
 * - Line-height values: Text alignment
 * - Transition durations: Animation timing
 * - Box-shadow values: Borders and elevation
 * - RGBA values: Transparency
 * - Z-index values: Stacking order
 */

.c8y-list {
  &__group {
    margin: 0;
    padding: 0;
    list-style: none;

    &:not(.dropdown-menu) {
      display: block;
    }

    &.separator-top {
      // spacing for proper displaying of the border
      padding-top: 1px;
    }

    &.dropdown-menu {
      width: 100%;
      max-height: 240px;
      overflow-y: auto;
    }
  }

  &__item {
    display: block;
    background-color: $component-background-default;
    color: $component-color-default;
    box-shadow: inset 0 -1px 0 $component-border-color;

    [class*='bg-level-'] & {
      background-color: inherit;
    }

    .c8y-list__item__title {
      white-space: normal;
      word-break: break-word;
    }

    .card &,
    .dropdown & {
      box-shadow: inset 0 -1px 0 0 $component-border-color;
      margin-bottom: 0;
    }

    &.highlighted {
      background-color: var(--brand-80, var(--c8y-brand-80));
    }
    &.selected{
      border-left: $size-4 solid $component-color-active;
      background-color: $component-background-default;
    }
    /* typeahead dropdown list items styling */
    &:has(.c8y-list__item__btn:focus) {
      outline: 2px solid $component-color-focus;
      outline-offset: -2px;
      border-radius: $component-border-radius-focus !important;
    }
    bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
      &.active,
      &.selectable:not(:has(c8y-li-checkbox)):active {
        color: $component-color-active;

        .c8y-list__item__body {

          &:after{
            display: inline-block;
            text-transform: none;
            font-weight: normal;
            font-style: normal;
            font-variant: normal;
            font-family: '@{icon-font-family}' !important;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            float: right;
            content:  dlt-c8y-icons-vars.$dlt-c8y-icon-check;
            font-size: 18px;
          }
        }
      }

      /**
       * $Carlos: There are items that are not selectable that
       * don't get that class. E.g. the "No results found" item.
       **/
      &.selectable:hover:not(.active), &.highlighted {
        background-color: $component-background-hover;
      }

      &:focus {
        outline: 2px solid $component-color-focus;
        outline-offset: -2px;
        border-radius: $component-border-radius-focus !important;
      }
    }
    &.empty-actions{
      .c8y-list__item__body {
        padding-right: 0 !important;
        margin-right: 40px;
      }
    }
    &.selectable.active{
      .c8y-list__item__body {
        &:after{
          display: inline-block;
          text-transform: none;
          font-weight: normal;
          font-style: normal;
          font-variant: normal;
          font-family: "dlt-c8y-icons" !important;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;

          float: right;
          content:  dlt-c8y-icons-vars.$dlt-c8y-icon-check;
        }
      }
      color: $component-color-active;
    }
    &:not(.selectable){
      transition: border-left 0.15s linear;
    }
    &.active:not(.selectable){
      border-left: $size-4 solid $component-color-active;
    }

    &.disabled {
      opacity: $component-disabled-opacity;
      pointer-events: none;
    }

    > .expanded,
    &.expanded {
      background-color: $component-background-expanded;
      @extend .separator-bottom !optional;
      --c8y-nav-tabs-background-active: #{$component-background-expanded};

      .c8y-list__item__title {
        font-weight: 500;
      }

      .sticky-top {
        background-color: inherit;
      }
    }

    &--empty-actions {
      padding-right: $size-40;

      .c8y-list__item__body {
        padding-right: 0 !important;
      }
    }
    &--overflow-visible {
      .c8y-list__item__body {
        overflow: visible!important;
      }
    }

    &.has-error {
      box-shadow: inset 0 -2px 0 $alert-danger-border;
    }

    .c8y-list__group--strip & {
      &:nth-child(odd) {
        background-image: $component-background-odd;
      }
    }

    // don't display the bottom border in the last item when inside a card
    .no-border-last & {
      &:last-child {
        box-shadow: none;
      }
    }

    .no-border-2nd-last & {
      &:nth-last-child(2) {
        box-shadow: none;
      }
    }

    &--double-actions {
      .c8y-list__item__actions {
        min-width: 80px;
      }
    }

    // hide collapse-btn when displaying in a modal for instance
    &--no-expand {
      > div > .c8y-list__item__block > .c8y-list__item__actions >
      .collapse-btn {
        display: none;
        pointer-events: none;
      }
    }
    &__btn{
      @include buttons.btn-clean();
      white-space: normal;
      &:focus{
        outline: none;
      }
    }
    &--link {
      cursor: pointer;

      &:hover {
        color: $component-color-link-hover;
      }

      &:focus {
        outline: 2px solid $component-color-focus;
        outline-offset: -2px;
        border-radius: $component-border-radius-focus !important;
      }
    }
  }


  &--pulse {
    @include component-animations.component-pulse();
  }
}

a.c8y-list__item {
  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: 2px solid $component-color-focus;
    outline-offset: -2px;
    border-radius: $component-border-radius-focus !important;
  }
}

c8y-load-more.c8y-list__item {
  .btn {
    margin-top: $size-8;
    margin-bottom: $size-8;
  }
}

.c8y-list__item__block {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;

  &.sticky-top {
    background-color: unset;
  }

  // remove marging bottom from progress bar
  .progress {
    margin-top: 3px;
    margin-bottom: 0;
  }
}

.block-sticky-top > div > .c8y-list__item__block {
  position: sticky;
  top: 0;
  z-index: 120;
  background-color: inherit;
}

c8y-li-drag-handle, c8y-list-item-drag-handle {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.25s ease;

  c8y-li-drag-handle, c8y-list-item-drag-handle {
    padding: 0 !important;
    cursor: move;
    max-width: fit-content !important;
  }

  &[cdkdraghandle] {
    cursor: move;

    &:hover {
      color: $component-brand-primary;
    }
  }

  + c8y-li-checkbox{
    padding-left: 0;
  }
  .cdk-drag-disabled & {
    display: none;

    + * {
      padding-left: 0 !important;
    }
    + c8y-li-checkbox {
      padding-left: $size-16!important;
    }
  }
}

.no-card-context {
  .c8y-list__item{
    c8y-li-drag-handle:not(.cdk-drag-disabled) + * {
      padding-left: 0;
    }

    c8y-list-item-drag-handle:not(.cdk-drag-disabled) + * {
      padding-left: 0;
    }
  }
}

.c8y-list__item:hover {
  c8y-li-drag-handle:not(:empty) {
    max-width: 100px;
    padding-left: $size-8;
  }

  c8y-list-item-drag-handle:not(:empty) {
    max-width: 100px;
    padding-left: $size-8;
  }
}

.c8y-list__item__actions {
  display: flex;
  padding: $size-base 0;

  .c8y-dropdown,
  .collapse-btn {
    opacity: $component-actions-opacity;
    min-width: $size-40;

    &:hover {
      opacity: 1;
      color: $component-color-link-hover;
      outline: 2px solid $component-color-focus;
      outline-offset: -2px;
    }

    &:focus {
      @include tab-focus.c8y-focus-inset();
      opacity: 1;
    }

    &.disabled,
    &[disabled] {
      color: $component-color-disabled;

      &:hover {
        opacity: 0.5;
        pointer-events: auto !important;
        cursor: not-allowed !important;
      }
    }
  }
}

.c8y-list__item__icon,
.c8y-list__item__check,
.c8y-list__item__appicon,
.c8y-list__item__radio,
.c8y-list__item__colorpicker {
  padding: $component-padding;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .c8y-list__item__body & {
    min-height: auto;
  }
}

// sizing constraints
.c8y-list__item__icon,
.c8y-list__item__check,
.c8y-list__item__appicon,
.c8y-list__item__radio,
.c8y-list__item__colorpicker,
.c8y-list__item__actions {
  min-height: 56px;
  bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-list__item--dense & {
    min-height: 36px;
    padding-top: $size-base;
    padding-bottom: $size-base;
  }
}

.c8y-list__item__body {
  padding-top: calc($size-base + $size-10);
  padding-bottom: calc($size-base + $size-10);
  /**
   * $Carlos: Would be nice to not only have the dense class
   * pm the list but also on the list items if [dense] is set.
   **/
  .dropdown-menu &, .c8y-list__item--dense & {
    padding-top: $size-base;
    padding-bottom: $size-base;
  }

}

.card,
.modal,
.cdk-drag {
  .c8y-list__item__icon,
  .c8y-list__item__check,
  .c8y-list__item__appicon,
  .c8y-list__item__radio,
  .c8y-list__item__colorpicker,
  .c8y-list__item__actions {
    min-height: $size-40;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .c8y-list__item__actions {
    padding-top: 0;
    padding-bottom: 0;
  }

  .c8y-list__item__body {
    padding-top: $size-10;
    padding-bottom: $size-10;
  }
}

//----

.c8y-list__item__check,
.c8y-list__item__radio {
  justify-content: center;

  .c8y-checkbox,
  .c8y-radio {
    line-height: 1.3;
  }
}

.c8y-list__item__appicon {
  font-size: 36px;
}

.c8y-list__item__icon {
  font-size: $size-20;
  color: $component-icon-color;
  min-height: $size-40;
  line-height: $line-height-computed;

  > device-status {
    line-height: 1;
  }

  &.changeIcon {
    position: relative;

    > button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }

    &:hover {
      > button {
        opacity: 1;
      }
    }
  }
}

.c8y-list__item__body {
  flex-grow: 1;
  display: block;
  text-overflow: ellipsis;
  min-width: 0;

  &:last-child {
    padding-right: $component-padding;
  }

  &:first-child {
    padding-left: $component-padding;
  }
}

.c8y-list__item__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: $font-size-small;
  line-height: 1.2;

  > * {
    padding: 0.5rem 0 0 0;
  }
  > c8y-li-footer{
    width: 100%;
  }
}

.c8y-list__item__collapse {
  width: 100%;
}

.c8y-list__item__collapse--container {
  padding: $component-padding;
  @media (min-width: $screen-md-min) {
    padding: $component-padding calc($size-48 + 6px) 2rem;
  }
  .full-w-collapse &{
    padding: $component-padding;
  }
}

// handling sticky elements

.card-header.sticky-top {
  z-index: 100;

  + .c8y-list__group .c8y-list__item__block.sticky-top {
    top: 48px;
  }
}

.c8y-list__item--sticky-top{
  .c8y-list__item__block{
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: inherit;
    &:has(.dropdown.open){
      z-index: 11;
    }
  }
  .c8y-list__item__collapse--container{
    position: relative;
    z-index: 8;
  }
}

// TIMELINE LIST
.c8y-list--timeline {
  box-shadow: none;
  // --c8y-component-background-default: $palette-high;
  >.c8y-list--timeline__item {
    &:first-child::before {
      top: 50%;
    }

    &:last-of-type::before {
      bottom: 50%;
    }
  }
  .c8y-list--timeline__item {
    position: relative;
    align-items: center;
    box-shadow: none;
    &:focus-within, &:has(.dropdown.open) {
      z-index: 10;
    }
    &::after {
      transition: all 1s linear 0.25s;
    }

    .c8y-list__item {
      background: $component-background-default;
      max-width: calc(100% - 106px);

      &::after {
        transition: inherit;
      }
    }

    .c8y-list__item__body {
      padding-right: $component-padding;
    }

    &.ng-enter {
      &:after {
        transition: none;
        background: $component-realtime-added !important;
      }

      .c8y-list__item {
        transition: none;
        background: $component-realtime-added !important;

        &::after {
          border-color: transparent $component-realtime-added transparent transparent;
        }
      }
    }

    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 1px;
      left: 80px;
      border: 1px dotted $component-border-color;
      content: '';
      transition: top 0.35s linear;
    }
    //TODO: need to fix this when using the virtual scroll, for now let's leave it as is
    // &:first-child::before {
    //   top: 50%;
    // }

    // &:last-of-type::before {
    //   bottom: 50%;
    // }
    &::after {
      position: absolute;
      top: 50%;
      left: 80px;
      z-index: 3;
      margin: calc(-1 * $size-10) 0 0 -6px;
      width: calc($size-base * 1.5);
      height: calc($size-base * 1.5);
      border-radius: 50%;
      background-color: transparent;
      content: '';
      transition: all 0.25s linear;
      border: 6px double $gray-50;
    }

    &,
    &.expanded {
      background-color: transparent;
      display: flex;
      flex-flow: row nowrap;
    }

    &.expanded {
      .c8y-list__item__title {
        font-weight: 500;
      }

      &::after {
        background-color: $component-color-active;
        border-color: $component-color-active;
      }

      .c8y-list__item {
        background: $component-background-expanded;

        &::after {
          border-color: transparent $component-background-expanded transparent transparent;
        }
      }
    }
  }

  .c8y-list--timeline__item__date {
    margin-left: 1px;
    margin-right: $size-40;
    width: 64px;
    font-size: $font-size-xs;
    line-height: 1.2;
    text-align: right;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    color: $component-icon-color;

    &::first-line {
      font-weight: bold;
      font-size: $font-size-xs;
    }
  }

  .c8y-list__item__block {
    padding: 0 0 0 $component-padding;
  }

  .c8y-list__item {
    position: relative;
    overflow: visible;
    flex-grow: 1;
    margin-top: 0;
    margin-bottom: $size-8;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 1px $component-border-color;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.15s linear !important;
    &:focus-within {
      z-index: 10;
    }

    &:not(:has(>button))::before {
      position: absolute;
      top: 50%;
      left: calc(-1 * $size-10);
      margin-top: calc(-1 * $size-10);
      width: 0;
      height: 0;
      border-width: $size-10 $size-10 $size-10 0;
      border-style: solid;
      border-color: transparent $component-border-color transparent transparent;
      content: '';
      transition: border-color 0.15s linear !important;
    }

    &:not(:has(>button))::after {
      position: absolute;
      top: 50%;
      left: calc(-1 * $size-8);
      margin-top: calc(-1 * $size-10);
      width: 0;
      height: 0;
      border-width: $size-10 $size-10 $size-10 0;
      border-style: solid;
      border-color: transparent var(--c8y-root-component-background-default) transparent transparent;
      content: '';
      transition: border 0.15s linear !important;
    }
  }

  .c8y-list__item__actions {
    margin-right: 0; //calc($component-padding * -1);
  }

  .c8y-list__item__icon,
  .c8y-list__item__check,
  .c8y-list__item__radio {
    padding-left: 0;
  }
  .c8y-list--timeline__item.active {
    &::after {
      background-color: $component-color-accent;
      border-color: $component-color-active;
    }

    .c8y-list__item {
      outline: 2px solid $component-color-accent;
      outline-offset: -2px;

      &::before {
        left: -11px;
        margin-top: -11px;
        border-width: 11px 11px 11px 0;
        border-color: transparent $component-color-accent transparent transparent;
      }
    }
  }
  &.interactive .c8y-list--timeline__item:hover:not(.active) {
    .c8y-list__item {
      box-shadow: inset 0 0 0 1px $component-color-accent;
      &::before {
        left: calc(-1 * $size-10);
        margin-top: calc(-1 * $size-10);
        border-width: $size-10 $size-10 $size-10 0;
        border-color: transparent $component-color-accent transparent transparent;
      }
      &::after {
        left: -9px;
      }
    }
  }
}