<script setup>
import {onBeforeMount, ref} from "vue";
import {invoke} from "@tauri-apps/api";
import {Icon} from "@iconify/vue";
import EditModal from "./components/modals/EditModal.vue";
import CreateModal from "./components/modals/CreateModal.vue";

import { appWindow } from '@tauri-apps/api/window';

import {useDark, useToggle} from "@vueuse/core";
import PriorityModal from "./components/modals/PriorityModal.vue";

const isDark = useDark();
const toggleDark = useToggle(isDark);

let tasks = ref({});
let pending = ref(true);

let create_modal = ref(false);
let edit_modal = ref(false);
let priority_modal = ref(false);

let search_text = ref("");

let to_edit_id = ref("");
let to_edit_name = ref("");
let to_edit_description = ref("");
let to_edit_priority = ref(0);

let to_change_id = ref("");
let to_change_name = ref("");
let to_change_priority = ref("");

onBeforeMount(async () => {
    await invoke('check_or_create_tasks_file');

    await get_tasks();
    pending.value = false;

    document
        .getElementById('titlebar-minimize')
        .addEventListener('click', () => appWindow.minimize())
    document
        .getElementById('titlebar-maximize')
        .addEventListener('click', () => appWindow.toggleMaximize())
    document
        .getElementById('titlebar-close')
        .addEventListener('click', () => appWindow.close())
});


function compare_priority(a, b) {
    if ( parseInt(a.priority) < parseInt(b.priority) ){
        return -1;
    }
    if ( parseInt(a.priority) > parseInt(b.priority) ){
        return 1;
    }
    return 0;
}

async function get_tasks(){
    let tmp_tasks = [];
    await invoke('get_tasks').then((res) => {
        for (let value in res){
            tmp_tasks.push(res[value]);
        }
        tasks.value = tmp_tasks.sort(compare_priority).reverse();
    });
}

async function search_tasks(event){
    let tmp_tasks = [];
    if (event.target.value) {
        await invoke('search_tasks', {
            value: event.target.value
        }).then((res) => {
            for (let value in res){
                tmp_tasks.push(res[value]);
            }
            tasks.value = tmp_tasks.sort(compare_priority).reverse();
        });
    } else{
        await get_tasks();
    }
}

async function set_task_field(id_task, completed){
    let field = "completed"
    id_task = id_task.toString();
    completed = completed.toString();
    if (completed === "false"){
        completed = "true"
    } else{
        completed = "false"
    }
    await invoke('set_task_field', {
        idTask: id_task,
        field: field,
        value: completed
    }).then(async () => {
        for (let index in tasks.value){
            if (tasks.value[index].id === id_task){
                tasks.value[index][field] = completed;
                break;
            }
        }
    });
}

async function delete_task(id_task){
    id_task = id_task.toString();
    await invoke('delete_task', {
        idTask: id_task
    }).then(async () => {
        await get_tasks();
    });
}

function edit_task(id_task, name, description, priority){
    window.scrollTo({top:0});
    to_edit_id.value = id_task;
    to_edit_name.value = name;
    to_edit_description.value = description;
    to_edit_priority.value = priority;
    edit_modal.value = true;
}

function change_priority(id_task, name, priority){
    window.scrollTo({top:0});
    to_change_id.value = id_task;
    to_change_name.value = name;
    to_change_priority.value = priority;
    priority_modal.value = true;
}
</script>


