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

interface FormBasicInfoProps {
  fee: string
  location: string
  gameplay: string
  selectedStadium: Stadium | null
  onFeeChange: (value: string) => void
  onLocationChange: (value: string) => void
  onGameplayChange: (value: string) => void
  onStadiumSelect: () => void
  children: FormFieldConfig[]
}

const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
  fee,
  location,
  gameplay,
  selectedStadium,
  onFeeChange,
  onLocationChange,
  onGameplayChange,
  onStadiumSelect,
  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={fee}
              onInput={(e) => onFeeChange(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={onStadiumSelect}>
            <Text className={`right-text ${selectedStadium ? 'selected' : ''}`}>
              {selectedStadium ? selectedStadium.name : '请选择'}
            </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'>
            <Text className={`right-text ${gameplay ? 'selected' : ''}`}>
              {gameplay ? gameplay : '请选择'}
            </Text>
            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
          </View>
        </View>)
      }
    </View>
    })
  }
  return (
    <View className='form-basic-info'>
      {/* 费用 */}
      {renderChildren()}
    </View>
  )
}

export default FormBasicInfo