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';
addIcons(BiChevronLeft, BiChevronDown)


const typeList = [
    '热门',
    'COSPALY',
    '二次元',
    '风景',
    '插画',
    '热门',
    'COSPALY',
    '二次元',
    '风景',
    '插画',
    '热门',
    'COSPALY',
    '二次元',
    '风景',
    '插画'
]
export type BackgroundType = {
    id: string
    oridinal: number
    type: string
}
export default defineComponent(() => {
    const layout = useLayoutStore()
    const isGame = computed(() => layout.state.current === 0)
    const selectType = ref('')
    const addTo = ref(layout.state.currentPage)
    const typeList = ref<BackgroundType[]>([])
    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) => {
        request("GET", `/api/backgrounds?typeId=${e}&sort=${sortBy.value}`).then(res => {
            console.log(res);

        })
    }, {
        immediate: true
    })
    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="flex w-full justify-between items-center border-b-[1px] border-solid border-white/[.2] pb-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 flex-col py-3">
                <div class="flex justify-between items-center ">
                    <div class="flex-1 w-0">
                        <CategoryTab  list={typeList.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 bg-white/5 py-1.5 px-3 text-sm/6 text-white',
                                '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'
                            )}
                        >
                            <option value="hotNum">按热度</option>
                            <option value="time">按最新</option>
                        </select>
                        <OhVueIcon
                            fill='white'
                            name={BiChevronDown.name}
                            class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 fill-white/60"
                            aria-hidden="true"
                        />
                    </div>
                </div>

            </div>
        </div>
    )
})