<script setup lang="ts">
    import { Icon } from '/@/components/Icon'
    import { useModal } from '/@/components/Modal'
    import AboutModal from './AboutModal.vue'
    import SettingModal from './SettingModal.vue'
    import { useElectron } from '@/hooks/electron/useElectron'
    import { useMessage } from '@/hooks/web/useMessage'
    import { useClientStoreWithOut } from '@/store/modules/client'

    const clientStore = useClientStoreWithOut()
    const { ipcRenderer: ipc } = useElectron()
    const { createConfirm, createMessage, notification } = useMessage()

    const isDebug = computed(() => clientStore.system?.debug)
    const isAlwaysOnTop = computed(() => clientStore.system?.alwaysOnTop)
    const isMaximized = ref<boolean>(false)
    const title = ref<string>($app.description)
    const [aboutRegister, { openModal: openAboutModal }] = useModal()
    const [settingRegister, { openModal: openSettingModal }] = useModal()

    function handleAction(action: 'reload' | 'debug' | 'min' | 'max' | 'close' | 'top') {
        if (action === 'close') {
            createConfirm({
                iconType: 'warning',
                content: '确认关闭应用吗？',
                onOk: () => ipc.invoke('window:action', action),
            })
            return
        }

        if (action === 'top') {
            clientStore.setAlwaysOnTop(!isAlwaysOnTop.value)
        } else if (action === 'max') {
            isMaximized.value = !isMaximized.value
        }

        ipc.invoke('window:action', action)
        getCurrentInstance().proxy.$forceUpdate()
    }

    function about() {
        openAboutModal()
    }

    function setting() {
        openSettingModal()
    }

    onMounted(() => {
        // 监听全局通知
        ipc.on(
            'app:notify',
            (
                _,
                body: {
                    type: 'notify' | 'message'
                    icon: 'success' | 'warning' | 'info'
                    message: string
                    title?: string
                    duration?: number
                },
            ) => {
                console.log('app:notify', body)

                if (body.type === 'message') {
                    createMessage[body.icon](body.message, body.duration ?? 3)
                } else if (body.type === 'notify') {
                    notification[body.icon]({
                        message: body.title,
                        description: body.message,
                        duration: body.duration ?? 5,
                        placement: 'bottomRight',
                    })
                }
            },
        )

        ipc.on('window:action', (_, action: 'max' | 'unmax' | string) => {
            if (action === 'max' || action === 'unmax') {
                isMaximized.value = action === 'max'
            }
        })
    })
</script>

<template>
    <div class="header">
        <a-space class="title">
            <div class="title-icon">
                <img src="/logo.png" />
            </div>
            <div class="title-text">{{ title }}</div>
        </a-space>
        <a-space class="btns">
            <a-tooltip title="调试" v-if="isDebug">
                <a-button type="text" primary @click="handleAction('debug')">
                    <Icon icon="ant-design:bug-outlined" :size="22" />
                </a-button>
            </a-tooltip>
            <a-tooltip title="重新加载" v-if="isDebug">
                <a-button type="text" primary @click="handleAction('reload')">
                    <Icon icon="material-symbols:reopen-window-sharp" :size="22" />
                </a-button>
            </a-tooltip>
            <a-tooltip title="应用设置">
                <a-button type="text" primary @click="setting">
                    <Icon icon="uil:setting" :size="22" />
                </a-button>
            </a-tooltip>
            <a-tooltip title="关于">
                <a-button type="text" primary @click="about">
                    <Icon icon="uil:info-circle" :size="22" />
                </a-button>
            </a-tooltip>
            <a-tooltip :title="isAlwaysOnTop ? '取消置顶' : '置顶'">
                <a-button type="text" primary @click="handleAction('top')" :class="{ actived: isAlwaysOnTop }">
                    <Icon
                        :icon="isAlwaysOnTop ? 'ph:push-pin-fill' : 'ph:push-pin'"
                        :size="22"
                        :color="isAlwaysOnTop ? '#6ea2d7' : '#000'"
                    />
                </a-button>
            </a-tooltip>
            <a-tooltip title="最小化">
                <a-button type="text" primary @click="handleAction('min')">
                    <Icon icon="material-symbols:chrome-minimize-sharp" :size="24" />
                </a-button>
            </a-tooltip>
            <a-tooltip>
                <a-button type="text" primary @click="handleAction('max')" :title="isMaximized ? '还原' : '最大化'">
                    <Icon
                        :icon="
                            isMaximized
                                ? 'material-symbols:chrome-restore-outline-sharp'
                                : 'material-symbols:chrome-maximize-outline-sharp'
                        "
                        :size="24"
                    />
                </a-button>
            </a-tooltip>
            <a-tooltip title="关闭应用">
                <a-button type="text" primary @click="handleAction('close')" class="close">
                    <Icon icon="ant-design:close-outlined" :size="22" />
                </a-button>
            </a-tooltip>
        </a-space>

        <!-- 关于 -->
        <AboutModal @register="aboutRegister" />
        <!-- 软件配置 -->
        <SettingModal @register="settingRegister" />
    </div>
</template>

<style lang="less" scoped>
    .header {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        background-color: #fbfbfb;

        .title {
            -webkit-app-region: drag;
            cursor: pointer;
            flex: 1;
            height: 100%;
            font-size: 15px;
            font-weight: bold;
            display: flex;
            align-items: center;
            color: #444;

            .title-text {
                letter-spacing: 1px;
                font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            }

            .title-icon {
                width: 20px;
                height: 20px;
                margin-left: 10px;
            }
        }

        .btns {
            :deep(.ant-btn-text) {
                &:hover,
                &:focus {
                    background: rgb(0 0 0 / 7%);
                    transition: all 0.3s;
                }

                &.close:hover,
                &.clode:focus {
                    color: white;
                    background: #fa593b;
                }
            }

            .actived {
                background: rgb(0 0 0 / 7%) !important;
            }
        }

        :deep(.ant-tooltip) {
            z-index: 1000;
        }
    }
</style>
