import CategoryTab from '@/utils/CategoryTab'
import request from '@/utils/request'
import { computed, defineComponent, inject, ref, watch } from 'vue'
import clsx from 'clsx'
import useLayoutStore from '../useLayoutStore'
import { AddToToken } from './AdderPage'
import { v4 as uuid } from 'uuid'
import { frontAddress, ossBase } from '@/config'
import dayjs from 'dayjs'
import { generateRandomString } from '@/utils/tool'
import MD5 from 'crypto-js/md5'
export const SECRET = 'A1Cv12olxT12dOE3xA1vPA=='
export const URL_ADDRESS = 'http://newfatfox.oss-cn-beijing.aliyuncs.com'
export interface GameType {
  id: string
  name: string
  rom: string
  playstation: string
  hot: number
  category: string
  despt: string
  icon: string
}
export interface OtherGame {
  id: number // 游戏ID
  category_ids: number[] // 分类ID数组
  rank: number // 排名
  name: string // 游戏名称
  short_description: string // 简短描述
  description: string // 详细描述
  url: string // 游戏详情链接
  icon: string // 图标URL
  cover_url: string // 封面URL
  corner_mark: number // 角标标识
}
export const DefautGameTypeList = [
  {
    id: 'fc',
    type: '经典红白机',
    attr: 0,
    oridinal: 0
  },
  {
    id: 'md',
    type: '经典世嘉',
    attr: 1,
    oridinal: 1
  },
  {
    id: 'yiqiyoo',
    type: '休闲游戏',
    attr: 1,
    oridinal: 2
  },
  {
    id: 'gba',
    type: '经典GBA',
    attr: 3,
    oridinal: 3
  }
]
export const GameItem = defineComponent({
  props: {
    content: {
      type: Object as () => GameType,
      required: true
    }
  },
  setup(props) {
    const layout = useLayoutStore()
    const isGame = computed(() => layout.state.current === 0)
    const addTo = inject(AddToToken)
    return () => (
      <div
        class={clsx(' w-full h-full rounded-lg flex flex-col justify-between shadow p-4 relative', {
          'bg-white/20': isGame.value,
          'bg-white/80': !isGame.value
        })}
        key={props.content.name}
      >
        <div class="flex">
          <img
            loading="lazy"
            src={
              props.content.icon.startsWith('http')
                ? props.content.icon
                : URL_ADDRESS + '/' + props.content.icon
            }
            class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg"
            style={{
              background: props.content.icon
            }}
          />

          <div class="px-2 w-0 flex-grow">
            <div
              class={clsx('text text-sm text-ellipsis overflow-hidden whitespace-nowrap', {
                'text-white': isGame.value,
                'text-black/80': !isGame.value
              })}
            >
              {props.content.name}
            </div>
            <div
              class={clsx('text-[12px] line-clamp-2 text-ellipsis', {
                'text-white/80': isGame.value,
                'text-black/60': !isGame.value
              })}
            >
              {props.content.despt}
            </div>
          </div>
        </div>
        <div class="flex justify-end">
          <button
            class={clsx(
              'rounded-2xl  text-[12px] flex justify-center items-center w-[60px] h-[24px]',
              {
                'bg-[#eeeeee] text-[#333] ': isGame.value,
                'bg-[#ffaa4e] text-white': !isGame.value
              }
            )}
            onClick={() => {
              layout.addBlock(
                {
                  id: uuid(),
                  link: !props.content.rom.startsWith('http')
                    ? `${frontAddress}/emu/#/home?params=${JSON.stringify({
                      ...props.content,
                      rom: ossBase + '/' + props.content.rom
                    })}`
                    : props.content.rom,
                  name: '',
                  label: props.content.name,
                  icon: props.content.icon.startsWith('http')
                    ? props.content.icon
                    : URL_ADDRESS + '/' + props.content.icon,
                  text: '',
                  background: '',
                  color: '',
                  w: props.content.rom.startsWith('http') ? 1 : 2,
                  h: 1
                },
                addTo?.value
              )
            }}
          >
            添加
          </button>
        </div>
      </div>
    )
  }
})

