@use 'sass:map';
@use 'node_modules/ag-grid-community/styles' as ag;
@use 'libs/components/theme/src/lib/styles/variables' as variables;
@use './ag-grid-extra' as ag-grid-extra;
@use './variables' as sky-ag-grid-variables;

$defaultsForAllThemes: (
  card-shadow: none,
  checkbox-background-color: transparent,
  grid-size: 4px,
  header-column-resize-handle-color: var(--sky-border-color-neutral-medium),
  header-column-resize-handle-display: block,
  header-column-resize-handle-height: 100%,
  header-column-separator-color: var(--sky-border-color-neutral-medium),
  header-column-separator-display: block,
  header-column-separator-height: 100%,
  icon-size: 12px,
  input-disabled-background-color: transparent,
  input-focus-border-color: transparent,
  input-focus-box-shadow: none,
  invalid-color: variables.$sky-background-color-danger-dark,
  popup-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
  selected-row-background-color: var(--sky-background-color-selected),
  tooltip-background-color: var(--sky-background-color-neutral-light),
);

$defaultsForDataEntryGrid: (
  cell-horizontal-border: 1px solid var(--ag-border-color),
  odd-row-background-color: var(--sky-background-color-page-default),
  popup-shadow: none,
);

$defaultThemeBase: map.merge(
  $defaultsForAllThemes,
  (
    icon-font-family: 'agGridAlpine',
    background-color: variables.$sky-color-gray-01,
    border-color: variables.$sky-border-color-neutral-medium,
    cell-horizontal-padding: 12px,
    font-family: variables.$sky-font-family,
    font-size: 15px,
    foreground-color: variables.$sky-text-color-default,
    header-background-color: variables.$sky-background-color-page-default,
    header-height: 37px,
    input-focus-border-color: variables.$sky-highlight-color-info,
    row-border-color: variables.$sky-border-color-neutral-medium,
    row-height: 38px,
    odd-row-background-color: variables.$sky-background-color-page-default,
    range-selection-border-color: variables.$sky-highlight-color-info,
    secondary-foreground-color: variables.$sky-text-color-deemphasized,
  )
);

$modernLightThemeBase: map.merge(
  $defaultsForAllThemes,
  (
    icon-font-family: 'agGridBalham',
    border-color: variables.$sky-theme-modern-border-color-neutral-medium,
    cell-horizontal-padding: 12px,
    font-family: variables.$sky-font-family,
    font-size: 16px,
    foreground-color: variables.$sky-text-color-default,
    header-background-color:
      variables.$sky-theme-modern-background-color-page-default,
    header-height: 60px,
    input-focus-border-color:
      variables.$sky-theme-modern-border-color-primary-dark,
    row-border-color: variables.$sky-theme-modern-border-color-neutral-medium,
    row-height: 60px,
    range-selection-border-color:
      variables.$sky-theme-modern-border-color-primary-dark,
    secondary-foreground-color:
      variables.$sky-theme-modern-font-deemphasized-color,
  )
);

$modernDarkThemeBase: map.merge(
  $defaultsForAllThemes,
  (
    icon-font-family: 'agGridBalham',
    extend-theme: 'alpine-dark',
    cell-horizontal-padding: 12px,
    font-family: variables.$sky-font-family,
    font-size: 16px,
    header-height: 60px,
    row-height: 60px,
  )
);

$modernThemeCompact: (
  font-size: 16px,
  header-height: 32px,
  row-height: 32px,
);
$modernLightThemeCompact: map.merge($modernLightThemeBase, $modernThemeCompact);
$modernDarkThemeCompact: map.merge($modernDarkThemeBase, $modernThemeCompact);

