<script setup>
import ForumApp from '@/vue/components/forum/ForumApp.vue';
import {onMounted, ref} from 'vue';
import {getDiscussionURL, getTopicURL} from '@/vue/components/forum/helpers/urls';
import {useSortable} from '@/vue/composables/useSortable';
import {$gettext} from '@/assets/javascripts/lib/gettext';
import StudipIcon from '@/vue/components/StudipIcon.vue';
import StudipDateTime from '@/vue/components/StudipDateTime.vue';
import SubscriptionDropdown from '@/vue/components/forum/SubscriptionDropdown.vue';
import {deserializeJSONAPIResponse} from '@/assets/javascripts/lib/jsonapiUtils';
import {subscriptionTransformer} from '@/vue/components/forum/helpers/transformers';
import StudipPagination from '@/vue/components/StudipPagination.vue';
import Loader from '@/vue/components/forum/Loader.vue';

const subscriptions = ref([]);
const pagination = ref({});
const isLoading = ref(false);

const removeSubscription = subscriptionId => {
    subscriptions.value = subscriptions.value.filter(({ id }) => id !== subscriptionId);
}

const getSubjectLabel = type => {
    switch (type) {
        case 'forum-discussions':
            return $gettext('Diskussion');
        case 'forum-topics':
            return $gettext('Thema');
        default:
            return $gettext('Unbekannt');
    }
}

const getSubscriptionDropdownTitle = type => {
    switch (type) {
        case 'forum-discussions':
            return $gettext('Diskussion');
        case 'forum-topics':
            return $gettext('Thema');
        default:
            return $gettext('Abonnieren');
    }
}

const fetchSubscribedDiscussions = async (_, offset = 0) => {
    try {
        isLoading.value = true;

        const response = await STUDIP.jsonapi.withPromises().GET(
            `courses/${STUDIP.URLHelper.parameters.cid}/forum-subscriptions`,
            {
                data: { include: 'subject', page: { offset } }
            }
        );

        pagination.value = {
            ...response.meta.page,
            currentPage: response.meta.page.offset / response.meta.page.limit,
            links: response.links
        };

        const data = await deserializeJSONAPIResponse(response);

        subscriptions.value = data.map(subscriptionTransformer);
    } catch (error) {
        STUDIP.Report.error(error);
    } finally {
        isLoading.value = false;
    }
}

const {
    sortedData,
    sortBy,
    getSortClass,
    getAriaSortString,
    getAriaSortLabel
} = useSortable(subscriptions);

onMounted(async () => {
    await fetchSubscribedDiscussions();
});
</script>

