<script setup>
import Navbar from '../components/Navbar.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
</script>
<template>
  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
  <div class="flex justify-center pt-8 pb-8">
    <p
      class="text-2xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-serif font-medium tracking-wide flex justify-center items-center">
      <span class="inline-block w-5 h-1 mr-4 bg-gray-900 ::before"></span>
      Aufträge
      <span class="inline-block w-5 h-1 ml-4 bg-gray-900 ::after"></span>
    </p>
  </div>
  <div class="flex justify-center pb-6">
    <div class="overflow-x-auto">
      <RouterLink v-if="isVerwaltung" to="/contract/create">
        <button
          class="bg-sky-500 text-white active:bg-sky-600 font-bold uppercase text-xs px-4 py-2 mb-3 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
          type="button">
          Create Auftrag
        </button>
      </RouterLink>
      <RouterLink v-if="isEmployee" to="/contracts/open">
        <button
          class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
          type="button">
          <font-awesome-icon icon="fa-solid fa-pen-to-square" class="pr-1 h-3.5" /> Für Auftrag
          anmelden
        </button>
      </RouterLink>
      <table class="min-w-full border-collapse bg-white border border-gray-600">
        <thead class="bg-gray-800 text-white">
          <tr>
            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
            <th class="w-1/3 py-3 px-4 uppercase font-semibold text-sm text-center">Mitarbeiter</th>
            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Updated</th>
            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
          </tr>
        </thead>
        <tbody class="text-gray-700">
          <tr
            v-for="(contract, index) in contracts"
            :key="contract.id"
            :class="{ 'bg-gray-100': index % 2 !== 0 }">
            <td class="py-3 px-4 text-center">{{ contract.id }}</td>
            <td class="py-3 px-4 text-center">{{ contract.name }}</td>
            <td class="py-3 px-4 text-center">
              <!-- TODO: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels -->
              <span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{
                contract.status
              }}</span>
            </td>
            <td class="py-3 px-4 text-center">{{ contract.mitarbeiter.join(', ') }}</td>
            <td class="py-3 px-4 text-center">
              {{ new Date(contract.updatedAt).toDateString() }}
            </td>
            <td class="text-left py-2">
              <button
                v-if="isVerwaltung"
                class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button"
                @click="openDeleteDialog()">
                Delete
              </button>
              <button
                class="bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button">
                Update
              </button>
              <RouterLink to="/contract?id=TESTID">
                <button
                  class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                  type="button">
                  View
                </button>
              </RouterLink>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  computed: {
    contracts() {
      return this.$store.state.contracts.contracts
    },
    isVerwaltung() {
      return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
    },
    isEmployee() {
      return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employee')
    }
  },
  mounted() {
    this.fetchContracts()
  },
  methods: {
    ...mapActions(['fetchContracts']),
    openDeleteDialog() {
      console.log('Prepare to delete')
    }
  }
}
</script>
