<script setup lang="ts">

import {API} from "@/services/api";

import {onMounted, reactive, ref} from "vue";
import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
import Input from "@/components/Input.vue";

const props = defineProps<{
    gottesdienste: Gottesdienst[],
    ministranten: SimplifiedMinistrant[]
    marks: Mark[],
    edit: boolean
}>()
const emit = defineEmits(["toggleMark", "added", "delete"])

const data = reactive({
    godi: {}
})

onMounted(() => {
    window.addEventListener("keypress", ev => {
        if(ev.key == "Enter" && props.add){
            emit("added", data.godi)
        }
    })
})


function getIconForMark(gid, mid) {
    const mark = getMark(gid, mid).value
    switch (mark) {
        case -1:
            return "remove";
        case 0:
            return "question_mark";
        case 1:
            return "close"
    }
    return ""
}


function getClassForMark(gid, mid) {
    const mark = getMark(gid, mid).value
    switch (mark) {
        case -1:
            return "minus";
        case 0:
            return "neutral";
        case 1:
            return "cross"
    }
    return ""
}

function two(s){
    return (s < 10 ? "0" : "") + s
}

function formatDay(time) {
    let date = new Date(time)
    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
}

function formatTime(time) {
    let date = new Date(time)
    return two(date.getHours()) + ":" + two(date.getMinutes())
}

function formatWeekday(time) {
    let date = new Date(time)
    switch(date.getDay()) {
        case 1: return "Mo";
        case 2: return "Di";
        case 3: return "Mi";
        case 4: return "Do";
        case 5: return "Fr";
        case 6: return "Sa";
        case 0: return "So"
    }
}

function getMark(gid, mid) {
    const mark = props.marks.find(mark => mark.mid == mid && mark.gid == gid)
    return mark ? mark : {gid, mid, value: 0}
}

function toggleMark(gid, mid) {

}
</script>

<template>

    <table>

        <thead>

        <tr>
            <th></th>
            <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
        </tr>

        <tr>
            <th></th>
            <th v-for="godi in props.gottesdienste">{{ godi.name }}</th>
            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.name"/></th>
        </tr>
        <tr>
            <th></th>
            <th v-for="godi in props.gottesdienste">{{ formatDay(godi.date) }}</th>
            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.date" type="date"/></th>
        </tr>
        <tr>
            <th></th>
            <th v-for="godi in props.gottesdienste">{{ formatTime(godi.date) }}</th>
            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.time" type="time"/></th>
        </tr>
        <tr>
            <th></th>
            <th v-for="godi in props.gottesdienste">{{ formatTime(godi.attendance) }}</th>
            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.attendance" type="time"/></th>
        </tr>
        <tr>
            <th></th>
            <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
            <th class="edit" v-if="props.edit"></th>
        </tr>

        </thead>
        <tbody>

        <tr v-for="mini in props.ministranten" class="ministrant">
            <td>{{mini.firstname}} {{mini.lastname}}</td>
            <td
                v-for="godi in props.gottesdienste"
                class="mark"
                :class="getClassForMark(godi.id, mini.id)"
                @click="$emit('toggleMark', godi.id, mini.id)">
                <i class="icon"> {{getIconForMark(godi.id, mini.id)}} </i>
            </td>
        </tr>

        </tbody>
    </table>
</template>

<style scoped lang="less">

th.edit {
  text-align: start;
}

table{
  border-spacing: 0;
}

.ministrant{
  min-height: 20px;
}

.mark {
  text-align: center;
  vertical-align: center;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  height: 20px;
  cursor: pointer;
  user-select: none;

  i {
    border-radius: 100%;
    padding: 1px;
    font-size: 20px;
    margin: 5px;
  }

  &.minus i {
    background: #f92626;
    color: #690b0b;
  }

  &.cross i{
    background: #15bf15;
    color: #045b04;
  }

  &.neutral i{
    color: #c0c0c0;
    font-variation-settings: "wght" 350;
  }
}

tr:nth-child(5n) td{
  border-bottom: 1px solid black;
}
</style>
