import { useState } from '@tarojs/taro'
import { AtIcon, AtToast, AtModal } from 'taro-ui'
import { View, Text, Image } from '@tarojs/components'
import helpImg from '../../assets/help.png'
import './index.scss'

interface LabelProps {
  term: string
  help?: string
  required?: boolean
  position?: boolean
  style?: any
}

const Label: React.FC<LabelProps> = ({ term, help, required, position, style }) => {
  const [isOpened, setIsOpened] = useState(false)

  const onConfirm = () => {
    setIsOpened(false)
  }

  const onClick = (e) => {
    setIsOpened(true)
  }

  return (
    <View className={'label-wrap'} style={position ? { position: 'absolute', ...style } : { ...style }}>
      <Text className='label'>{term}</Text>
      {required && <Text className='required'>*</Text>}
      {help && <View className='icon-wrap'>
        <Image src={helpImg} className='icon' onClick={onClick} />
      </View>}
      <AtModal
        isOpened={isOpened}
        title=''
        confirmText='确认'
        onCancel={onConfirm}
        onConfirm={onConfirm}
        content={help}
        closeOnClickOverlay={false}
      />
    </View>
  )
}

export default Label