import React, { useState, useEffect } from 'react'
import { View, Text, Button, Swiper, SwiperItem, Image } from '@tarojs/components'
import { Cell, Avatar, Progress } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
// 导入API服务
import demoApi from '../../services/demoApi'
import commonApi from '../../services/commonApi'
import {
  useUserStats,
  useUserActions
} from '../../store/userStore'
import img from '../../config/images'
import { getTextColorOnImage } from '../../utils/processImage'
import './index.scss'

const images = [
  'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/1a35ebbf-2361-44da-b338-7608561d0b31.png',
  'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/cf5a82ba-90af-4138-a1b3-9119adcde9e0.png',
  'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/49d7cdf0-b03c-4a0f-91c6-e7778080cfcd.png'
]



function Index() {
  // 使用Zustand store
  // const userStats = useUserStats()
  // const { incrementRequestCount, resetUserStats } = useUserActions()

  const [current, setCurrent] = useState(0)
  const [colors, setColors] = useState<string []>([])

  // 本地状态管理
  const [loading, setLoading] = useState(false)
  const [userProfile, setUserProfile] = useState<any>(null)
  const [interests, setInterests] = useState<string[]>([])

  // 页面加载时获取数据
  useEffect(() => {
    initializeData()
    calcBgMainColors()
  }, [])

  // 初始化数据
  const initializeData = async () => {
    try {
      // 获取推荐的兴趣爱好
      const interestsRes = await demoApi.getRecommendedInterests()
      if (interestsRes.success) {
        setInterests(interestsRes.data || [])
      }
    } catch (error) {
      console.log('获取初始数据失败:', error)
    }
  }

  const calcBgMainColors = async () => {
    const textcolors: string[] = []
    for (const index in images) {
      const { textColor } = await getTextColorOnImage(images[index])
      textcolors[index] = textColor
    }
    setColors(textcolors)
  }

  return (
    <View className='detail-page'>
      <view className="custom-navbar">
        <View className='detail-navigator'>
          <View className='detail-navigator-back'>
            <Image className='detail-navigator-back-icon' src={img.ICON_ARROW_LEFT} />
          </View>
          <View className='detail-navigator-icon'>
            <Image className='detail-navigator-logo-icon' src={img.ICON_LOGO_GO} />
          </View>
        </View>
        {/* <view className="navbar-title">我的自定义标题</view> */}
      </view>
      <View className='detail-page-bg' style={{ backgroundImage: `url(${images[current]})` }} />
      <View className='detail-page-bg-text' />
      <Swiper
        className='detail-swiper'
        indicatorDots={false}
        circular
        nextMargin="20px"
        onChange={(e) => { setCurrent(e.detail.current) }}
      >
        {images.map((imageUrl, index) => (
          <SwiperItem
            key={index}
            className='detail-swiper-item'
          >
            <Image
              src={imageUrl}
              mode="aspectFill"
              className='detail-swiper-item-image'
              style={{
                transform: index !== current ? 'scale(0.8) translateX(-12%)' : 'scale(0.95)', // 前后图缩小
              }}
            />
          </SwiperItem>
        ))}
      </Swiper>
      <Text className='detail-text' style={{ color: colors[current] }}>
        Five feet from the bed was an earthen wall that had suffered from numerous cracks due to the passage of time. From the other side of the wall came the nagging voice of his mother and the occasional deep breathing of his father who was smoking his pipe.
      </Text>
    </View>
  )
}

export default Index