<script setup lang="ts">
import ApplicationChat from '@/components/application/ApplicationChat.vue';
import ApplicationForm from '@/components/application/ApplicationForm.vue';
import { onMounted, ref } from 'vue';
import { ApplicationData, approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, ApplicationStatus } from '@/api/application';
import { useRoute } from 'vue-router';
import Button from '@/components/ui/button/Button.vue';
import { CheckIcon, XIcon } from 'lucide-vue-next';

const appData = ref<ApplicationData>(null);
const appID = ref<number | null>(null);
const chatData = ref<object[]>([])
const readOnly = ref<boolean>(false);
const newApp = ref<boolean>(null);
const status = ref<ApplicationStatus>(null);
const decisionDate = ref<Date | null>(null);
const submitDate = ref<Date | null>(null);
const loading = ref<boolean>(true);
const member_name = ref<string>();
onMounted(async () => {
    try {
        //get app ID from URL param
        const router = useRoute();
        const appIDRaw = router.params.id;
        if (appIDRaw === undefined) {
            //new app
            appData.value = null
            readOnly.value = false;
            newApp.value = true;
        } else {
            //load app
            const raw = await loadApplication(appIDRaw.toString());

            const data = raw.application;

            appID.value = data.id;
            appData.value = data.app_data;
            chatData.value = raw.comments;
            status.value = data.app_status;
            decisionDate.value = new Date(data.decision_at);
            submitDate.value = data.submitted_at ? new Date(data.submitted_at) : null;
            member_name.value = data.member_name;
            newApp.value = false;
            readOnly.value = true;
        }
    } catch (e) {
        console.error(e);
    }
    loading.value = false;
})

async function postComment(comment) {
    chatData.value.push(await postChatMessage(comment, appID.value));
}

async function postApp(appData) {
    console.log("test")
    const res = await postApplication(appData);
    if (res.ok) {
        readOnly.value = true;
        newApp.value = false;
    }
    // TODO: Handle fail to post
}

async function handleApprove(id) {
    console.log("hi");
    await approveApplication(id);
}

async function handleDeny(id) {
    await denyApplication(id);
}
</script>

<template>
    <div v-if="!loading" class="max-w-3xl mx-auto my-20">
        <div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
            <!-- Application header -->
            <div>
                <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
                <p class="text-muted-foreground">Submitted: {{ submitDate.toLocaleString("en-US", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                    hour: "2-digit",
                    minute: "2-digit"
                }) }}</p>
            </div>
            <div>
                <h3 class="text-right" :class="[
                    'font-semibold',
                    status === ApplicationStatus.Pending && 'text-yellow-500',
                    status === ApplicationStatus.Accepted && 'text-green-500',
                    status === ApplicationStatus.Denied && 'text-red-500'
                ]">{{ status }}</h3>
                <p v-if="status != ApplicationStatus.Pending" class="text-muted-foreground">{{ status }}: {{
                    decisionDate.toLocaleString("en-US", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                        hour: "2-digit",
                        minute: "2-digit"
                    }) }}</p>
                <div class="mt-2" v-else>
                    <Button variant="success" class="mr-2" :onclick="() => { handleApprove(appID) }">
                        <CheckIcon></CheckIcon>
                    </Button>
                    <Button variant="destructive" :onClick="() => { handleDeny(appID) }">
                        <XIcon></XIcon>
                    </Button>
                </div>
            </div>
        </div>
        <div v-else class="flex flex-row justify-between items-center py-2 mb-8">
            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>
        </div>
        <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7">
        </ApplicationForm>
        <div v-if="!newApp">
            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
            <ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
        </div>
    </div>
    <!-- TODO: Implement some kinda loading screen -->
    <div v-else>Loading</div>
</template>