import {useEffect, useRef} from 'react'
import {PullToRefresh} from '@nutui/nutui-react-taro'
import UserCard from "./components/UserCard";
import UserOrder from "./components/UserOrder";
import UserFooter from "./components/UserFooter";
import {useUserData} from "@/hooks/useUserData";
import {View} from '@tarojs/components';
import './user.scss'
import IsDealer from "./components/IsDealer";
import {useThemeStyles} from "@/hooks/useTheme";
import UserGrid from "@/pages/user/components/UserGrid";

function User() {

  const {refresh} = useUserData()
  const userCardRef = useRef<any>()
  const themeStyles = useThemeStyles();

  // 下拉刷新处理
  const handleRefresh = async () => {
    await refresh()
    // 如果 UserCard 组件有自己的刷新方法，也可以调用
    if (userCardRef.current?.handleRefresh) {
      await userCardRef.current.handleRefresh()
    }
  }

  useEffect(() => {
  }, []);

  return (
    <PullToRefresh
      onRefresh={handleRefresh}
      headHeight={60}
    >
      {/* 装饰性背景 */}
      <View className={'h-64 w-full fixed top-0 z-0'} style={themeStyles.primaryBackground}>
        {/* 装饰性背景元素 - 小程序兼容版本 */}
        <View className="absolute w-32 h-32 rounded-full" style={{
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
          top: '-16px',
          right: '-16px'
        }}></View>
        <View className="absolute w-24 h-24 rounded-full" style={{
          backgroundColor: 'rgba(255, 255, 255, 0.08)',
          bottom: '-12px',
          left: '-12px'
        }}></View>
        <View className="absolute w-16 h-16 rounded-full" style={{
          backgroundColor: 'rgba(255, 255, 255, 0.05)',
          top: '60px',
          left: '120px'
        }}></View>
      </View>
      <UserCard ref={userCardRef}/>
      <UserOrder/>
      <IsDealer/>
      <UserGrid/>
      <UserFooter/>
    </PullToRefresh>
  )
}

export default User