<template>
  <UiTable
    v-if="version === '2'"
    v-bind="$attrs"
  >
    <slot />
  </UiTable>

  <div
    v-else
    class="unnnic-table"
  >
    <div class="header">
      <slot name="header"></slot>
    </div>

    <div>
      <div class="item-spacer"></div>
    </div>

    <div class="scroll">
      <template
        v-for="(item, index) in items"
        :key="index"
      >
        <div class="item">
          <slot
            name="item"
            :item="item"
          ></slot>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import { Table as UiTable } from '@/components/ui/table';

export default {
  name: 'UnnnicTable',

  components: {
    UiTable,
  },

  provide() {
    return {
      unnnicTableVersion: computed(() => this.version),
    };
  },

  inheritAttrs: false,

  props: {
    items: {
      type: Array,
    },
    version: {
      type: String,
      default: '1',
    },
  },

  data() {
    return {
      value: false,
    };
  },

  computed: {},
};
</script>

<style lang="scss" scoped>
@use '@/assets/scss/unnnic' as *;

$scroll-size: 4px;

.scroll {
  padding-right: calc(#{$unnnic-inline-nano} + #{$scroll-size});
  width: 100%;
  flex: 1;
  overflow: overlay;

  &::-webkit-scrollbar {
    width: $scroll-size;
  }

  &::-webkit-scrollbar-thumb {
    background: $unnnic-color-border-emphasized;
    border-radius: $unnnic-border-radius-pill;
  }

  &::-webkit-scrollbar-track {
    background: $unnnic-color-bg-muted;
    border-radius: $unnnic-border-radius-pill;
    // background-color: blue;
  }
}

.unnnic-table {
  display: flex;
  flex-direction: column;
  background-color: $unnnic-color-bg-base;
  border-radius: $unnnic-border-radius-sm;

  .header,
  .item {
    padding: $unnnic-squish-xs;
    border-radius: $unnnic-border-radius-sm;
  }

  .header {
    background-color: $unnnic-color-bg-base-soft;

    :deep(.col) {
      font-family: $unnnic-font-family-secondary;
      color: $unnnic-color-fg-base;
      font-weight: $unnnic-font-weight-regular;
      font-size: $unnnic-font-size-body-gt;
      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
    }
  }

  .item {
    background-color: $unnnic-color-bg-base;

    &:hover {
      background-color: $unnnic-color-bg-base-soft;
    }

    &.loading {
      font-family: $unnnic-font-family-secondary;
      color: $unnnic-color-fg-base;
      font-size: $unnnic-font-size-body-gt;
      font-weight: $unnnic-font-weight-regular;
      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
      text-align: center;
    }
  }

  .item-spacer {
    height: $unnnic-spacing-stack-nano;
  }
}
</style>
