import React, { useState, useCallback, useEffect } from 'react'
import { View, Text, Input, Image, Picker } from '@tarojs/components'
import PopupGameplay from '../PopupGameplay'
import img from '@/config/images';
import { FormFieldConfig } from '@/config/formSchema/publishBallFormSchema';
import SelectStadium from '../SelectStadium/SelectStadium'
import { Stadium } from '../SelectStadium/StadiumDetail'
import './FormBasicInfo.scss'

type PlayGame = {
  play_type: string // 玩法类型
  price: number | string // 价格
  venue_id?: number | null // 场地id
  location_name?: string // 场地名称
  location?: string // 场地地址
  latitude?: string // 纬度
  longitude?: string // 经度
  court_type?: string // 场地类型 1: 室内 2: 室外
  court_surface?: string // 场地表面 1: 硬地 2: 红土 3: 草地
  venue_description_tag?: Array<string>[] // 场地描述标签
  venue_description?: string // 场地描述
  venue_image_list?: Array<string>[] // 场地图片
}
interface FormBasicInfoProps {
  value: PlayGame
  onChange: (value: any) => void
  children: FormFieldConfig[]
}

const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
  value,
  onChange,
  children
}) => {
  const [gameplayVisible, setGameplayVisible] = useState(false)
  const [showStadiumSelector, setShowStadiumSelector] = useState(false)
  const [playGame, setPlayGame] = useState<{label: string, value: string }[]>([])
  const handleGameplaySelect = () => {
    setGameplayVisible(true)
  }

  const handleGameplayConfirm = (selectedGameplay: string) => {
    onChange({...value, [children[2].prop]: selectedGameplay})
    setGameplayVisible(false)
  }

  const handleGameplayClose = () => {
    setGameplayVisible(false)
  }
// 处理场馆选择
  const handleStadiumSelect = (stadium: Stadium | null) => {
    console.log(stadium,'stadiumstadium');
    const { address, name, latitude, longitude, court_type, court_surface, description, description_tag, venue_image_list} = stadium || {};
    onChange({...value, 
      venue_id: stadium?.id, 
      location_name: name, 
      location: address, 
      latitude, 
      longitude,
      court_type,
      court_surface,
      venue_description: description,
      venue_description_tag: description_tag,
      venue_image_list
    })
    setShowStadiumSelector(false)
  }

  const handleChange = useCallback((key: string, value: any) => {
    onChange({...value, [key]: value})
  }, [onChange])

  useEffect(() => {
    if (children.length > 2) {
      const options = children[2]?.options || [];
      setPlayGame(options)
    }
  }, [children])
  const renderChildren = () => {
    return children.map((child: any, index: number) => {
      return <View className='form-item'>
      <View className='form-label'>
        <Image className='lable-icon' src={img[child.iconType]} />
      </View>
      {
        index === 0 && (<View className='form-wrapper'>
          <Text className='form-item-label'>{child.label}</Text>
          <View className='form-right-wrapper'>
            <Input
              className='fee-input'
              placeholder='请输入'
              placeholderClass='title-placeholder'
              type='digit'
              value={value[child.prop]}
              onInput={(e) => handleChange(child.prop, e.detail.value)}
            />
            <Text className='unit'>元/每人</Text>
          </View>
      </View>)
      }
      {
        index === 1 && (<View className='form-wrapper'>
          <Text className='form-item-label'>{child.label}</Text>
          <View className='form-right-wrapper' onClick={() => setShowStadiumSelector(true)}>
            <Text className={`right-text ${value[child.prop] ? 'selected' : ''}`}>
              {value[child.prop] ? value[child.prop] : '请选择'}
            </Text>
            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
          </View>
        </View>)
      }
      {
        index === 2 && ( <View className='form-wrapper'>
          <Text className='form-item-label'>{child.label}</Text>
          <View className='form-right-wrapper' onClick={handleGameplaySelect}>
            <Text className={`right-text ${value[child.prop] ? 'selected' : ''}`}>
              {value[child.prop] ? value[child.prop] : '请选择'}
            </Text>
            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
          </View>
        </View>)
      }
    </View>
    })
  }
  return (
    <View className='form-basic-info'>
      {/* 费用 */}
      {renderChildren()}
      {/* 玩法选择弹窗 */}
      <PopupGameplay 
        visible={gameplayVisible}
        onClose={handleGameplayClose}
        onConfirm={handleGameplayConfirm}
        value={value[children[2].prop]}
        options={playGame}
      />
      {/* 场馆选择弹窗 */}
      <SelectStadium
        visible={showStadiumSelector}
        onClose={() => setShowStadiumSelector(false)}
        onConfirm={handleStadiumSelect}
      />
    </View>
  )
}

export default FormBasicInfo