<template>
  <v-card
    class="snt-table"
    flat>
    <v-card-text :class="{ 'pa-1': dense }">
      <v-data-table
        :value="selected"
        :loading="loading"
        :headers="tableHeaders"
        :items="items"
        :items-per-page="perPage"
        :server-items-length="totalItems"
        :page="page"
        :height="autoHeight"
        :mobile-breakpoint="mobileBreakpoint"
        :show-select="showSelect"
        :sort-by="sortBy"
        :sort-desc="sortDesc"
        checkbox-color="primary"
        hide-default-footer
        @input="setSelected($event)"
        @update:sort-by="$emit('update:sort-by', $event)"
        @update:sort-desc="$emit('update:sort-desc', $event)">
        <template
          v-if="!hideTitle"
          #top>
          <div class="snt-table__header d-flex flex-wrap gap-3 mt-4 mb-8">
            <div class="text-h1-headline primary--text">
              {{ title }} ({{ totalItems | toLocaleString }})
            </div>
            <v-spacer />
            <slot name="action" />
          </div>
        </template>
        <template
          v-for="h in tableHeaders"
          #[`header.${h.value}`]="{ item }">
          <slot
            v-if="$scopedSlots[`header.${h.value}`]"
            :name="`header.${h.value}`"
            :item="item" />
          <span
            v-else
            :key="h.value">
            {{ h.text }}
          </span>
        </template>
        <template
          v-for="h in tableHeaders"
          #[`item.${h.value}`]="{ item }">
          <slot
            v-if="$scopedSlots[`item.${h.value}`]"
            :name="`item.${h.value}`"
            :item="item" />
          <template v-else>
            {{ item[h.value] }}
          </template>
        </template>
        <template #footer>
          <SntPagination
            :value="page"
            :total-pages="totalPages"
            @input="setPage($event)" />
        </template>
      </v-data-table>
    </v-card-text>
  </v-card>
</template>

<script>
import { SntPagination } from '../SntPagination'

export default {
  components: {
    SntPagination
  },
  props: {
    selected: {
      type: Array,
      default: () => ([])
    },
    items: {
      type: Array,
      default: () => ([])
    },
    headers: {
      type: Array,
      default: () => ([])
    },
    page: {
      type: Number,
      default: 1
    },
    perPage: {
      type: Number,
      default: 10
    },
    sortBy: {
      type: Array,
      default: () => ([])
    },
    sortDesc: {
      type: Array,
      default: () => ([])
    },
    totalItems: {
      type: Number,
      default: 0
    },
    totalPages: {
      type: Number,
      default: 0
    },
    height: {
      type: String,
      default: '100%'
    },
    mobileBreakpoint: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: 'Untitled'
    },
    showSelect: Boolean,
    hideTitle: Boolean,
    loading: Boolean,
    dense: Boolean
  },
  data () {
    return {

    }
  },
  computed: {
    tableHeaders () {
      return this.headers.map((item) => (this.$_.isObject(item) ? this.$_.defaults(item, {
        sortable: false
      }) : {
        text: item,
        value: item,
        sortable: false
      }))
    },
    autoHeight () {
      return this.$vuetify.breakpoint.mobile ? '100%' : this.height
    }
  },
  methods: {
    setSelected (selected = []) {
      this.$emit('update:selected', selected)
    },
    setPage (page = 1) {
      this.$emit('update:page', page)
    }
  }
}
</script>

<style lang="scss" scoped>
.v-data-table {
  ::v-deep {
    tr {
      &:hover,
      &.v-data-table__selected {
        background-color: transparent !important;
      }
      td, th {
        padding-left: 12px !important;
        padding-right: 12px !important;
        &:not(.v-data-table__mobile-row):nth-child(1),
        &:not(.v-data-table__mobile-row):nth-child(2) {
          padding-left: 60px !important;
        }
      }
    }
  }
}
</style>
