@use '@angular/material' as mat;
@import '@ag-grid-community/core/dist/styles/ag-grid';
@import '@ag-grid-community/core/dist/styles/ag-theme-material/sass/_ag-theme-material-mixin';
@import './variables';

@function ends-with($string, $find) {
  @if (
    str-index($string, $find) == (str-length($string) - str-length($find) + 1)
  ) {
    @return true;
  } @else {
    @return false;
  }
}

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }

  @return $string;
}

@mixin mw-ag-grid-theme($theme) {
  $accent: map-get($theme, accent);
  $grid-table-checkbox-size: 12px;
  $column-menu-icon-size: 15px;
  $grid-table-header-icon-size: 15px;
  $paging-panel-height: 48px;
  $filtered-header-background-color: mw-hue(mw-orange, 100);
  $tooltip-background-color: mw-hue(mw-gray, 900);
  $input-background-color: rgba(0, 0, 0, 0.04);
  $input-bottom-border-color: rgba(0, 0, 0, 0.42);
  $input-height: 32px;

  $replace-icons: (
    pin: 'push_pin',
    columns: 'view_column_outlined',
  );

  // https://www.ag-grid.com/javascript-grid-themes-customising/#base-theme-parameters
  @include ag-theme-material(
    (
      // Colour of text and icons in primary UI elements like
      foreground-color: var(--mw-text),
      // Colour of text in grid
      data-color: var(--text),
      row-hover-color: var(--orange50),
      // Background colour applied to every other row or null to use background-color for all
      odd-row-background-color: rgba(0, 0, 0, 0.02),
      // Background color of selected rows in the grid and in dropdown
      selected-row-background-color: mw-hue(mw-orange, 100),
      // Color of elements that can't be interacted with because they are in a disabled
      disabled-foreground-color: var(--mw-disabled-text),
      // Colour of text and icons in UI elements that need to be slightly less emphasized to avoid distracting attention from
      secondary-foreground-color: var(--mw-secondary-text),
      // Colour of text and icons in the h
      header-foreground-color: var(--mw-text),
      /// Currently primary colour is used for buttons, range selections, selected tab underlines and input focus underlines, and accent colour is used for checked check
      material-primary-color: mat.get-color-from-palette($accent),
      // Background colour for second level headings within UI compo
      subheader-background-color: var(--mw-base),
      // Accent colour is used for checked check
      material-accent-color: mat.get-color-from-palette($accent),
      // Draw borders around most UI ele
      borders: true,
      // Colour for border around major UI components like the grid itself, headers, footers and tool p
      border-color: mw-hue(mw-gray, 300),
      // Height of header
      header-height: 48px,
      // Checkbox st
      checkbox-unchecked-color: var(--mw-secondary-text),
      checkbox-indeterminate-color: mat.get-color-from-palette($accent),
      // The size of square icons and icon-bu
      icon-size: 20px,
      //
      // Height of items in lists (example of lists are dropdown select inputs and column menu set fil
      font-size: 12px,
      list-item-height: 32px
    )
  );

  ag-grid-angular.ag-theme-material {
    //
    // ROWS
    //

    $sizes: 24, 32, 40;
    @each $size in $sizes {
      .mw-ag-row-#{$size} {
        .ag-cell {
          padding-left: 8px;
          padding-right: 8px;
          line-height: #{$size}px;
        }

        .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
          height: #{$size}px;
        }
      }
    }
    //
    // HEADER
    //
    .ag-header-cell {
      padding-left: 8px;
      padding-right: 8px;
      .ag-icon {
        font-size: $grid-table-header-icon-size;
      }

      .ag-header-label-icon {
        margin-left: 2px !important;
      }
    }

    .ag-header-cell-filtered {
      background-color: $filtered-header-background-color;

      &.ag-header-cell:hover {
        background-color: $filtered-header-background-color !important;
      }
      .ag-icon-filter {
        color: ag-param(material-primary-color);
      }
    }

    //
    // SIDEBAR
    //
    .ag-side-bar {
      .ag-side-buttons {
        width: 32px;
      }
      .ag-side-button-icon-wrapper {
        margin-bottom: 16px;
      }
    }

    //
    // TOOLTIP
    //

    .ag-tooltip {
      background-color: $tooltip-background-color;
      border-width: 0;
      border-radius: 2px;
      color: white;
      font-size: 11px;
      padding: 3px 8px;
    }

    //
    // INPUT
    //
    input[class^='ag-'][type='text'],
    input[class^='ag-'][type='number'] {
      height: $input-height;
      border-radius: 2;
      background-color: $input-background-color;
      border-bottom: 1px solid $input-bottom-border-color;
      padding-bottom: 0;
      padding-left: 8px;
    }

    //
    // BUTTON
    //
    .ag-standard-button {
      @extend .mw-button;
      background-color: ag-param(material-primary-color);
      color: var(--mw-text);
      height: 32px;
      padding: 8px 16px;
      border-radius: 2px;
      text-transform: none;
      margin-left: 8px;
    }

    //
    // AG SELECT
    //
    .ag-select {
      .ag-picker-field-wrapper {
        background-color: $input-background-color;
        border: 0;
        border-bottom: 1px solid $input-bottom-border-color;
        border-radius: 0;
        min-height: $input-height;

        .ag-picker-field-display {
          margin-left: 8px;
        }
      }
    }

    //
    // CHECKBOXES
    //
    .ag-header-row {
      @extend .mw-caption2;
    }

    .ag-header-select-all .ag-checkbox-input-wrapper,
    .ag-selection-checkbox .ag-checkbox-input-wrapper {
      width: $grid-table-checkbox-size;
      height: $grid-table-checkbox-size;
      font-size: $grid-table-checkbox-size;
      line-height: $grid-table-checkbox-size;
      &:active,
      &:focus {
        box-shadow: none;
      }
    }

    .ag-menu .ag-checkbox-input-wrapper {
      width: $column-menu-icon-size;
      height: $column-menu-icon-size;
      font-size: $column-menu-icon-size;
      line-height: $column-menu-icon-size;
      &:active,
      &:focus {
        box-shadow: none;
      }
    }

    .ag-selection-checkbox.ag-invisible {
      margin-right: 0px;
      width: 0px;
    }

    //
    // PAGING PANEL
    //
    .ag-paging-panel {
      height: $paging-panel-height;
      color: ag-param(data-color);
      @extend .mw-caption;

      .ag-paging-row-summary-panel-number,
      .ag-paging-number {
        font-weight: bold;
      }
    }

    //
    // ICONS
    //
    .ag-icon {
      color: ag-param(secondary-foreground-color);
    }

    @each $icon, $material-icon in $replace-icons {
      $isOutlined: ends-with(
        $string: $material_icon,
        $find: '_outlined',
      );

      .ag-icon-#{$icon} {
        font-family: if(
          $isOutlined,
          'Material Icons Outlined',
          'Material Icons'
        ) !important;
        font-weight: normal;
        &::before {
          content: str-replace($material-icon, '_outlined', '');
        }
      }
    }

    //
    // COLUMNS CONTAINER
    //
    .ag-center-cols-container {
      min-width: 100%;
    }

    //
    // COLUMN MENU
    //
    .ag-menu {
      width: 280px !important;
      .ag-menu-option-icon {
        padding-right: 20px;
      }

      .ag-tabs-header {
        border-bottom: 1px solid ag-param(border-color);
      }
      .ag-tab-selected {
        .ag-icon {
          color: ag-param(material-accent-color);
        }
      }
      .ag-column-select-header,
      .ag-column-select {
        border: 0;
      }
      .ag-column-select-header {
        height: auto;
        padding-top: 8px;
      }
      .ag-set-filter-item {
        border: 0;
      }
    }

    //
    // STATUS BAR
    //
    .ag-status-bar {
      border-width: 0;
      border-top-width: 1px;
    }
  }
}