<template>
  <div class="overflow-x-scroll text-gray-900 leading-snug">
    <table class="w-full">
      <thead>
        <tr class="border-b border-gray-400">
          <th class="px-4 py-2 border border-gray-400">Date</th>
          <th class="px-4 py-2 border border-gray-400">Talk</th>
          <th class="px-4 py-2 border border-gray-400">Event</th>
          <th class="px-4 py-2 border border-gray-400">Feedback</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(event, i) in sortedEvents"
          :key="i"
          class="odd:bg-red-500"
          :class="{ 'bg-gray-200': i % 2 === 0 }"
        >
          <td class="w-1/5 px-4 py-3 border border-gray-400">
            <dl>
              <span>
                <dt class="sr-only">Date</dt>
                <dd class="whitespace-no-wrap md:whitespace-normal">{{ event.date }}</dd>
              </span>

              <span v-if="event.time">
                <dt class="sr-only">Time</dt>
                <dd class="mt-px text-sm text-gray-700">{{ event.time }}</dd>
              </span>
            </dl>
          </td>
          <td class="w-1/3 px-4 py-3 border border-gray-400">
            <dl>
              <span>
                <dt class="sr-only">Talk</dt>
                <dd>
                  <a class="block whitespace-no-wrap md:whitespace-normal underline hover:no-underline" href="#0">{{ getTalk(event.talk).title }}</a>
                </dd>
              </span>

              <span>
                <dt class="sr-only">Talk type</dt>
                <dd class="mt-px text-sm text-gray-600">{{ getTalk(event.talk).type }}</dd>
              </span>
            </dl>
          </td>
          <td class="w-1/3 px-4 py-3 border border-gray-400">
            <dl>
              <span>
                <dt class="sr-only">Event name</dt>
                <dd>
                  <a class="whitespace-no-wrap md:whitespace-normal underline hover:no-underline" href="#0">{{ event.title }}</a>
                </dd>
              </span>

              <span class="block">
                <dt class="sr-only">Location</dt>
                <dd class="mt-px text-sm text-gray-600">{{ event.location }}</dd>
              </span>
            </dl>
          </td>
          <td class="w-1/2 px-4 py-3 border border-gray-400">
            <div v-if="event.feedback">
              <a
                class="px-4 py-3 bg-blue-600 text-sm text-white rounded-lg hover:bg-blue-700"
                href="#0"
              >
                <span class="sr-only">View feedback for {{ getTalk(event.talk).title }} at {{ event.title }}</span>
                <span aria-hidden="true">Feedback</span>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    props: {
      data: {
        required: true,
        type: Object
      }
    },

    computed: {
      sortedEvents: function () {
        return _(this.data.events)
          .sortBy(e => `${e.date} ${e.time}`)
          .reverse()
      }
    },

    methods: {
      getTalk: function (talkId) {
        return this.data.talks[talkId] || {}
      }
    }
  }
</script>