export default defineComponent(() => {
  const layout = useLayoutStore()
  const loading = ref(false)
  const isGame = computed(() => layout.state.current === 0)
  const appList = ref<GameType[]>([])
  const selectType = ref('fc')
  const fetchGame = async (page: number) => {
    const parems = `nonce=${generateRandomString(8)}&pid=PIDc8uT24mpo&timestamp=${dayjs().unix()}`
    const sign = MD5(parems + SECRET).toString()
    const response = await fetch(
      `https://ge.yiqiyoo.com/game/v2/third-part/games?${parems}&sign=${sign}&paginate.limit=99&paginate.page=${page}`
    )
    const res = await response.json()
    return res.data.items
  }
  watch(
    selectType,
    (val) => {
      loading.value = true
      if (val !== 'yiqiyoo') {
        request<GameType[]>('GET', `/api/games?type=${val}`)
          .then((res) => {
            appList.value = res
          })
          .finally(() => {
            setTimeout(() => {
              loading.value = false
            }, 200)
          })
      } else {
        try {
          Promise.all([fetchGame(1), fetchGame(2), fetchGame(3)]).then((res) => {
            const resData = res.flat() as OtherGame[]
            appList.value = resData.map((el) => ({
              id: el.id.toString(),
              name: el.name,
              despt: el.short_description,
              icon: el.icon,
              rom: el.url,
              playstation: el.url,
              hot: el.rank,
              category: el.category_ids[0].toString()
            }))
          })
        } catch (err) {
          console.error(err)
        } finally {
          setTimeout(() => {
            loading.value = false
          }, 200)
        }
      }
    },
    {
      immediate: true
    }
  )
  return () => (
    <div class={'w-full h-full  flex flex-col gap-y-4'}>
      <div class={'w-full '}>
        <CategoryTab
          list={DefautGameTypeList}
          selectType={selectType.value}
          onUpdate:type={(e) => {
            selectType.value = e
          }}
          v-slots={{
            select: (text: string) => (
              <button
                class={clsx(
                  'px-[20px] text-[14px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap ',
                  isGame.value
                    ? 'bg-white/30 text-white bg-gradient-to-b  from-[#ffaa4e] to-[#ff6227]'
                    : 'text-white  bg-[#D6D6D6] bg-gradient-to-b  from-[#ffaa4e] to-[#ff6227]'
                )}
              >
                {text}
              </button>
            ),
            unSelect: (text: string) => (
              <button
                class={clsx(
                  'px-[20px] text-[14px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap',
                  isGame.value
                    ? ' text-[#999] bg-white/10 hover:bg-white/20'
                    : 'text-[#666] hover:bg-black/10 bg-black/[0.05] hover:bg-[#f0ecec]'
                )}
              >
                {text}
              </button>
            )
          }}
        ></CategoryTab>
      </div>
      <div class={'h-0 flex-1 w-full'}>
        <div class={'w-full h-full overflow-y-scroll scrollbar-hide'}>
          {!loading.value ? (
            <div class={'w-full grid grid-cols-3 gap-4 '} style="grid-auto-rows: 120px">
              {appList.value.map((el) => (
                <GameItem content={el}></GameItem>
              ))}
            </div>
          ) : (
            <div class={'w-full grid grid-cols-3 gap-4 '} style="grid-auto-rows: 120px">
              {Array(12)
                .fill(0)
                .map((el, idx) => (
                  <div
                    class={clsx(
                      ' relative cursor-pointer bg-white/20 group w-full  flex-grow-0 rounded-lg overflow-hidden',
                      isGame.value ? 'bg-white/30 ' : ' bg-[#fff]/70'
                    )}
                    key={idx}
                  />
                ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
})