import {
    computed,
    defineComponent,
    onMounted,
    ref,
    watch,
} from 'vue'
import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import clsx from 'clsx'
import { BiChevronLeft } from "oh-vue-icons/icons";
import CategoryTab from '@/utils/CategoryTab';
import { BiChevronDown } from "oh-vue-icons/icons";
import request from '@/utils/request';
import useUserStore from '@/user/useUserStore';
import useRouterStore from '@/useRouterStore';
import useBackgroundStore from './useBackgroundStore';
addIcons(BiChevronLeft, BiChevronDown)


const typeList = [
    '热门',
    'COSPALY',
    '二次元',
    '风景',
    '插画',
    '热门',
    'COSPALY',
    '二次元',
    '风景',
    '插画',
    '热门',
    'COSPALY',
    '二次元',
    '风景',
    '插画'
]
const wallpaperAttrList = [
    '动态壁纸',
    '静态壁纸',
    '自定义壁纸'
]
export type BackgroundType = {
    id: string
    oridinal: number
    type: string
    attr: number
}
export type WallpaperItem = {
    id: string
    hotNum: number
    time: number
    typeId: string
    url: string
}
export default defineComponent(() => {
    const layout = useLayoutStore()
    const router = useRouterStore()
    const isGame = computed(() => layout.state.current === 0)
    const selectType = ref('')
    const addTo = ref(layout.state.currentPage)
    const typeList = ref<BackgroundType[]>([])
    const wallpaperList = ref<WallpaperItem[]>([])
    const selectAttr = ref(0)
    const userStore = useUserStore()
    const backgroundStore = useBackgroundStore()
    const sortBy = ref<'hotNum' | 'time'>('hotNum')
    onMounted(() => {
        request<BackgroundType[]>("GET", "/api/backgroundTypes").then(res => {
            console.log(res);
            typeList.value = res
            selectType.value = res[0].id
        })
    })
    watch(() => [selectType.value, sortBy.value], (e) => {
        wallpaperList.value = []
        request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
            console.log(res);
            wallpaperList.value = res
        })
    }, {
        immediate: true
    })
    watch(selectAttr, (e) => {

        selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
    })
    return () => (
        <div class={clsx('w-full flex-col h-full relative flex px-7 py-7 text-[14px]', isGame.value ? 'bg-[#2c2e3e] text-white'
            : 'text-[#333] bg-white'
        )}
            style={isGame.value ? {
                backgroundImage: `url('/bg/gameModel.png')`,
                backgroundSize: '100% 100%',
            } : null}>
            <div class={clsx("flex w-full justify-between items-center border-b-[1px] border-solid   pb-2",
                isGame.value ? "border-white/[.2]" : "dark:border-black/[.2]"
            )}>
                <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
                <span class="font-bold text-[14px]  ">壁纸库</span>
                <button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
            </div>
            <div class="flex-1 h-0  relative">
                <div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
                    <div class="flex justify-between items-center ">
                        <div class="flex-1 w-0">
                            <CategoryTab v-slots={{
                                select: (text: string) => <button
                                    class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
                                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]')}>
                                    {text}
                                </button>,
                                unSelect: (text: string) => <button
                                    class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
                                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]')}>
                                    {text}
                                </button>
                            }} list={typeList.value.filter(val => val.attr === selectAttr.value)} selectType={selectType.value} onUpdate:type={(e) => {
                                selectType.value = e
                            }}></CategoryTab>

                        </div>

                        <div class="relative w-[100px]">
                            <select
                                onChange={(e: any) => {
                                    sortBy.value = e.target.value
                                }}
                                value={sortBy.value}
                                class={clsx(
                                    ' block w-full appearance-none rounded-lg border-none  py-1.5 px-3 text-sm/6 ',
                                    'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
                                    // Make the text of each option black on Windows
                                    '*:text-black',
                                    isGame.value ? "text-white bg-white/5" : "text-[#333] bg-black/5"
                                )}
                            >
                                <option value="hotNum">按热度</option>
                                <option value="time">按最新</option>
                            </select>
                            <OhVueIcon
                                fill={isGame.value ? 'white' : 'black'}
                                name={BiChevronDown.name}
                                class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
                                aria-hidden="true"
                            />
                        </div>
                    </div>
                    <div class="flex-1  w-full h-0 flex relative">
                        <div class="w-full h-full  overflow-y-scroll">
                            <div class="w-full  grid grid-cols-3 gap-4   ">
                                {wallpaperList.value.map(item =>
                                    <div
                                        onClick={() => {
                                        }}
                                        class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden">
                                        <img src={item.url + '?x-oss-process=image/resize,w_300'} class=" duration-150 absolute w-full h-full object-cover flex-grow-0  rounded-xl group-hover:scale-[1.2]" />
                                        <div class="absolute top-0 left-0 right-0 bottom-0 " style={{
                                            background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
                                        }} />
                                    </div>)}

                            </div>
                        </div>

                    </div>
                    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
                        {
                            wallpaperAttrList.map((item, index) => (
                                <div key={index}
                                    onClick={() => {
                                        if (index === 2) {

                                            if (!userStore.isLogin) {
                                                router.go('global-login')
                                            }
                                            return
                                        }
                                        selectAttr.value = index

                                    }}
                                    class={clsx("px-8 py-2 rounded-[8px]",
                                        index === selectAttr.value ? "bg-white text-[#333]" : "cursor-pointer text-white hover:bg-white/[.4]")}>{item}</div>
                            ))
                        }

                    </div>
                </div>

            </div>
        </div>
    )
})