<script lang="ts" setup>
import { computed } from 'vue'
import { NAvatar, useOsTheme } from 'naive-ui'
import { useUserStore, useAppStore, useChatStore, useCompanyStore } from '@/store'
import { isString } from '@/utils/is'
import defaultAvatar from '@/assets/avatar.png'
import { useTheme } from '@/hooks/useTheme'
import { useRoute, useRouter } from 'vue-router'
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'

const icons = [
    {
        light: icon1,
        dark: icon1Dark
    },
    {
        light: icon2,
        dark: icon2Dark
    },
    {
        light: icon3,
        dark: icon3Dark
    },
    {
        light: icon4,
        dark: icon4Dark
    }
]

const route = useRoute()
const { uuid } = route.params as { uuid: string }
const chatStore = useChatStore()
const histroyData = computed(() => chatStore.getHistoryByUuid(+uuid))

console.log()

interface Props {
    image?: boolean
    iconId?: number
    maskId?: number | null
}
defineProps<Props>()

const userStore = useUserStore()
const avatar = computed(() => userStore.userInfo.avatar)

const OsTheme = useOsTheme()
const appStore = useAppStore()
const { isDark } = useTheme()

const companyStore = useCompanyStore()
const company = computed(() => {
    return companyStore.company
})
</script>

<template>
    <template v-if="image">
        <NAvatar
            :size="32"
            v-if="isString(avatar) && avatar.length > 0"
            :style="{ backgroundColor: 'transparent' }"
            :src="avatar"
            :fallback-src="defaultAvatar"
        />
        <NAvatar :size="32" v-else :src="defaultAvatar" :style="{ backgroundColor: 'transparent' }" />
    </template>
    <span v-else class="text-[28px] dark:text-white">
        <template v-if="maskId">
            <template v-if="iconId">
                <img :src="isDark ? icons[iconId - 1].dark : icons[iconId - 1].light" alt="" />
            </template>
        </template>
        <template v-else-if="company.id !== 0 && company.logo">
            <img :src="company.logo" alt="" />
        </template>
        <template v-else>
            <img src="@/assets/logo.png" v-if="isDark" alt="" />
            <img src="@/assets/logo1.png" v-else alt="" />
        </template>
    </span>
</template>