@include ag.grid-styles(
  (
    suppress-native-widget-styling: true,
    themes: (
      sky-data-grid-default: map.merge($defaultThemeBase, ()),
      sky-data-entry-grid-default:
        map.merge(
          $defaultThemeBase,
          map.merge(
            $defaultsForDataEntryGrid,
            (
              cell-horizontal-padding: 11px,
              cell-horizontal-border: 1px solid
                var(--sky-border-color-neutral-medium),
            )
          )
        ),
      sky-data-grid-modern-light: map.merge($modernLightThemeBase, ()),
      sky-data-grid-modern-light-compact:
        map.merge($modernLightThemeCompact, ()),
      sky-data-entry-grid-modern-light:
        map.merge(
          $modernLightThemeBase,
          map.merge($defaultsForDataEntryGrid, ())
        ),
      sky-data-entry-grid-modern-light-compact:
        map.merge(
          $modernLightThemeCompact,
          map.merge($defaultsForDataEntryGrid, ())
        ),
      sky-data-grid-modern-dark: map.merge($modernDarkThemeBase, ()),
      sky-data-grid-modern-dark-compact: map.merge($modernDarkThemeCompact, ()),
      sky-data-entry-grid-modern-dark:
        map.merge(
          $modernDarkThemeBase,
          map.merge($defaultsForDataEntryGrid, ())
        ),
      sky-data-entry-grid-modern-dark-compact:
        map.merge(
          $modernDarkThemeCompact,
          map.merge($defaultsForDataEntryGrid, ())
        ),
    ),
  )
);

.ag-theme-sky-data-grid-default,
.ag-theme-sky-data-entry-grid-default,
.ag-theme-sky-data-grid-modern-light,
.ag-theme-sky-data-entry-grid-modern-light,
.ag-theme-sky-data-grid-modern-dark,
.ag-theme-sky-data-entry-grid-modern-dark,
.ag-theme-sky-data-grid-modern-light-compact,
.ag-theme-sky-data-entry-grid-modern-light-compact,
.ag-theme-sky-data-grid-modern-dark-compact,
.ag-theme-sky-data-entry-grid-modern-dark-compact {
  @include ag-grid-extra.ag-grid-extra();

  --ag-list-item-height: var(--ag-row-height);

  .ag-header-cell {
    cursor: initial;

    &:not(.sky-ag-grid-header-resizable) {
      .ag-header-cell-resize {
        cursor: initial;
        // We want to always show our dividers that use the resize cell. The AG Grid style on non-resizable cells uses `!important` so we have to do so as well.
        display: block !important;
      }
    }
  }

  .ag-header-cell-sortable,
  .ag-header-cell-sortable .ag-header-cell-label {
    cursor: initial;
  }

  .ag-scrollbar-invisible.sky-viewkeeper-fixed {
    box-shadow: none;
  }

  .ag-sticky-bottom {
    background-color: transparent;
    border-color: transparent;
  }

  .ag-cell.ag-cell-focus a:focus-visible:not(:active) {
    margin-inline-start: 2px;
    outline-width: 2px;
    outline-style: solid;
    outline-offset: 0;
  }

  .ag-ltr .ag-header-cell-resize {
    right: -4px;
  }
}

.ag-theme-sky-data-grid-default,
.ag-theme-sky-data-grid-modern-light,
.ag-theme-sky-data-grid-modern-dark,
.ag-theme-sky-data-grid-modern-light-compact,
.ag-theme-sky-data-grid-modern-dark-compact {
  &:not(:has(:focus-visible)) {
    --ag-input-focus-border-color: transparent;
    --ag-range-selection-border-color: transparent;
  }

  .ag-overlay-no-rows-wrapper.ag-layout-auto-height {
    padding-top: var(--ag-row-height);
  }

  /* Remove border added by https://github.com/ag-grid/ag-grid/blob/latest/community-modules/styles/src/internal/base/parts/_grid-borders.scss#L80 */
  .ag-ltr,
  .ag-rtl {
    .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
    .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
    .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
    .ag-cell-range-single-cell,
    .ag-cell-range-single-cell.ag-cell-range-handle {
      border-top-width: 0;
    }
  }
}

.ag-theme-sky-data-grid-modern-light,
.ag-theme-sky-data-grid-modern-dark,
.ag-theme-sky-data-grid-modern-light-compact,
.ag-theme-sky-data-grid-modern-dark-compact {
  --ag-background-color: var(--sky-background-color-page-default);
  --ag-header-background-color: var(--sky-background-color-page-default);
  --ag-header-column-resize-handle-color: var(
    --sky-background-color-page-default
  );
  --ag-header-column-separator-color: var(--sky-background-color-page-default);
  --ag-odd-row-background-color: var(--sky-background-color-page-default);
}