<template>
    <div data-tauri-drag-region class="z-50 opacity-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
        <div class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-minimize">
            <Icon class="" icon="mdi:window-minimize" width="20" height="20"/>
        </div>
        <div class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-maximize">
            <Icon class="" icon="mdi:window-maximize" width="20" height="20"/>
        </div>
        <div class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-close">
            <Icon class="" icon="mdi:close" width="26" height="26"/>
        </div>
    </div>
    <div v-if="pending"></div>
    <div v-else>
        <button class="absolute top-10 right-2" @click="toggleDark()">
            <Icon v-if="!isDark" class="group-hover:invert text-yellow-400" icon="flowbite:sun-solid" width="38" height="38"/>
            <Icon v-else class="group-hover:invert text-blue-400" icon="ri:moon-fill" width="38" height="38"/>
        </button>
        <div id="search" class="relative flex h-10 mx-[15vw] lg:mx-[25vw] mt-12">
            <div class="!absolute right-1 top-1 z-10">
                <button
                    v-if="search_text !== ''"
                    @click="search_text = ''; get_tasks()"
                    class="p-[1px] pt-[1px] pb-[2px] mr-0.5 rounded-lg group text-gray-400 hover:text-gray-500 transition-colors"
                    type="button"
                    data-ripple-light="true"
                >
                    <Icon icon="ic:baseline-close" width="26" height="26"/>
                </button>
                <button
                    @click="create_modal = !create_modal"
                    class="p-[1px] pt-[1px] pb-[2px] border-green-400 border-2 rounded-lg group hover:bg-green-400 transition-colors"
                    type="button"
                    data-ripple-light="true"
                >
                    <Icon class="group-hover:invert dark:invert" icon="ic:baseline-plus" width="26" height="26"/>
                </button>
            </div>
            <input
                v-model="search_text"
                type="text"
                class="peer h-full w-full rounded-lg border border-blue-gray-200 bg-transparent px-3 py-2.5 pr-20 font-sans text-sm font-normal text-blue-gray-700 dark:text-white dark:border-white outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-green-400 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
                :class="{'dark:border-t-[rgb(30,30,30)]': search_text.length}"
                placeholder=" "
                @input="search_tasks"
            />
            <label class="text-gray-400 dark:text-gray-300 focus:text-black before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-lg after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-green-400 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-green-400 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-green-400 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
                Поиск...
            </label>
        </div>
        <div id="list" class="relative mx-[14vw] lg:mx-[22vw] mt-5">
            <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-500">
                <li v-for="task in tasks" :id="task.id" class="flex justify-between gap-x-6 py-5 group/task">
                    <div @click="set_task_field(task.id, task.completed)" class="inline-flex items-center space-x-2 min-w-0 gap-x-2 group-hover/task:cursor-pointer">
                        <p class="text-sm flex-none border rounded-full" :class="[ task.completed === 'true' ? 'border-green-500 group-hover:border-green-400' : 'border-gray-300 group-hover:border-gray-500' ]"><Icon class="m-0.5" :class="[ task.completed === 'true' ? 'text-green-500 group-hover:text-green-400' : 'text-gray-50 group-hover:text-gray-500 dark:text-[rgb(30,30,30)]' ]" icon="material-symbols:check" width="20" height="20"/></p>
                        <div class="min-w-0 flex-auto">
                            <p class="truncate sm:text-[2vw] lg:text-[1.5vw] xl:text-[1vw] font-semibold leading-6 decoration-2" :class="[ task.completed === 'true' ? 'line-through text-gray-400' : 'text-gray-900 dark:text-gray-300' ]" >{{task.name}}</p>
                            <p class="truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{task.description}}</p>
                        </div>
                    </div>
                    <div class="shrink-0 group-hover/task:opacity-100 transition-all">
                        <div class="inline-flex items-center gap-x-1">
                            <div title="Приоритет" class="mr-4 cursor-pointer drop-shadow-sm dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.35)]" @click="change_priority(task.id, task.name, task.priority)">
                                <Icon v-if="parseInt(task.priority) === 0" class="opacity-60 dark:text-white text-gray-500" icon="streamline:signal-none-solid" width="26" height="26"/>
                                <Icon v-if="parseInt(task.priority) > 0 && parseInt(task.priority) < 4" class="opacity-80 text-orange-300" icon="streamline:signal-low-solid" width="26" height="26"/>
                                <Icon v-if="parseInt(task.priority) >= 4 && parseInt(task.priority) < 7" class="opacity-85 text-amber-500" icon="streamline:signal-medium-solid" width="26" height="26"/>
                                <Icon v-if="parseInt(task.priority) >= 7 && parseInt(task.priority) < 9" class="opacity-90 text-orange-600" icon="streamline:signal-full-solid" width="26" height="26"/>
                                <Icon v-if="parseInt(task.priority) >= 9" class="opacity-100 text-red-500" icon="heroicons-solid:exclamation" width="32" height="32"/>
                            </div>
                            <p class="mt-0.5 text-xs text-gray-400 mr-2 text-center">{{task.date}}<br>{{task.time}}</p>
                            <button @click="edit_task(task.id, task.name, task.description, task.priority)" class="group/button border-2 rounded-lg p-1.5 border-green-400/70 hover:bg-green-400 hover:border-green-400 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="mdi:pencil" width="24" height="24" style="color: black"/></button>
                            <button @click="delete_task(task.id)" class="group/button border-2 rounded-lg p-1.5 border-red-400/70 hover:bg-red-500 hover:border-red-500 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="ic:baseline-delete" width="24" height="24" style="color: black"/></button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="create_modal || edit_modal || priority_modal" class="bg-black w-[100vw] h-full fixed top-0 opacity-70 z-40"/>
        <CreateModal v-if="create_modal" @close="create_modal = !create_modal"/>
        <EditModal v-if="edit_modal" :task_id="to_edit_id" :task_name="to_edit_name" :task_description="to_edit_description" :task_priority="to_edit_priority" @close="edit_modal = !edit_modal"/>
        <PriorityModal v-if="priority_modal" :task_id="to_change_id" :task_name="to_change_name" :task_priority="to_change_priority" @close="priority_modal = !priority_modal"/>
    </div>
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    overflow-x: hidden;
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    background-color: rgb(249 250 251);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

:root.dark {
    background-color: rgb(30, 30, 30);
}
</style>
