import React from 'react'
import { View, Text } from '@tarojs/components'
import {Avatar} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {
  Star,
  People,
  AddCircle,
  Wallet
} from '@nutui/icons-react-taro'
import navTo from '@/utils/common'
import './QuickActions.scss'

const QuickActions: React.FC = () => {

  const actions = [
    {
      icon: <Star size={22} />,
      title: '预约测量',
      path: '/appointment/measurement',
      iconClass: '--orange',
      avatar: 'https://oss.wsdns.cn/20260330/5f54527123864193b0a2078f812b117f.png?x-oss-process=image/resize,m_fixed,w_200/quality,Q_90'
    },
    {
      icon: <People size={22} />,
      title: '案例展示',
      path: '/cases/showcase',
      iconClass: '--blue'
    },
    {
      icon: <AddCircle size={22} />,
      title: '在线咨询',
      path: '/consultation/online',
      iconClass: '--cyan'
    },
    {
      icon: <Wallet size={22} />,
      title: '门店导航',
      path: '/store/navigation',
      iconClass: '--red'
    }
  ]

  const handleClick = (action: { path: string }) => {
    if (!Taro.getStorageSync('access_token') || !Taro.getStorageSync('UserId')) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 1500
      })
      return
    }
    navTo(action.path)
  }

  return (
    <View className='quick-actions'>
      {actions.map((action, index) => (
        <View
          key={index}
          className='quick-actions__item'
          onClick={() => handleClick(action)}
        >
          <View className={`quick-actions__icon quick-actions__icon${action.iconClass}`}>
            {action.avatar ? (
              <Avatar src={action.avatar} className={'mb-2'} shape="square" style={{
                backgroundColor: 'transparent',
              }}/>
            ) : (
              action.icon
            )}
          </View>
          <Text className='quick-actions__label'>{action.title}</Text>
        </View>
      ))}
    </View>
  )
}

export default QuickActions