.ag-theme-sky-data-grid-modern-dark,
.ag-theme-sky-data-grid-modern-dark-compact {
  --ag-selected-row-background-color: var(--sky-background-color-page-default);
}

.ag-theme-sky-data-entry-grid-default,
.ag-theme-sky-data-entry-grid-modern-light,
.ag-theme-sky-data-entry-grid-modern-dark,
.ag-theme-sky-data-entry-grid-modern-light-compact,
.ag-theme-sky-data-entry-grid-modern-dark-compact {
  &.sky-ag-grid-cell-editing-skyCellLookup {
    .ag-row .ag-cell.ag-cell-focus,
    .ag-popup .ag-popup-editor {
      outline: none;
    }
  }

  .ag-cell.ag-cell-focus {
    z-index: 1;

    &.ag-cell-inline-editing {
      border-left-width: 0;
      border-right-width: 0;

      &.sky-ag-grid-cell-template {
        padding-left: calc(
          var(--ag-cell-horizontal-padding) - 1px +
            var(--ag-row-group-indent-size) * var(--ag-indentation-level)
        );
        padding-right: calc(var(--ag-cell-horizontal-padding) - 1px);
      }
    }

    &.ag-cell-inline-editing,
    &.ag-cell-popup-editing {
      outline-offset: -2px;
      outline: var(--ag-range-selection-border-color) solid 2px;
      box-shadow: none;
    }

    &.ag-cell-popup-editing.sky-ag-grid-cell-lookup {
      color: transparent;
    }
  }

  .ag-popup {
    .ag-popup-editor {
      border: none;
      box-shadow: none;
      outline-offset: -2px;
      outline: var(--ag-range-selection-border-color) solid 2px;
      min-height: var(--ag-row-height);
    }
  }

  .sky-input-group .sky-btn {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.sky-ag-grid.sky-ag-grid-top-scrollbar .ag-root {
  .ag-body-horizontal-scroll.ag-scrollbar-invisible {
    /* Value is overridden in SkyAgGridWrapperComponent to match the calculated value AG Grid uses. */
    --sky-ag-body-horizontal-scroll-width: 15px;
    position: relative;
    z-index: 1;
    bottom: revert;
    margin-bottom: calc(var(--sky-ag-body-horizontal-scroll-width) * -1);
  }
}

ag-grid-angular {
  .ag-root-wrapper {
    border: none;
  }

  input:focus {
    border: none;
    outline: none;
  }

  input::-ms-clear {
    display: none;
  }
  .sky-ag-grid-cell-number,
  .sky-ag-grid-cell-currency,
  .sky-ag-grid-cell-right-aligned {
    text-align: right;
    padding-right: 12px;
  }

  .sky-ag-grid-cell-number,
  .sky-ag-grid-cell-currency {
    font-variant-numeric: tabular-nums;
  }

  .sky-ag-grid-cell-row-selector {
    text-overflow: clip;
  }

  .ag-header-cell.ag-right-aligned-header,
  .ag-header-cell.sky-ag-grid-header-right-aligned {
    .ag-header-cell-comp-wrapper {
      flex-direction: row-reverse;
    }

    .ag-header-cell-label,
    .ag-cell-label-container {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}

sky-ag-grid-wrapper ag-grid-angular.sky-ag-grid-editable {
  border-top: sky-ag-grid-variables.$sky-standard-border;
}

sky-ag-grid-wrapper .sky-ag-grid-text-selection .ag-root-wrapper {
  cursor: text;
}

.sky-theme-default .sky-ag-grid-row-delete .sky-btn {
  padding: 4px 12px;
}

ag-grid-angular + sky-infinite-scroll {
  .sky-infinite-scroll {
    margin-top: 0 !important;
  }
}

sky-ag-grid-wrapper + sky-infinite-scroll {
  .sky-infinite-scroll {
    margin-top: 0 !important;
  }
}

.ag-theme-sky-data-grid-default,
.ag-theme-sky-data-entry-grid-default {
  .ag-header .ag-header-cell .ag-header-cell-text {
    font-weight: normal;
  }
}

.sky-ag-grid-layout-normal {
  width: 100%;
  height: 100%;
  display: flex;

  .sky-ag-grid {
    flex: 1;
    overflow: hidden;
  }

  ag-grid-angular {
    width: 100%;
    height: 100%;
  }
}
