<template>
    <div>
        <div class="bg-grey overflow-hidden sm:rounded-lg">
            <div v-if="title" class="whitespace-nowrap">
                <h3 class="font-semibold text-xl m-3 text-gray-800 leading-tight">{{ title }}</h3>
            </div>
            <div v-if="data.total > 0" class="bg-white rounded-md shadow overflow-x-auto">
                <table class="w-full whitespace-nowrap">
                   <tr class="text-left font-bold">
                        <th v-for="(col, index) in columns" :key="col.key" class="px-6 pt-4 pb-4" :colspan="[index == (columns.length - 1) ? 2 : 1]">
                            <a v-if="col.sortable" href="#" @click="sortTable(col.key)" class="flex items-center">
                                {{ col.value }}
                                <div class="grid grid-cols-1 place-items-center ml-1">
                                    <unicon :fill="getIconColor(col.key, 'asc')" height="22" width="22" name="angle-up"></unicon>
                                    <unicon :fill="getIconColor(col.key, 'desc')" height="22" width="22" name="angle-down"></unicon>
                                </div>
                            </a>
                            <span v-else class="flex items-center">
                                {{ col.value }}
                            </span>
                        </th>
                    </tr>
                    <tr v-for="row in data.data" :key="row.link" class="hover:bg-gray-100 focus-within:bg-gray-100">
                        <td v-for="col in columns" :key="col.key" class="border-t">
                            <inertia-link v-if="row.link" class="px-6 py-4 flex items-center focus:text-indigo-500" :href="row.link">
                                {{ row[col.key] }}
                            </inertia-link>
                            <span v-else class="px-6 py-4 flex items-center focus:text-indigo-500">
                                {{ row[col.key] }}
                            </span>
                        </td>
                        <td v-if="row.link" class="border-t w-px">
                            <inertia-link class="px-4 flex items-center" :href="row.link" tabindex="-1">
                                <unicon class="m-2" height="22" width="22" name="angle-right"></unicon>
                            </inertia-link>
                        </td>
                    </tr>
                    <tr v-if="data.total === 0">
                        <td class="border-t px-6 py-4" :colspan="columns.length">Keine Einträge gefunden</td>
                    </tr>
                </table>
            </div>
            <div v-else>
                <span class="inline-flex font-medium text-gray-500 ml-3">
                    <unicon fill="#7e8491" class="mr-2" height="24" width="24" name="meh"></unicon>
                    Keine Einträge gefunden
                </span>
            </div>
        </div>
        
        <Paginator v-if="data.links" class="mt-6" :links="data.links" />
    </div>
</template>

<script>
import Paginator from "@/Components/Paginator"

export default {
  components: {
    Paginator,
  },
  props: {
    data: Object,
    columns: Array,
    title: String,
    defaultSort: Object,
  },
  data() {
      return {
          sort: this.defaultSort,
      }
  },
  methods: {
    sortTable(col) {
        event.preventDefault();
        if (this.sort.by == col) {
            this.sort.direction = this.sort.direction == 'asc' ? 'desc' : 'asc';
        } else {
            this.sort.direction = 'asc';
        }
        //this.$inertia.get(this.route('contacts'), { preserveState: true })
        this.sort.by = col;
    },
    getIconColor(col, dir) {
        if (col == this.sort.by && dir == this.sort.direction) {
            return '#4B5563';
        }

        return '#a0a5b9';
    }
  },
}
</script>