<template>
<h1 class="text-2xl font-bold uppercase mb-10">events management</h1>
<div class="grid grid-cols-2 gap-x-8">
  <div class="overflow-x-auto">
    <table class="table-auto">
      <thead>
        <tr>
          <th class="border border-gray-400 text-left px-8 py-4">ID</th>
          <th class="border border-gray-400 text-left px-8 py-4">Name</th>
          <th class="border border-gray-400 text-left px-8 py-4">Arabic Name</th>
          <th class="border border-gray-400 text-left px-8 py-4">Japanese Name</th>
        </tr>
      </thead>
      <tbody>
        <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.events" :key="e._id">
          <td class="border border-gray-400 text-left px-8 py-4">{{ e._id }}</td>
          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
          <td class="border border-gray-400 text-left px-8 py-4 rtl" dir="rtl">{{ e.name_arabic ?? '' }}</td>
          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name_jpn ?? '' }}</td>
        </tr>
      </tbody>
    </table>
    </div>
  <div>
    <h2 class="text-lg font-bold">Create / Update</h2>
    <form name="form" @submit.prevent="form">
      <p class="mt-4">Event name</p>
      <input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
      <p class="mt-4">Event name in arabic (optional)</p>
      <input v-model="name_arabic" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" dir="rtl" />
      <p class="mt-4">Event name in japanese (optional)</p>
      <input v-model="name_jpn" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
      <button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
      <button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
    </form>
  </div>
</div>
</template>

<script>
import { inject, ref } from 'vue'
import { create, update, del } from '../utils/websocket'

export default {
  setup() {
    const store = inject('store')

    const item = ref('')
    const name = ref('')
    const name_arabic = ref('')
    const name_jpn = ref('')

    const setItem = (e) => {
      item.value = e._id
      name.value = e.name
      name_arabic.value = e.name_arabic
      name_jpn.value = e.name_jpn
    }

    const reset = () => {
      item.value = ''
      name.value = ''
    }

    const form = () => {
      if (item.value !== '') {
        update('events', item.value, {
          name: name.value,
          name_arabic: name_arabic.value,
          name_jpn: name_jpn.value,
        })
      } else if (name.value !== '' && name_arabic.value !== '' && name_jpn.value !== '') {
        create('events', {
          name: name.value,
          name_arabic: name_arabic.value,
          name_jpn: name_jpn.value,
        })
      }
      reset()
    }

    const delForm = () => {
      if (item.value) {
        del('events', item.value)
        reset()
      }
    }

    return {
      store,
      item,
      name,
      name_arabic,
      name_jpn,
      setItem,
      form,
      delForm,
    }
  },
}
</script>

<style>
.item:hover {
  @apply bg-gray-300 cursor-pointer;
}
.item.active {
  @apply bg-gray-400;
}
</style>
