<template>
    <div :style="{ backgroundImage: `url(${isDark ? maskBgDark : maskBg})` }" class="bg-cover px-[30px]">
        <div class="alimamaShuHeiTi text-[28px] dark:text-white">挑选一个面具</div>
        <div class="text-base mt-[14px] dark:text-white">现在开始，与面具背后的灵魂碰撞</div>
        <n-grid :x-gap="26" :y-gap="26" :cols="2" class="py-[40px]">
            <n-grid-item
                class="mask h-[140px] flex flex-col items-center py-[10px]"
                :class="{ maskDark: isDark }"
                v-for="(item, index) in masks"
                :key="index"
                @click="update(item)"
            >
                <img :src="isDark ? item['icon']['dark'] : item['icon']['light']" class="w-[62px] h-[62px]" alt="" />

                <div
                    class="h-[44px] mt-[5px] color-black dark:color-white text-[15px] flex flex-col justify-center font-medium px-[20%] text-center"
                >
                    {{ item['name'] }}
                </div>
            </n-grid-item>
        </n-grid>

        <div class="flex py-[20%]">
            <n-button
                text
                @click="refreash()"
                size="large"
                class="flex-1 !px-[22px] !rounded-[30px] !bg-white !border-0 dark:!bg-[#20223C]"
                round
                :color="isDark ? '#fff' : '#000'"
            >
                <template #icon>
                    <img :src="isDark ? freashIconDark : freashIcon" alt="" />
                </template>
                换一批角色
            </n-button>
            <n-button type="primary" size="large" class="flex-1" round @click="handleAdd()">
                <template #icon>
                    <img :src="startIcon" alt="" />
                </template>
                开始
            </n-button>
        </div>

        <!-- <n-button v-for="(item, index) in masks" :key="index">
            {{ item.title }}
        </n-button> -->
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { NButton, NGrid, NGridItem, NConfigProvider } from 'naive-ui'
import { useSettingStore, useChatStore } from '@/store'
import { fetchMasks } from '@/api'
import type { SettingsState } from '@/store/modules/settings/helper'
import { useRouter } from 'vue-router'
import { useTheme } from '@/hooks/useTheme'
import maskBg from '@/assets/mask-bg.png'
import maskBgDark from '@/assets/mask-bg-dark.png'
import icon1 from '@/assets/png-1.png'
import icon2 from '@/assets/png-2.png'
import icon3 from '@/assets/png-3.png'
import icon4 from '@/assets/png-4.png'
import icon1Dark from '@/assets/png-1-dark.png'
import icon2Dark from '@/assets/png-2-dark.png'
import icon3Dark from '@/assets/png-3-dark.png'
import icon4Dark from '@/assets/png-4-dark.png'
import startIcon from '@/assets/start.png'
import freashIcon from '@/assets/png-huan.png'
import freashIconDark from '@/assets/png-huan-dark.png'

const icons = [
    {
        light: icon1,
        dark: icon1Dark
    },
    {
        light: icon2,
        dark: icon2Dark
    },
    {
        light: icon3,
        dark: icon3Dark
    },
    {
        light: icon4,
        dark: icon4Dark
    }
]
const { isDark } = useTheme()
const page = ref(1)
const finish = ref(false)
const masks = ref([])
function getMask() {
    let iconIndex = Math.floor(Math.random() * 4)
    fetchMasks(4).then((res: any) => {
        masks.value = res.map((item: any, index: number) => {
            return {
                ...item,
                icon: icons[(item.iconId - 1) % 4]
            }
        })
        // if (res.meta.totalPages === res.meta.currentPage) {
        //     finish.value = true
        // } else {
        //     finish.value = false
        // }
    })
}

onMounted(() => {
    getMask()
})

const emit = defineEmits(['closeMask'])
const chatStore = useChatStore()
const router = useRouter()
function update(mask: any) {
    chatStore.addHistory({ title: mask.name, uuid: Date.now(), isEdit: false, maskId: mask.id }, [
        {
            dateTime: new Date().toLocaleString(),
            text: mask.welcomeMessage,
            inversion: false,
            error: false,
            conversationOptions: null,
            requestOptions: { prompt: mask.welcomeMessage, options: null }
        }
    ])
    updateSettings({
        systemMessage: mask.describe
    })
    emit('closeMask')
    // router.back()
}

const settingStore = useSettingStore()
function updateSettings(options: Partial<SettingsState>) {
    settingStore.updateSetting(options)
}

function refreash() {
    if (finish.value) {
        page.value = 1
    } else {
        page.value = page.value + 1
    }
    getMask()
}
function handleAdd() {
    settingStore.resetSetting()
    chatStore.addHistory({ title: 'New Chat', uuid: Date.now(), isEdit: false, maskId: null })
}
</script>

<style lang="less" scoped>
.mask {
    background: linear-gradient(180deg, #fdffff 0%, #e0f3ff 100%);
    box-shadow: 0px 2px 6px 0px rgba(144, 194, 201, 0.5);
    border-radius: 8px;

    &.maskDark {
        background: #0a0b21;
        border: 1px solid #15a8aa;
        box-shadow: none;
    }
}

.n-button + .n-button {
    margin-left: 26px;
}
</style>
