@use '../../foundations/typography/mixins.scss' as typography;
@use '../../foundations/spacing/tokens' as spacing;
@use '../../foundations/colors/tokens' as color;
@use '../../foundations/colors/mixins' as colorMixin;
@use '../../foundations/borders/mixins' as border;
@use '../../foundations/focus/mixins' as focus;
@use '../../foundations/utilities/mixins' as utilities;

@mixin fudis-table-header-button {
  @include utilities.box-reset;
  @include typography.table-header;
  @include colorMixin.bg-color('transparent');
  @include border.border-none;

  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

@mixin fudis-table-default {
  width: 100%;
  border-collapse: collapse;

  &__caption {
    @include typography.table-caption;

    padding-bottom: spacing.$spacing-xs;
    caption-side: top;
    text-align: left;
  }

  &__header {
    @include typography.table-header;

    padding: spacing.$spacing-xs spacing.$spacing-sm;
    vertical-align: middle;

    &__align {
      &__left {
        text-align: left;
      }

      &__center {
        text-align: center;
      }

      &__right {
        text-align: right;
      }
    }

    &-row {
      border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
    }

    &-button {
      @include fudis-table-header-button;

      &:focus {
        @include focus.focus-generic;
      }

      &__align {
        &__left {
          justify-content: left;
        }

        &__center {
          justify-content: center;
        }

        &__right {
          justify-content: right;
        }
      }

      &--sortable {
        white-space: nowrap;
      }

      &--active {
        text-decoration: underline solid color.$color-gray-middle;
      }
    }
  }

  &__cell {
    @include typography.table-cell-default;

    border-bottom: spacing.$pixel-1 solid color.$color-gray-light;
    padding: spacing.$spacing-sm;

    &__align {
      &__left {
        text-align: left;
      }

      &__center {
        text-align: center;
      }

      &__right {
        text-align: right;
      }
    }

    &__vertical-align {
      &__top {
        align-content: start;
      }

      &__center {
        align-content: center;
      }

      &__bottom {
        align-content: end;
      }
    }

    /* Checkbox needs different padding-top since its clickable area expands out of visible component outlines */
    // &__checkbox {
    //   padding-top: calc(spacing.$spacing-xs + spacing.$spacing-xxs);
    // }
  }
}

@mixin fudis-table-mobile {
  width: 100%;
  border-collapse: collapse;

  &__caption {
    @include typography.table-caption;

    padding-bottom: spacing.$spacing-xs;
    caption-side: top;
    text-align: left;
  }

  &__header {
    @include typography.table-header;

    padding: spacing.$spacing-xxs spacing.$spacing-xs;
    vertical-align: middle;

    &__align {
      &__left {
        text-align: left;
      }

      &__center {
        text-align: center;
      }

      &__right {
        text-align: right;
      }
    }

    &-row {
      border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
    }

    &-button {
      @include fudis-table-header-button;

      &:focus {
        @include focus.focus-generic;
      }

      &__align {
        &__left {
          justify-content: left;
        }

        &__center {
          justify-content: center;
        }

        &__right {
          justify-content: right;
        }
      }

      &--sortable {
        white-space: nowrap;
      }

      &--active {
        text-decoration: underline solid color.$color-gray-dark;
      }
    }
  }

  &__cell {
    @include typography.table-cell-mobile;

    border-bottom: spacing.$pixel-1 solid color.$color-gray-light;
    padding: spacing.$spacing-xs;

    &__align {
      &__left {
        text-align: left;
      }

      &__center {
        text-align: center;
      }

      &__right {
        text-align: right;
      }
    }

    &__vertical-align {
      &__top {
        align-content: start;
      }

      &__center {
        align-content: center;
      }

      &__bottom {
        align-content: end;
      }
    }

    /* Checkbox needs different padding-top since its clickable area expands out of visible component outlines */
    // &__checkbox {
    //   padding-top: spacing.$spacing-xxs;
    // }
  }
}