<template>
  <div @click.self="showModel = false" v-if="showModel" class="fixed flex justify-center items-center h-screen w-full bg-black top-0 left-0 z-50 bg-opacity-50" >
    <form @submit.prevent="submitModalForm" class="dark:bg-neutral-800 bg-neutral-200 p-10 rounded-xl flex flex-col w-full max-w-sm">
      <h1 class="font-bold text-center text-lg mb-5">Tijd {{ modelData.eventName }}</h1> 
      
      <label class="font-bold">Westrijd</label>
      <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />

      <label class="font-bold">Type zwembad</label>
      <select :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.type" required="true" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" type="text">
        <option value="50m">50 Meter</option>
        <option value="25m">25 Meter</option>
      </select>

      <label class="font-bold">Tijd</label>
      <div class="mb-1">
        <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.time.minutes" type="number" step="1" min="0" max="99" placeholder="mm" class="input dark:bg-neutral-700 bg-neutral-300 w-10 text-center p-1" />
        <span class="text-default text-xl font-bold mx-1">:</span>
        <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.time.seconds" type="number" step="1" min="0" max="99" placeholder="ss" class="input dark:bg-neutral-700 bg-neutral-300 w-10 text-center p-1" />
        <span class="text-default text-xl font-bold mx-1">:</span>
        <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.time.milliseconds" type="number" step="1" min="0" max="99" placeholder="ms" class="input dark:bg-neutral-700 bg-neutral-300 w-10 text-center p-1" />
      </div>
  
      <div class="flex items-center mb-5">
        <input :disabled="!userData.wedstrijdAdmin" type="checkbox" v-model="modelData.dsq" class="mr-1 checkbox">
        <span class="text-default">Diskwalificatie</span>
      </div>

      <label class="font-bold">Info </label>
      <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.info" type="text" placeholder="Bijv. Een diskwalificatie" class="input dark:bg-neutral-700 bg-neutral-300 mb-10" />

      <input v-if="userData.wedstrijdAdmin" :disabled="disableButtons" type="submit" class="btn" value="Bewerken" />
    </form>
  </div>
    <div v-if="timings[0]" class="flex flex-col justify-center items-center gap-y-3 px-2 overflow-hidden">
      <div class="flex gap-x-5">
        <div class="relative">
          <button @click.stop="showDeelnemersDropdown = !showDeelnemersDropdown" class="btn">Deelnemers <Icon size="1.2em" name="ion:arrow-down-b" /></button>
          <div v-if="showDeelnemersDropdown" v-on-click-outside.bubble="handleDeelnemersDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
            <ul class="space-y-2 text-default">
              <li v-for="competitor in competitors" @click="competitor.checked = !competitor.checked" class="flex gap-x-1 items-center hover:cursor-pointer">
                <input v-model="competitor.checked" type="checkbox" class="checkbox">
                <label class="hover:cursor-pointer">{{ competitor.name }}</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="relative">
          <button @click.stop="showPropertiesDropdown = !showPropertiesDropdown" class="btn">Eigenschappen <Icon size="1.2em" name="ion:arrow-down-b" /></button>
          <div v-if="showPropertiesDropdown" v-on-click-outside.bubble="handlePropertiesDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
            <ul class="space-y-2 text-default">
              <li v-for="property in Object.values(properties)" @click="property.enabled = !property.enabled" class="flex gap-x-1 items-center hover:cursor-pointer">
                <input v-model="property.enabled" type="checkbox" class="checkbox">
                <label class="hover:cursor-pointer">{{ property.name }}</label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div v-for="event in events" class="container w-full max-w-2xl py-2 px-4">
        <div @click="event.open = !event.open" class="flex hover:cursor-pointer">
          <h2 class="font-bold">{{ event.name }}</h2>  
          <span v-if="filteredTimings.filter(a => a.event === event.id).length > 0" class="ml-auto">{{ filteredTimings.filter(a => a.event === event.id)[0].time.minutes }}:{{ timings.filter(a => a.event === event.id)[0].time.seconds }}:{{ timings.filter(a => a.event === event.id)[0].time.milliseconds }}</span>
          <span v-else class="ml-auto">Geen tijd</span>
          <Icon size="1.2em" name="ion:arrow-down-b" class="my-auto ml-2 transition-all" :class="{'rotate-180' : event.open }" />
        </div>
        <div v-if="event.open" class="mt-2">
          <table class="table-fixed text-left w-full even:bg-gray-500">
            <thead class="font-bold">
              <tr>
                <th v-for="property in Object.values(properties).filter(a => a.enabled === true)">{{ property.name }}</th>
              </tr>
            </thead>
            <tbody>
              <tr @click="handleModel(time, event, index)" v-for="(time, index) in filteredTimings.filter(a => a.event === event.id)" class="even:dark:bg-neutral-700 even:bg-neutral-300 hover:cursor-pointer">
                <td v-if="properties.time.enabled" class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
                <td v-if="properties.date.enabled">{{ time.contest.date }}</td>
                <td v-if="properties.name.enabled" class="overflow-hidden whitespace-nowrap truncate">{{ competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[1] + ' ' + competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[0] }}</td>
                <td v-if="properties.type.enabled">{{ time.contest.type }}</td>
                <td v-if="properties.contest.enabled">{{ time.contest.name }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
</template>

<script setup>
import { collection, query, where, getDocs, doc, updateDoc} from "firebase/firestore";
import { useToast } from 'vue-toastification'
import { vOnClickOutside} from '@vueuse/components'

definePageMeta({
  title: 'Brigade Tijden',
  key: 'back'
})

const { db, userData, competitors } = inject('firebase')
const toast = useToast()

const timings = ref([])
const showModel = ref(false)
const disableButtons = ref(false)
const showDeelnemersDropdown = ref(false)
const showPropertiesDropdown = ref(false)

const handleDeelnemersDropdown = () => {
  showDeelnemersDropdown.value = false 
}

const handlePropertiesDropdown = () => {
  showPropertiesDropdown.value = false 
}

const filteredTimings = computed(() => {
  return timings.value.filter(a => competitors.value.filter(b => b.checked === true).map(x => x.relatiecode).includes(a.relatiecode))
})

const modelData = ref({
  time: {
    minutes: null,
    seconds: null,
    milliseconds: null,
  },
  dsq: false,
  info: '',
  contest: {
    type: '',
    name: '',
    date: '',
  }
})

const properties = ref({
  time: {
    enabled: true,
    id: 'time',
    name: 'Tijd',
  },
  date: {
    enabled: true,
    id: 'date',
    name: 'Datum',
  },
  name: {
    enabled: true,
    id: 'name',
    name: 'Naam',
  },
  type: {
    enabled: false,
    id: 'type',
    name: 'Type zwembad',
  },
  contest: {
    enabled: false,
    id: 'contest',
    name: 'Wedstrijd',
  },
})

const events = ref({
  obstacleSwim: {
    open: false,
    name: '200m Obstacle Swim',
    id: 'obstacleSwim',
    competitors: [],
  }, 
  manikinCarry: {
    open: false,
    name: '50m Manikin Carry',
    id: 'manikinCarry',
    competitors: [],
  }, 
  rescueMedley: {
    open: false,
    name: '100m Rescue Medley',
    id: 'rescueMedley',
    competitors: [],
  }, 
  manikinCarryWithFins: {
    open: false,
    name: '100m Manikin Carry with Fins',
    id: 'manikinCarryWithFins',
    competitors: [],
  }, 
  manikinTowWithFins: {
    open: false,
    name: '100m Manikin Tow with Fins',
    id: 'manikinTowWithFins',
    competitors: [],
  }, 
  superLifesaver: {
    open: false,
    name: '200m Super Lifesaver',
    id: 'superLifesaver',
    competitors: [],
  }, 
})

const getCompetitors = async () => {
  if (competitors.value[0]) return
  const querySnapshot = await getDocs(collection(db, "competitors"))
  querySnapshot.forEach((doc) => {
    const data = doc.data()
    data.checked = true
    competitors.value.push(data)
  })
}

onMounted(async () => {
  const citiesRef = collection(db, "timings");  

  const q = query(citiesRef);

  const querySnapshot = await getDocs(q);

  querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots
    const data = doc.data()
    data.id = doc.id

    timings.value.push(data)
  });

  timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
  getCompetitors()
})


const handleModel = (competitor, e, index) => {
  modelData.value = competitor
  modelData.value.index = index
  modelData.value.eventId = e.id
  showModel.value = true
}

const submitModalForm = async () => {
  if (!modelData.value.time.minutes) modelData.value.time.minutes = 0
  if (!modelData.value.time.seconds) modelData.value.time.seconds = 0
  if (!modelData.value.time.milliseconds) modelData.value.time.milliseconds = 0
  const id = modelData.value.id

  delete modelData.value.index
  delete modelData.value.eventId
  delete modelData.value.id

  disableButtons.value = true 
  const combinedTime = modelData.value.time.minutes.toString().padStart(2, '0') + modelData.value.time.seconds.toString().padStart(2, '0') + modelData.value.time.milliseconds.toString().padStart(2, '0')
  modelData.value.time.combinedTime = combinedTime

  const docRef = doc(db, "timings", id);

  console.log(modelData.value)
  await updateDoc(docRef, modelData.value);
  
  toast.success('Tijd is bewerkt')
  showModel.value = false
  disableButtons.value = false 
}
</script>

<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style>
