<script setup lang="ts">
import { onBeforeMount, ref, watch, computed } from "vue";
import type { Task } from "@/types";
import { Copy, Trash, Check, X } from "@lucide/vue";
import { updateTask } from "@/api/tasks";
import { CronExpressionParser } from 'cron-parser'
import CronInput from "@/components/CronInput.vue";

const editMode = ref<boolean>(false);

const task = defineModel<Task>({ required: true });
const editName = ref<string>('');
const editCron = ref<string|null>(null);
const checked = computed<boolean>(() => {
    if (task.value.check_date === null) {
        return false;
    }
    if (task.value.reset_cron === null) {
        return true;
    }
    const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
    const nextDate = interval.next();
    return nextDate.getTime() > (new Date()).getTime();
});

function save() {
    void updateTask(task.value.id, { name: editName.value, reset_cron: editCron.value })
        .then((newTask) => {
            task.value = newTask;
        });
    task.value.name = editName.value;
    task.value.reset_cron = editCron.value;
    editMode.value = false;
}

function check() {
    if (!checked.value) {
        void updateTask(task.value.id, { check_date: (new Date()).toISOString(), previous_check_date: task.value.check_date?.toISOString() })
            .then((newTask) => {
                task.value = newTask;
            });
    } else {
        void updateTask(task.value.id, { check_date: null, previous_check_date: task.value.check_date?.toISOString() })
            .then((newTask) => {
                task.value = newTask;
            });
    }
}

onBeforeMount(() => {
    editName.value = task.value.name;
    editCron.value = task.value.reset_cron;
});
watch(task, () => {
    if (!editMode.value && task.value.name !== editName.value) {
        editName.value = task.value.name;
    }
    if (!editMode.value && task.value.reset_cron !== editCron.value) {
        editCron.value = task.value.reset_cron;
    }
});
</script>

<template>
    <div class="list-row text-left">
        <div class="content-center">
            <input type="checkbox" class="checkbox" :checked="checked" @click.prevent="check" />
        </div>
        <div
            v-if="!editMode"
            class="cursor-pointer text-lg select-none"
            @click.prevent="editMode = true"
        >
            {{ task.name }}
        </div>
        <template v-else>
            <div class="flex flex-col gap-2">
                <div class="flex justify-evenly">
                    <button class="btn btn-square me-1" @click="editMode = false">
                        <X />
                    </button>
                    <button class="btn btn-square me-1" @click="save">
                        <Check />
                    </button>
                    <button class="btn btn-square me-1">
                        <Copy />
                    </button>
                    <button class="btn btn-square">
                        <Trash />
                    </button>
                </div>
                <input v-model="editName" type="text" class="input w-full" />
                <CronInput v-model="editCron" :edit-mode="editMode" />
            </div>
        </template>
    </div>
</template>