<template>
    <ForumApp class="use-utility-classes">
        <header class="header">
            <div class="header__content header__content--with-actions">
                <div class="actions">
                    <h2>
                        {{ $gettext('Abonnements') }}
                    </h2>
                </div>
            </div>
        </header>
        <div class="py-10">
            <table class="default forum-table forum-table--subscription-index">
                <colgroup>
                    <col>
                    <col style="width: 5%">
                    <col style="width: 20%">
                    <col style="width: 15%">
                    <col style="width: 15%">
                </colgroup>
                <thead>
                    <tr class="sortable">
                        <th
                            scope="col"
                            :class="getSortClass('subject.name')"
                            :aria-sort="getAriaSortString('subject.name')"
                            :aria-label="getAriaSortLabel('subject.name', $gettext('Thema Name'))"
                        >
                            <button
                                type="button"
                                class="as-link"
                                @click="sortBy('subject.name')"
                                :title="$gettext('Nach Name des Thema sortieren')"
                                :aria-label="$gettext('Nach Name des Thema sortieren')"
                            >
                                {{ $gettext('Thema') }}
                            </button>
                        </th>
                        <th scope="col">
                            <span class="sr-only">{{ $gettext('Status der Diskussion') }}</span>
                        </th>
                        <th
                            scope="col"
                            :class="getSortClass('subject.type')"
                            :aria-sort="getAriaSortString('subject.type')"
                            :aria-label="getAriaSortLabel('subject.type', $gettext('Typ'))"
                        >
                            <button
                                type="button"
                                class="as-link"
                                @click="sortBy('subject.type')"
                                :title="$gettext('Nach Typ sortieren')"
                                :aria-label="$gettext('Nach Typ sortieren')"
                            >
                                {{ $gettext('Typ') }}
                            </button>
                        </th>
                        <th
                            scope="col"
                            :class="getSortClass('mkdate')"
                            :aria-sort="getAriaSortString('mkdate')"
                            :aria-label="getAriaSortLabel('mkdate', $gettext('Abonniert datum'))"
                        >
                            <button
                                type="button"
                                class="as-link"
                                @click="sortBy('mkdate')"
                                :title="$gettext('Nach Abonniert am sortieren')"
                                :aria-label="$gettext('Nach Abonniert am sortieren')"
                            >
                                {{ $gettext('Abonniert am') }}
                            </button>
                        </th>
                        <th
                            scope="col"
                            class="actions"
                            :class="getSortClass('notification_type')"
                            :aria-sort="getAriaSortString('notification_type')"
                            :aria-label="getAriaSortLabel('notification_type', $gettext('Typ des Abonnements'))"
                        >
                            <button
                                type="button"
                                class="as-link"
                                @click="sortBy('notification_type')"
                                :title="$gettext('Nach Typ des Abonnements sortieren')"
                                :aria-label="$gettext('Nach Typ des Abonnements sortieren')"
                            >
                                {{ $gettext('Typ des Abonnements') }}
                            </button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="isLoading" >
                        <td colspan="5">
                            <Loader />
                        </td>
                    </tr>
                    <tr v-else v-for="subscription in sortedData" :key="subscription.id">
                        <td>
                            <div class="table-row-overview">
                                <div class="title-with-actions">
                                    <div class="title-with-actions__content">
                                        <a v-if="subscription.subject.type === 'forum-topics'" :href="getTopicURL(subscription.subject.id)" :title="$gettext('Zum Thema')">
                                            <span class="subscription-title as-link line-clamp-2">{{ subscription.subject.name }}</span>
                                        </a>
                                        <a v-else-if="subscription.subject.type === 'forum-discussions'" :href="getDiscussionURL(subscription.subject.id)" :title="$gettext('Zur Diskussion')">
                                            <span class="subscription-title as-link line-clamp-2">{{ subscription.subject.title }}</span>
                                        </a>
                                    </div>

                                    <div class="title-with-actions__actions-xs">
                                        <SubscriptionDropdown
                                            :type="getSubscriptionDropdownTitle(subscription.subject.type)"
                                            :subject="subscription.subject"
                                            :subject_id="subscription.subject_id"
                                            :userSubscription="subscription"
                                            @deleted="removeSubscription(subscription.id)"
                                        />
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <template v-if="subscription.subject.type === 'forum-discussions'">

                                <StudipIcon
                                    v-if="subscription.subject.closed_at"
                                    :title="$gettext('Diskussion ist geschlossen')"
                                    shape="lock-locked2"
                                    :size="20"
                                    role="inactive"
                                    aria-hidden="true"
                                />
                                <span role="status" class="sr-only">
                                    {{ subscription.subject.closed_at ? $gettext('Diskussion ist geschlossen') : $gettext('Diskussion ist offen') }}
                                </span>
                            </template>
                        </td>
                        <td>
                            {{ getSubjectLabel(subscription.subject.type) }}
                        </td>
                        <td>
                            <StudipDateTime :iso="subscription.mkdate" :relative="true" />
                        </td>
                        <td class="actions">
                            <div class="inline-flex">
                                <SubscriptionDropdown
                                    :type="getSubscriptionDropdownTitle(subscription.subject.type)"
                                    :subject="subscription.subject"
                                    :userSubscription="subscription"
                                    @deleted="removeSubscription(subscription.id)"
                                />
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot v-if="pagination.total > pagination.limit">
                    <tr>
                        <td colspan="5">
                            <StudipPagination
                                :currentPage="pagination.currentPage"
                                :totalItems="pagination.total"
                                :itemsPerPage="pagination.limit"
                                @pageUpdated="fetchSubscribedDiscussions" />
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </ForumApp>
</template>
