<template>
    <page-header title="Mitgliedschaften" @close="$emit('close')">
        <template #toolbar>
            <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue Mitgliedschaft</page-toolbar-button>
            <page-toolbar-button v-if="single !== null" color="primary" icon="undo" @click.prevent="single = null">Zurück</page-toolbar-button>
        </template>
    </page-header>

    <form v-if="single && meta !== null" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
        <f-select id="group_id" v-model="single.group" name="group_id" :options="meta.groups" label="Gruppierung" required />
        <f-select id="activity_id" v-model="single.activity" name="activity_id" :options="meta.activities" label="Tätigkeit" required />
        <f-select v-if="single.activity"
                  id="subactivity_id"
                  :model-value="single.subactivity"
                  name="subactivity_id"
                  :options="meta.subactivities[single.activity.id]"
                  label="Untertätigkeit"
                  @update:model-value="setSubactivityId(single, $event)"
        />
        <f-switch v-if="displayPromisedAt"
                  id="has_promise"
                  name="has_promise"
                  :model-value="single.promisedAt !== null"
                  label="Hat Versprechen"
                  @update:model-value="setPromisedAtSwitch(single, $event)"
        />
        <f-text v-show="displayPromisedAt && single.promisedAt !== null" id="promised_at" v-model="single.promisedAt" type="date" label="Versprechensdatum" size="sm" />
        <button type="submit" class="btn btn-primary">Absenden</button>
    </form>

    <div v-else class="grow">
        <table class="custom-table custom-table-light custom-table-sm text-sm">
            <thead>
                <tr>
                    <th>Tätigkeit</th>
                    <th>Untertätigkeit</th>
                    <th>Datum</th>
                    <th>Aktiv</th>
                    <th />
                </tr>
            </thead>

            <tbody>
                <tr v-for="(membership, index) in data" :key="index">
                    <td v-text="membership.activity?.name" />
                    <td v-text="membership.subactivity?.name" />
                    <td v-text="membership.from?.human" />
                    <td><ui-boolean-display :value="membership.isActive" dark /></td>
                    <td class="flex space-x-1">
                        <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite src="pencil" /></a>
                        <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite src="trash" /></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import dayjs from 'dayjs';

defineEmits(['close']);
import { useApiIndex } from '../../composables/useApiIndex.ts';

const props = defineProps({
    url: {
        type: String,
        required: true,
    },
});
const { data, meta, reload, single, create, edit, submit, remove } = useApiIndex<App.Member.Data.MembershipData, App.Member.Data.MembershipMeta>(props.url, 'membership');

function setPromisedAtSwitch(single, value) {
    single.promised_at = value ? dayjs().format('YYYY-MM-DD') : null;
}

const displayPromisedAt = computed(function () {
    if (!single.value || !single.value.activity || !single.value.subactivity) {
        return false;
    }

    return meta.value.subactivities[single.value.activity_id].find((s) => s.id === single.value.subactivity_id).is_age_group;
});

function setSubactivityId(single, value) {
    single.subactivity_id = value;

    return displayPromisedAt;
}

await reload();
</script>
