// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// 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.
@use "@energinet-datahub/watt/utils" as watt;

watt-table {
  --mat-table-row-item-label-text-font: $primary-font-family;
  --mat-table-row-item-outline-color: var(--watt-color-neutral-grey-300);
  --mat-table-header-headline-font: $primary-font-family;
}

watt-table,
watt-table .mat-mdc-table {
  display: grid;
  position: relative;
  overflow: auto;
  min-height: 44px; /* Magix UX number (replace with variable) */
}

watt-table .mat-mdc-table {
  grid-template-columns: var(--watt-table-grid-template-columns);
  grid-auto-rows: max-content;
  max-height: 100%;
  z-index: 1;

  thead,
  tbody,
  tfoot,
  tr.mat-mdc-row,
  tr.mat-mdc-header-row,
  tr.mat-mdc-footer-row {
    display: contents;
  }

  tr.watt-table-hide-footer {
    display: none;
  }

  tr.mat-mdc-header-row {
    flex: 0 0 auto;
  }

  th.mat-mdc-header-cell {
    @include watt.typography-watt-label;
    box-sizing: border-box;
    display: flex;
    position: sticky;
    top: 0;
    padding: 0 var(--watt-space-s);
    height: auto;
    background: var(--watt-color-primary-ultralight);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) inset;
    border: 0;
    z-index: 2 !important; // override local style
    white-space: nowrap;
    user-select: none;
  }

  td.mat-mdc-footer-cell,
  td.mat-mdc-cell {
    display: flex;
    align-items: center;
    min-height: 48px; /* Magic UX number */
    padding: var(--watt-space-xs) var(--watt-space-m);
    line-height: 18px;
  }

  td.mat-mdc-cell.watt-table-cell--expandable {
    padding: 0;
  }

  td.mat-mdc-footer-cell:not(.watt-table-footer-spacer),
  tr.mdc-data-table__row:last-child .mat-mdc-cell {
    border-bottom: 1px solid var(--watt-color-neutral-grey-300);
  }

  td.mat-mdc-footer-cell:not(.watt-table-footer-spacer) {
    @include watt.typography-watt-headline-6;
    border-top: 2px solid var(--watt-color-neutral-grey-300);
    background-color: var(--watt-color-neutral-grey-100);
  }

  .watt-table-no-end-divider:last-child .mat-mdc-cell {
    border-bottom: 0px solid var(--watt-color-neutral-grey-300) !important;
  }

  .watt-table-clickable-row,
  tr:has(> .watt-table-cell--expandable) {
    & > td:not(.watt-table-cell--expandable) {
      cursor: pointer;
      user-select: text;
    }
  }

  .watt-table-highlight-row:hover:not(
      .watt-table-active-row,
      :has(> .watt-table-cell--expandable:hover)
    )
    > td {
    background: var(--watt-color-neutral-grey-100);
  }

  .watt-table-active-row > td {
    background: var(--watt-color-secondary-ultralight);
  }

  .mat-column-__expandableColumn__ > watt-icon {
    transition: transform 200ms;
  }

  .mat-column-__expandableColumn__.watt-table-cell--expanded > watt-icon {
    transform: rotate(90deg);
  }

  .mat-sort-header-arrow {
    margin: 0;
  }

  .watt-table-align-right .mat-sort-header-arrow {
    margin-right: var(--watt-space-s);
  }

  .watt-table-align-center,
  .watt-table-align-left {
    .mat-sort-header-arrow {
      margin-left: var(--watt-space-s);
    }
  }

  .watt-table-header-cell {
    @include watt.space-inset-stretch-s;
  }

  .watt-table-checkbox-cell {
    justify-content: center;
  }

  th.watt-table-checkbox-cell {
    display: flex;
    align-items: center;
  }

  .watt-table-align-center,
  .watt-table-align-center .mat-sort-header-container {
    justify-content: center;
  }

  .watt-table-align-right,
  .watt-table-align-right .mat-sort-header-container {
    justify-content: right;
  }
}

.watt-table-variant-zebra > table > tbody > tr:nth-child(even) > td {
  background-color: var(--watt-color-neutral-grey-50);
}

watt-table .mat-mdc-table th.watt-table-cell--expandable {
  display: none;
}

watt-table .mat-mdc-table tr.mat-mdc-row td.mat-mdc-cell.watt-table-cell--expandable {
  position: relative;
  min-height: 0;
  max-height: 0; /* Trick for showing the content while it collapses */
  border-bottom-width: 0;
  overflow: hidden;
  pointer-events: none;
  grid-column: 1 / -1;
  background: transparent;
  flex: 1 1 auto;
  opacity: 0;
  will-change: opacity;
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    overflow 0s 0.3s allow-discrete;

  & > .watt-table-cell-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
  }
}

watt-table .mat-mdc-table tr.mat-mdc-row td.watt-table-cell--expandable.watt-table-cell--expanded {
  height: auto;
  max-height: initial;
  opacity: 1;
  border-bottom-width: 1px;
  pointer-events: all;
  overflow: visible;

  & > .watt-table-cell-wrapper {
    position: relative;
  }
}

.watt-table-footer-spacer {
  display: none;
  height: 76px; // Magic BJH number
  border: 0;
}

.watt-table-has-selection .watt-table-footer-spacer {
  display: block;
}

.watt-table-has-selection + .watt-table-toolbar {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
    visibility 0.5s;
}

.watt-table-toolbar {
  position: absolute;
  bottom: var(--watt-space-m);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0 var(--watt-space-m);
  min-height: 44px; // Magic UX number
  border-radius: 22px; // Magic UX number
  color: var(--watt-color-primary-contrast);
  background-color: var(--watt-color-primary);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: none;

  .watt-button--disabled {
    opacity: 0.4;
    --watt-button-primary-disabled-color: #fff;
  }
}

.watt-table-loading-cell::before {
  content: "";
  flex: 1;
  display: block;
  max-width: 200px;
  height: var(--watt-space-m);
  border-radius: var(--watt-space-m);
  opacity: 0.75;
  animation: shine 2s infinite linear;
  background-color: var(--watt-color-neutral-grey-200);
  background-size: 300px;
  background-position: -100px;
  background-image: linear-gradient(
    90deg,
    var(--watt-color-neutral-grey-300) 0px,
    var(--watt-color-neutral-grey-200) 40px,
    var(--watt-color-neutral-grey-300) 80px
  );
}

@keyframes shine {
  40%,
  100% {
    background-position: 200px;
  }
}
