<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { debounce } from "lodash";
import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import { Message } from "@arco-design/web-vue";
import { type Menu } from "../../types/Menu";
import HISTORY from "../../assets/icons/history.svg";
import CLIPBOARD from "../../assets/icons/clipboard.svg";
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";

const menuList = reactive<Menu[]>([
    {
        id: 1,
        name: "翻译历史",
        icon: HISTORY,
        async onClick() {
            await invoke("create_window", { label: "history", title: "翻译历史", url: "/history", width: 500.0, height: 600.0 });
        },
    },
    {
        id: 2,
        name: "剪贴板",
        icon: CLIPBOARD,
        onClick() {
            new WebviewWindow("clipboard", {
                url: "/clipboard",
                title: "剪贴板",
            });
        }
    }
]);
const autoCopy = ref(false);
let unlisten: Function;
const loading = ref(false);
const form = reactive<{
    in: null | string;
    out: null | string;
}>({
    in: null,
    out: null,
});

const copy = () => {
    invoke("copy", { content: form.out });
    Message.success("复制成功");
};

const changeIn = debounce(async () => {
    loading.value = true;
    form.out = null;
    await invoke("translate_steam", { content: form.in });
    if (autoCopy.value) copy();
    loading.value = false;
}, 1500);

const listen_start = async () => {
    unlisten = await listen("translate_steam", (event) => {
        loading.value = false;
        if (!form.out) form.out = "";
        form.out += event.payload;
    });
};

const clear = () => {
    form.in = null;
    form.out = null;
}

onMounted(() => {
    listen_start();
});

onUnmounted(() => {
    unlisten();
});
</script>

<template lang="pug">
    div.w-full.p-3.h-screen.flex.flex-col.gap-3
        div.content.no-select
            div.content-item
                div.content-header 中文
                div.content-hr
                div.content-body
                    a-textarea(v-model="form.in" @input="changeIn").content-body-textarea
                    a-button.content-body-copy-btn(@click="clear()") 清空
            div.content-item
                div.content-header
                    div 英文
                    div.flex.items-center.gap-2
                        div.text-info 自动复制
                        a-switch(v-model:model-value="autoCopy")
                div.content-hr
                div.content-body
                    view(v-if="loading") 加载中...
                    a-textarea(v-model="form.out" v-else).content-body-textarea
                    a-button.content-body-copy-btn(@click="copy()") 复制
        div.tools.no-select
            div.tools-item(v-for="v in menuList" ::key="v.id" @click="v.onClick")
                img.tools-item-img(:src="v.icon" alt="alt")
</template>

<style lang="scss" scoped>
@reference "../../style/tailwindcss.css";

.tools {
    @apply p-2 bg-white rounded-xl overflow-hidden flex gap-3 flex-shrink-0;

    &-item {
        @apply size-[24px] aspect-square cursor-pointer duration-500 p-[3px] rounded-sm;

        &:hover {
            background-color: rgba(0, 0, 0, .1);
        }

        &:active {
            background-color: rgba(0, 0, 0, .2);
        }

        &-img {
            @apply size-full object-cover;
        }
    }
}

.content {
    @apply grid grid-cols-2 gap-3 h-full;

    &-item {
        @apply w-full bg-white rounded-xl overflow-hidden flex flex-col;
    }

    &-header {
        @apply p-3 h-[50px] flex items-center justify-between;
    }

    &-hr {
        @apply h-[1px] bg-[#ddd] w-full;
    }

    &-body {
        @apply p-3 flex flex-grow relative;

        &-textarea {
            @apply flex-grow min-h-[150px];
        }

        &-copy-btn {
            @apply absolute right-[24px] bottom-[24px];
        }
    }
}
</style>
