@use "../vars.scss";
@use "./case-table-shared.scss" as shared;
@use "../case-tile-common/case-tile-vars" as caseTileVars;

$table-body-font-size: 10px;
$collection-title-bar-height: 26px;
$collection-title-font-color: black;

.case-table {
  position: relative;
  width: 100%;
  height: calc(100% - vars.$title-bar-height);
  background-color: white;
  display: flex;
  flex-direction: column;

  .case-table-content {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto hidden;

    .collection-table {
      height: 100%;
      display: flex;
      align-items: stretch;

      .collection-table-and-title {
        height: 100%;
        display: flex;
        flex-direction: column;

        .collection-title-wrapper {
          position: relative;
          width: 100%;
          height: 26px;
          background-color: vars.$codap-teal-lighter;
          display: flex;
          align-items: center;
          flex-shrink: 0;

          &.color-cycle-1 {
            background-color: caseTileVars.$color-cycle-1;
          }
          &.color-cycle-2 {
            background-color: caseTileVars.$color-cycle-2;
          }
          &.color-cycle-3 {
            background-color: caseTileVars.$color-cycle-3;
          }
          &.color-cycle-4 {
            background-color: caseTileVars.$color-cycle-4;
          }
          &.color-cycle-5 {
            background-color: caseTileVars.$color-cycle-5;
          }

          .collection-title {
            position: absolute;
            text-align: center;
            font-family: "Noto Sans", sans-serif;
            font-size: 14px;
            font-weight: 500;
            text-overflow: ellipsis;
            cursor: text;
            vertical-align: middle;
            white-space: nowrap;
            user-select: none;
            font-style: italic;
            color: $collection-title-font-color;
          }

          .add-attribute-icon-button {
            background-color: transparent;
            width: 22px;
            height: 22px;
            border: none;
            position: absolute;
            padding-inline-start: 12px;
            padding-inline-end: 0;
            z-index: 6;

            .add-icon {
              visibility: hidden;
              fill: #8b8b8b;
              &.focused {
                visibility: visible;
                opacity: 0.5;
                cursor: pointer;
                &:hover {
                  opacity: 1;
                }
              }
            }
          }
        }
      }

      .collection-table-spacer-divider {
        width: 1px;
        background-color: white;
      }

      .collection-table-spacer {
        position: relative;
        width: 48px;
        height: 100%;
        background: white;
        display: flex;
        flex-direction: column;

        &.parentMost {
          width: 30px;

          .drop-message {
            left: 7px;
          }
        }

        &.active {
          border: 5px solid rgba(255, 216, 102, 0.5);

          .spacer-top {
            border-bottom: 0;
            background: white;
          }
        }

        &.over {
          background: rgba(255, 255, 0, 0.5);

          .spacer-top {
            border-bottom: 0;
            background: rgba(255, 255, 0, 0.5);
          }
        }

        .spacer-top {
          height: calc($collection-title-bar-height + vars.$header-height);
          background-color: #f9f9f9; // --rdg-header-background-color
          width: 100%;
          border-bottom: 1px solid var(--codap-colors-chakra-border-color);
          overflow: hidden;
          position: relative;
          z-index: 5; // hides the expand/collapse button when scrolled

          .expand-collapse-button {
            position: absolute;
            bottom: 6px;
            left: 3px;
          }
        }

        .spacer-mid {
          width: 100%;
          flex-grow: 1;

          .spacer-mid-layer {
            position: relative;
            width: 100%;
            height: 100%;

            &.lower-layer {
              position: absolute;
            }
          }
        }

        .expand-collapse-button {
          position: absolute;
          display: flex;
          cursor: pointer;
          width: 9px;
          height: 9px;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

          .expand-collapse-image {
            width: 9px;
            height: 9px;
            &.closed {
              background-image: url("../../assets/expand.gif");
            }
            &.open {
              background-image: url("../../assets/collapse.gif");
            }
          }
        }

        .drop-message {
          position: absolute;
          bottom: 0;
          left: 17px;
          transform: rotate(-90deg);
          transform-origin: left;
          white-space: nowrap;
          font: 12px sans-serif;
          opacity: 100%;
        }
      }
    }
  }

  .rdg {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;

    font-family: "Noto Sans", sans-serif !important;
    font-size: $table-body-font-size !important;
    color: vars.$default-font-color;
    border-radius: vars.$border-radius-bottom-corners;
    overflow-x: hidden;

    .rdg-header-row {
      line-height: 14px !important;

      .codap-column-header {
        text-align: center;
        height: shared.$header-row-height-px !important;
        &.index {
          pointer-events: none;
          cursor: auto;
        }

        .codap-column-header-content {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: vars.$default-font-color !important; //overrides chakra's default color
          font-weight: bold;
          &:hover {
            text-decoration: underline;
            color: #1b5798 !important;
          }

          input {
            height: calc(100% - 6px)
          }

          // chakra menu-button
          button {
            width: 100%;
            height: 100%;
          }

          button.codap-attribute-button.allow-two-lines > span {
            display: flex;
            flex-direction: column;

            .one-line-header {
              white-space: normal;
            }

            .two-line-header-line-1 {
              display: inline-block;
              hyphens: auto;
              overflow-wrap: break-word;
              overflow: hidden;
            }

            .two-line-header-line-2.truncated {
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              // We reverse the text in code so that the ellipsis is at the beginning of the text
              // so text is styled to show right to left, but we override the unicode bi-directionality
              // so that text is actually displayed left to right
              direction: rtl;
              unicode-bidi: bidi-override;
            }
          }
        }
      }
    }

    .rdg-row {
      input.rdg-text-editor {
        font-size: $table-body-font-size;
        font-weight: 600;
        height: 100%;
        line-height: 1.5;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        &.numeric-format {
          font-family: 'Noto Sans Mono', monospace;
          text-align: right;
        }
      }
      &.rdg-row-even {
        .codap-index-cell {
          background-color: #EEFEE3;
        }
      }
      &.rdg-row-odd {
        &[aria-selected=false] {
          background: #fafafa;
        }
        .codap-index-cell {
          background-color: #D3E9C8;
        }
      }
      &[aria-selected=true] {
        .codap-data-cell {
          background-color: var(--rdg-row-selected-background-color);
        }
      }
      &.highlight-border-top {
        .codap-data-cell, .codap-index-cell {
          border-top: 1px solid var(--rdg-selection-color);
        }
      }
      &.highlight-border-bottom {
        .codap-data-cell, .codap-index-cell {
          border-bottom-color: var(--rdg-selection-color);
        }
      }
      &.last-child-case {
        .codap-data-cell, .codap-index-cell {
          border-bottom-width: 2px;
        }
      }

    }
    .codap-index-cell-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      position: absolute;
    }
    .rdg-cell {
      // RDG.beta.17 moved all CSS inside @layers, which decreased their priority
      // so that some of Chakra's CSS takes precedence, including the gridlines.
      // These lines assert the RDG gridlines precedence ahead of Chakra's CSS.
      padding-inline: 4px;
      border-inline-end: 1px solid var(--rdg-border-color);
      border-block-end: 1px solid var(--rdg-border-color);
      display: flex;
      align-items: center;
      font-weight: 600;

      &.codap-index-cell {
        padding-inline: 0;
        text-align: center;

        .codap-index-content {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          &.collapsed {
            margin-left: 4px;
            justify-content: flex-start;
          }

          &.input-row {
            background-color: #bddfdf;
            justify-content: flex-start;
            cursor: grab;

            svg {
              margin-left: -2px;
            }
          }
        }
      }

      &.formula-column {
        background-color: rgba(255, 255, 0, 0.2);
        .cell-checkbox {
          input {
            pointer-events: none;
            opacity: 0.5;
          }
        }
      }

      &.selected {
        background-color: var(--rdg-row-selected-background-color);
      }

      &.codap-data-cell.multi-line {
        white-space: normal;
        overflow-wrap: break-word;

        .cell-span, .rdg-text-editor {
          // https://css-tricks.com/almanac/properties/l/line-clamp/
          line-height: 14.5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          font-family: "Noto Sans", sans-serif;
          font-size: $table-body-font-size;
          font-weight: 600;
        }
      }
      &.codap-data-cell.rowId-__input__ {
        cursor: text;
      }

      .cell-boundary-thumb {
        position: absolute;

        .cell-boundary-thumb-interior {
          height: 14px;
        }
      }

      .cell-span {
        width: 100%;
        height: 100%;
        font-weight: 600;

        &.numeric-format {
          width: 100%;
          font-family: 'Noto Sans Mono', monospace;
          font-size: $table-body-font-size;
          margin-top: 2px;
          text-align: right;
          color: black;
        }
      }

      .cell-color-swatch {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .cell-color-swatch-interior {
          width: calc(100% - 4px);
          height: calc(100% - 8px);
          margin-top: 0.5px;
        }
      }

      .cell-text-editor {
        font-family: 'Noto Sans', sans-serif;
        font-size: $table-body-font-size;
        font-weight: 600;
        height: 100%;
        &.numeric-format {
          font-family: 'Noto Sans Mono', monospace;
          text-align: right;
        }
      }

      .color-cell-text-editor {
        width: 100%;
        height: calc(100% - 4px);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-inline-start: 2px;

        .cell-edit-color-swatch {
          width: 12px;
          height: 12px;
          margin-right: 2px;

          .cell-edit-color-swatch-interior {
            width: 100%;
            height: 100%;
            border: 1px solid gray;
          }
        }
      }

      .cell-checkbox {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }
  }

  .codap-attribute-header-divider {
    position: absolute;
    background: black;
    opacity: 0%;
    pointer-events: none;

    &.over {
      opacity: 30%;
    }
  }

  .codap-row-divider {
    position: absolute;
    opacity: 0;
    height: 9px;
    width: 100%;
    background: black;
    cursor: row-resize;
    z-index: 1;

    &.no-row-resize {
      cursor: auto;
    }
    &.over {
      z-index: 50;
      opacity: 30%;
      pointer-events: none;
      background: black;
      cursor: grab;
    }
    &.dragging {
      cursor: grab;
    }
  }
}

.codap-menu-list {
  width: 190px;

  .menu-item {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 20px;
    padding: 0 5px 0 20px;
  }
}

// turn off `scroll-behavior: smooth` when necessary (e.g. for cypress tests)
.scroll-behavior-auto .case-table .collection-table .rdg {
  scroll-behavior: auto
}

.codap-index-content {
  font-family: 'Noto Sans Mono', monospace;
  font-size: $table-body-font-size;
  font-weight: 600;
}
