@use 'sass:map';
@use './../utils/tokens.scss' as tokens;
@use './dataTable.vars.scss' as dataTableVars;
@use './icon.vars.scss' as iconVars;

@import '@viasat/beam-tokens/components/DataTable';

$dataTableBaseClass: dataTableVars.$dataTableBaseClass;

$dataTableDensity: (
  'sm': (
    'cell-height': tokens.$bm-comp-data-table-size-cell-sm-height,
    'cell-y': tokens.$bm-comp-data-table-space-cell-sm-y,
    'section-y': tokens.$bm-comp-data-table-space-section-sm-y,
  ),
  'md': (
    'cell-height': tokens.$bm-comp-data-table-size-cell-md-height,
    'cell-y': tokens.$bm-comp-data-table-space-cell-md-y,
    'section-y': tokens.$bm-comp-data-table-space-section-md-y,
  ),
  'lg': (
    'cell-height': tokens.$bm-comp-data-table-size-cell-lg-height,
    'cell-y': tokens.$bm-comp-data-table-space-cell-lg-y,
    'section-y': tokens.$bm-comp-data-table-space-section-lg-y,
  ),
);

.#{$dataTableBaseClass}-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: tokens.$bm-comp-data-table-color-bg;

  &--bordered {
    border: tokens.$bm-sem-border-width-md solid
      tokens.$bm-comp-data-table-color-border;
  }

  &--rounded {
    border-radius: tokens.$bm-comp-data-table-radius;

    // Clips child content to the rounded corners. `clip` (unlike `hidden`) doesn't
    // make this a scroll container, so sticky descendants keep sticking to the
    // nearest scrolling ancestor or the viewport. Overlay sub-components (dropdowns,
    // column menus, popovers) that need to exceed the container bounds must use a
    // React portal instead.
    overflow: clip;
  }

  .#{$dataTableBaseClass}__toolbar {
    color: tokens.$bm-comp-data-table-color-header-body;
    text-align: start;
    padding-inline: tokens.$bm-comp-data-table-space-x;
  }
}

.#{$dataTableBaseClass} {
  width: 100%;
  border-collapse: collapse;
  color: tokens.$bm-comp-data-table-color-cell-text;

  &__header {
    color: tokens.$bm-comp-data-table-color-header-heading;
    font: tokens.$bm-comp-data-table-typo-col-header;
    text-align: start;
    padding-inline: tokens.$bm-comp-data-table-space-x;
  }

  &__head {
    background: tokens.$bm-comp-data-table-color-col-header-bg;
  }

  &__column-header {
    background: tokens.$bm-comp-data-table-color-col-header-bg;
    color: tokens.$bm-comp-data-table-color-col-header-text;
    font: tokens.$bm-comp-data-table-typo-col-header;
    text-align: start;
    // Deliberate: header labels stay single-line (EPTOOLS-2190 AC); header
    // truncation is a Phase 2 concern.
    white-space: nowrap;

    &--align-end {
      text-align: end;
    }
  }

  &__body {
    background: tokens.$bm-comp-data-table-color-bg;
  }

  // Body scoping keeps grouped header rows plain while rows opt into striping.
  &__body &__row--striped {
    background-color: tokens.$bm-comp-data-table-color-zebra;
  }

  // Opt-in hover layers over the base or zebra fill, scoped to this table's rows.
  &--row-hover > &__body > &__row:hover {
    background-image: linear-gradient(
      tokens.$bm-sem-color-state-layer-hover,
      tokens.$bm-sem-color-state-layer-hover
    );
  }

  &__cell {
    font: tokens.$bm-comp-data-table-typo-cell;
    color: tokens.$bm-comp-data-table-color-cell-text;
    // Required, not cosmetic: row-header cells render as `<th>`, which the UA
    // stylesheet centers. The `font` shorthand above already resets the UA bold
    // (400 comes from the token), but `text-align` is not a font sub-property so
    // it survives. Matches `&__column-header`.
    text-align: start;
    border-bottom: tokens.$bm-sem-border-width-md solid
      tokens.$bm-comp-data-table-color-border;

    &--align-end {
      text-align: end;
    }
  }

  &__cell-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: tokens.$bm-comp-data-table-space-cell-gap;
  }

  &__cell-content-before,
  &__cell-content-after {
    display: flex;
    align-items: center;

    #{iconVars.$iconSize}: tokens.$bm-comp-data-table-size-cell-icon;
    #{iconVars.$iconColor}: tokens.$bm-comp-data-table-color-cell-icon;
  }

  &__cell-content-text {
    // `min-width: 0` overrides the flex item's `auto` minimum, without which the
    // text column refuses to shrink and the ellipsis below never fires.
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &__cell-content-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    // `emphisis` is the real token spelling (typo upstream in the token set).
    &--emphasis {
      font: tokens.$bm-comp-data-table-typo-cell-emphisis;
    }
  }

  &__cell-content-supporting {
    font: tokens.$bm-comp-data-table-typo-cell-supporting;
    color: tokens.$bm-comp-data-table-color-cell-text-supporting;
  }

  &__footer {
    color: tokens.$bm-comp-data-table-color-cell-text;
    padding-inline: tokens.$bm-comp-data-table-space-x;
  }
}

// Density modifiers (sm / md / lg)
@each $density, $props in $dataTableDensity {
  .#{$dataTableBaseClass}--#{$density} {
    .#{$dataTableBaseClass}__cell,
    .#{$dataTableBaseClass}__column-header {
      height: map.get($props, 'cell-height');
      padding-block: map.get($props, 'cell-y');
      padding-inline: tokens.$bm-comp-data-table-space-x;
    }
  }

  // Header (caption) and footer live inside the <table>; the toolbar is hoisted
  // to the container (sibling of <table>), so its density scale keys off the
  // mirrored container modifier instead of the table one.
  .#{$dataTableBaseClass}--#{$density} .#{$dataTableBaseClass}__header {
    padding-block: map.get($props, 'section-y');
  }

  .#{$dataTableBaseClass}--#{$density} .#{$dataTableBaseClass}__footer {
    padding-block: map.get($props, 'section-y');
  }

  .#{$dataTableBaseClass}-container--#{$density} .#{$dataTableBaseClass}__toolbar {
    padding-block: map.get($props, 'section-y');
  }
}