<template>
  <table class="datatable">
    <thead class="datatable__head">
      <tr class="datatable__row datatable__row--head">
        <th
          class="datatable__heading"
          v-for="(header, idx) in dataset.headers"
          :key="idx"
        >
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody class="datatable__body">
      <tr class="datatable__row" v-for="(row, idx) in dataset.data" :key="idx">
        <td
          class="datatable__cell"
          v-for="(cell, idx) in row"
          :key="idx"
          :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
        >
          {{ cell }}
        </td>
        <td
          v-if="isHexValue(row[1])"
          class="datatable__cell--colorpick"
          :style="`background-color: ${row[1]}`"
        ></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "DataTable",
  props: {
    dataset: {
      type: Object,
      required: true,
    },
  },
  methods: {
    isHexValue(value) {
      return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
    },
  },
};
</script>

<style lang="scss">
@import "@scss/_variables.scss";

.datatable {
  border-collapse: collapse;
  width: 100%;

  &__heading,
  &__cell {
    padding: 0.25em 0.5em;

    @media (min-width: 35em) {
      padding: 0.5em 1em;
    }
  }

  &__body {
    .datatable__row {
      background-color: rgba($bg-color-dark, 0.7);

      &:nth-child(odd) {
        background-color: rgba(lighten($bg-color-dark, 15%), 0.7);
      }
    }
  }

  &__row {
    &--head {
      background-color: $bg-color-light;
      color: $copy-color;
    }
  }

  &__cell {
    &:first-child {
      text-align: right;
    }

    &--colorpick {
      margin-top: 0.1em;
      border: 0.1em solid #fff;
    }
  }
}
</style>
