/*
 * Copyright 2023 Harness, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.main {
  --border-color: var(--grey-200);
  --line-height: 17.3438px;

  // TODO: Restyle DiffView to match latest design
  // https://www.figma.com/file/PgBvi804VdQNyLS8fD9K0p/Code?node-id=9391%3A118114&mode=dev
  --bg-selected-line-number: #ccf8a5;
  --bg-selected-line-content: #e7f8b5fc;

  --bg-line-added: var(--green-100);
  --bg-change-added: var(--green-300);
  --bg-line-deleted: var(--red-100);
  --bg-change-deleted: var(--red-200);
  --bg-hunk: var(--grey-100);
  --fg-hunk: var(--grey-700);

  border-radius: 5px;
  min-height: 36px;

  :global {
    .d2h-wrapper > div {
      margin-bottom: 0;
    }

    .d2h-file-wrapper {
      border: 0;

      .d2h-diff-tbody {
        &,
        tr {
          position: relative;

          // Use content-visibility to optimize for rendering performance
          // Ref:
          //  - https://web.dev/articles/content-visibility
          //  - https://web.dev/articles/dom-size-and-interactivity
          &,
          .d2h-code-line-ctn > * {
            content-visibility: auto;
            contain-intrinsic-size: auto var(--line-height);
          }

          // Reduce pointer events on diff line DOM elements to avoid
          // browser hit test. When the number of DOM elements is huge,
          // browsers have to spend too much time on hit test causing unresponsivenss
          // Ref: https://stackoverflow.com/questions/41830529/optimizing-native-hit-testing-of-dom-elements-chrome
          .d2h-code-line-ctn {
            width: auto;

            & > * {
              pointer-events: none;
            }
          }

          &[data-annotated-line] {
            background-color: var(--white);

            & + [data-annotated-line] {
              [data-comment-thread-id] {
                padding-top: 0;
              }
            }
          }
        }

        tr {
          &:has(.d2h-del) {
            background-color: var(--bg-line-deleted);
          }

          &:has(.d2h-ins) {
            background-color: var(--bg-line-added);
          }

          &:has(.d2h-emptyplaceholder) {
            background-color: #f1f1f1;
          }
        }

        .d2h-info {
          background-color: var(--bg-hunk);
          color: var(--fg-hunk);
          line-height: 26px;
        }

        .d2h-code-linenumber {
          width: auto;
          display: flex;
          padding: 0 5px;

          .line-num1,
          .line-num2 {
            flex-basis: 100%;
            width: auto;
            text-overflow: initial;
            overflow: visible;
            display: inline-block;
            padding: 0 10px;
          }
        }
      }

      .d2h-code-line,
      .d2h-code-side-line {
        .d2h-code-line-ctn {
          ins {
            background-color: var(--bg-change-added);
          }

          del {
            background-color: var(--bg-change-deleted);
          }
        }
      }

      .d2h-file-diff :is(.d2h-del.d2h-change, .d2h-ins.d2h-change) {
        background-color: transparent;
      }

      // Line number background - kind of distracted
      // td:is(.d2h-code-side-linenumber, .d2h-code-linenumber).d2h-del {
      //   background-color: var(--bg-change-deleted);
      // }

      &.line-by-line-file-diff {
        .d2h-code-line {
          padding: 0 4px;
        }

        [data-annotation-for-line] {
          right: -25px;
          top: 4px;
        }

        [data-selected-indicator] {
          top: 0;
          right: -8px;
        }
      }

      &.side-by-side-file-diff {
        .d2h-code-line {
          padding: 0 70px;
        }

        .d2h-code-side-line {
          padding: 0 6px;
        }

        .d2h-code-side-linenumber.d2h-info {
          pointer-events: none;
        }

        [data-content-for-line-number] {
          padding-left: 2px;
        }
      }

      .d2h-code-side-linenumber,
      .d2h-code-linenumber {
        position: sticky;
        left: 0;
        z-index: 2;
        overflow: visible;
        line-height: 20px;
      }

      .d2h-code-side-line {
        position: relative;
        padding: 0;
      }

      tr {
        td:first-of-type {
          z-index: 2;
        }

        td:last-of-type > div {
          z-index: 0;
        }

        [data-annotation-for-line] {
          height: 14px;
          width: 14px;
          font-weight: 600;
          background: var(--primary-7);
          color: var(--white);
          text-align: center;
          border-radius: 5px;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          user-select: none;
          position: absolute;
          top: -11px;
          right: -26px;
          display: none;
          transform: scale(1.1);
          transition: transform 0.75s;
        }

        [data-selected-indicator] {
          height: 20px;
          width: 4px;
          background-color: var(--primary-7);
          position: absolute;
          top: -15px;
          right: -9px;
          display: none;
        }

        &.selected,
        &:has(.selected) {
          td {
            &:first-of-type {
              background-color: var(--bg-selected-line-number) !important;
              border-color: var(--primary-7) !important;
            }

            &:last-of-type,
            *:not(
                span[data-annotation-for-line],
                span[data-selected-indicator],
                [data-comment-thread-id],
                [data-comment-thread-id] *
              ) {
              background-color: var(--bg-selected-line-content) !important;
            }

            [data-selected-indicator] {
              display: inline-block;
            }
          }
        }

        &:hover [data-annotation-for-line] {
          display: flex;

          &:hover {
            transform: scale(1.3);
          }
        }

        &:has([data-annotated='true'] [data-content-for-line-number]),
        &:has([data-content-for-line-number='']),
        &:has(.d2h-emptyplaceholder[data-content-for-line-number='']) {
          &,
          :hover {
            [data-annotation-for-line] {
              pointer-events: none;
              display: none;
            }
          }
        }
      }

      [data-content-for-line-number] {
        cursor: default;
        width: 100%;
        padding-left: 4px;
        height: 17.3438px !important;
      }
    }

    .d2h-file-header {
      display: none;
    }

    .d2h-files-diff {
      .d2h-code-side-linenumber {
        border-left: 0;
      }
    }

    .d2h-file-side-diff {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .d2h-code-side-linenumber {
      width: 64px;
    }
  }

  &.readOnly {
    :global {
      .d2h-file-wrapper {
        .d2h-diff-tbody {
          tr:hover [data-annotation-for-line] {
            display: none !important;
          }

          .d2h-code-side-linenumber,
          .d2h-code-linenumber {
            cursor: default;
          }
        }
      }
    }
  }

  &.collapsed {
    .diffHeader {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .diffContent {
      display: none;
    }
  }

  .diffHeader {
    display: grid;
    align-items: center;
    background-color: var(--white);
    position: sticky;
    top: var(--diff-viewer-sticky-top, 0);
    z-index: 1;
    padding: 5px 10px 5px 5px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04);
    z-index: 4;

    .fnamePopover {
      display: flex;
    }

    .chevron {
      align-self: center;
      height: 24px;
      width: 24px;
    }

    .fname {
      align-self: center;
      align-items: center;
      text-align: left;

      a {
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;

        color: var(--grey-700);

        &:hover {
          color: var(--primary-7) !important;
        }
      }
    }

    .expandCollapseDiffBtn {
      transform: translateX(-5px);

      > span {
        display: flex;
      }
    }

    .addedLines {
      align-self: center;
      min-width: 36px;
      height: 18px;
      background: var(--green-50);
      border-radius: 2px;
      padding: 0px 8px 0px 8px;

      font-size: 13px;
      font-weight: 600;
      line-height: 18px;
      text-align: center;
      color: var(--green-800);
    }

    .deletedLines {
      align-self: center;
      min-width: 36px;
      height: 18px;
      background: var(--red-50);
      border-radius: 2px;
      padding: 0px 8px 0px 8px;

      font-size: 13px;
      font-weight: 600;
      line-height: 18px;
      text-align: center;
      color: var(--red-800);
    }

    .fileChanged {
      align-self: center;
      height: 28px;
      width: 184px;
      background: var(--orange-50);
      border-radius: 4px;

      margin-top: 2px;
      margin-right: 8px;

      font-size: 13px;
      font-weight: 600;
      line-height: 28px;
      text-align: center;
      color: var(--orange-500);
    }

    .viewLabel {
      display: flex;
      background: var(--grey-100);
      height: 28px;
      padding: 0 8px;
      align-items: center;

      font-size: 13px;
      font-weight: 500;
      line-height: 28px;
      border-radius: 4px;
      text-align: center;
      color: var(--black);

      margin-top: 2px;

      // avoid text being selected when user presses button twice
      user-select: none;
      cursor: pointer;

      input {
        display: inline-block;
        margin-right: var(--spacing-small);
      }
    }
  }

  .diffContent {
    box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04);
    z-index: 3;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    max-width: calc(var(--page-container-width) - 48px);

    &.hidden {
      height: var(--block-height);
      content-visibility: auto;
      contain-intrinsic-size: auto var(--line-height);

      * {
        display: none !important;
      }
    }
  }
}

.popover {
  :global {
    .bp3-popover-content {
      padding: var(--spacing-medium);
      max-width: 700px;
      word-break: break-all;
    }
  }
}

.selectoSelection {
  display: none !important;
}