import React from 'react'
import { UI } from '@hyext/hy-ui'
import '@hyext/tailwindcss/styles.hycss'

import './style.hycss'
import { usePanel, usePanelAction, usePanelPic } from '../../hooks/panel'
import { TouchableOpacity } from 'react-native'
import Abnor from '../Abnor'

const { View, Text, Image } = UI

const Panel = () => {
  const [gameTitle, gameDesc, gameIcon, isLoading, error] = usePanel()

  return (
    <View className="items-center">
      <View className="panel">
        {isLoading ? (
          <Abnor type="loading" desc="加载中..." mode="full" />
        ) : error ? (
          <Abnor type="error" desc={error.message || '加载失败'} mode="full" />
        ) : (
          <View className="padding">
            <View className="top">
              <Image className="topIcon" src={gameIcon} />
              <View className="topInfo">
                <Text className="topTitle">{gameTitle}</Text>
                <Text className="topDesc" numberOfLines={3}>
                  {gameDesc}
                </Text>
              </View>
            </View>
            <View className="pic">
              <PanelPic />
            </View>
            <View className="actions">
              <PanelAction position="local" />
              <PanelAction position="cloud" />
            </View>
          </View>
        )}
      </View>
    </View>
  )
}

const PanelPic = () => {
  const [gameImgUrlList] = usePanelPic()

  return (
    <View className="picList">
      {gameImgUrlList.slice(0, 2).map((imgUrl, index) => (
        <Image className="picListItem" key={index} src={imgUrl} mode="cover" />
      ))}
    </View>
  )
}

const PanelAction = (props: { position: 'local' | 'cloud' }) => {
  const { position } = props
  const [btnInfo, isBtnLocked, launch] = usePanelAction({ position })

  const progress = btnInfo.progressList.length
    ? Math.floor(
        (btnInfo.progressList.reduce((p, c) => p + c, 0) /
          (100 * btnInfo.progressList.length)) *
          100
      )
    : 0

  const disabled =
    isBtnLocked ||
    btnInfo.status === 'launching' ||
    btnInfo.status === 'launchSuccessed'

  if (btnInfo.isAvailable) {
    return (
      <View className={`actionItem actionItem_${position}`}>
        <TouchableOpacity
          className={`actionItemBtn actionItemBtn_${position} actionItemBtn_${
            btnInfo.status
          } ${isBtnLocked ? 'actionItemBtn_locked' : ''}`}
          disabled={disabled}
          onPress={launch}
        >
          {btnInfo.status === 'launching' ? (
            <View
              className={`actionItemBtnProgress actionItemBtnProgress_${position}`}
              style={{ width: `${progress}%` }}
            />
          ) : null}
          <Text
            className={`actionItemBtnText actionItemBtnText_${btnInfo.status}`}
            style={
              btnInfo.status === 'launching'
                ? {
                    textShadowColor: 'black',
                    textShadowOffset: {
                      width: 0,
                      height: 0,
                    },
                    textShadowRadius: 2,
                  }
                : {}
            }
          >
            {btnInfo.status === 'launching'
              ? `${progress}%`
              : btnInfo.status === 'launchFailed'
              ? '启动失败'
              : btnInfo.status === 'launchSuccessed'
              ? '已启动'
              : position === 'cloud'
              ? '云启动'
              : '本地启动'}
          </Text>
        </TouchableOpacity>
        <Text className={`actionItemText actionItemText_${position}`}>
          {btnInfo.status === 'launching'
            ? '启动中'
            : btnInfo.status === 'launchFailed'
            ? btnInfo.statusMsg || '请重试'
            : position === 'cloud'
            ? '云端畅玩，不限电脑配置'
            : '稳定清晰，适合高配用户'}
        </Text>
      </View>
    )
  } else {
    return null
  }
}

export default Panel
