import Taro, { useState } from '@tarojs/taro'
import { AtToast } from 'taro-ui'
import { View, Image, Input } from '@tarojs/components'
import classnames from 'classnames'
import { phoneReg, linkReg } from '../../util/constants'
import { CustomLabel, ItemExtra, UnEditeableView } from '../index'
import './index.scss'
import iconClose from '../../assets/clear.png'
import iconError from '../../assets/error.png'

interface InputProps {
  itemExtra?: string
  name: string
  placeholder?: string
  term: string
  value?: any
  defaultValue?: any
  onChange: (value) => void
  editable?: boolean
  help?: string
  required?: boolean
  type?: "number" | "text" | "password" | "phone" | "idcard" | "digit" | "link" | undefined
  onView?: boolean
  listItemChildren?: boolean
}

const CustomInput: React.FC<InputProps> = ({
  itemExtra,
  editable,
  name,
  placeholder,
  term,
  value,
  onChange,
  help,
  required,
  type = 'text',
  defaultValue,
  onView,
  listItemChildren
}) => {
  const [errorStatus, setErrorStatus] = useState(false)
  const [isOpened, setIsOpened] = useState(false)
  const inputOnChange = (e) => {
    const { value } = e.detail
    if (type === 'phone') {
      if (!phoneReg.test(value)) {
        setErrorStatus(true)
      } else {
        setErrorStatus(false)
      }
    }

    if (type === 'link') {
      if (!linkReg.test(value)) {
        setErrorStatus(true)
      } else {
        setErrorStatus(false)
      }
    }

    onChange(value)
  }

  const onErrorClick = () => {
    triggleToast()
  }

  const triggleToast = () => {
    setIsOpened(!isOpened)
  }

  const handleClear = () => {
    onChange('')
  }

  const inputType = type === 'number' ? 'number' : 'text'
  const disabled = (editable === undefined || editable === true) ? false : true
  const showValue = (value === '' || value) ? value : defaultValue

  if (editable === false || (editable === undefined && onView)) {
    return <UnEditeableView term={term} help={help} value={showValue} listItemChildren={listItemChildren} />
  }

  const containerCLs = classnames(['input-container', listItemChildren ? 'item-container' : 'item-container-margin'])
  const inputCls = classnames(['comp-input-item__input', showValue ? '' : 'opacity'])

  return (
    <View className={containerCLs}>
      <View className='comp-input-item'>
        <CustomLabel term={term} help={help} required={required} />
        <Input
          className={inputCls}
          name={name}
          type={inputType}
          placeholder={placeholder}
          // placeholderClass='comp-input-item__input--placeholder'
          value={showValue}
          onInput={inputOnChange}
          disabled={disabled}
          maxLength={type === 'phone' ? 11 : -1}
        />
        {errorStatus ?
          <View className='comp-input-item__clear' onClick={onErrorClick}>
            <Image className='comp-input-item__clear-img' src={iconError} />
          </View>
          : !!showValue ?
            <View className='comp-input-item__clear' onClick={handleClear}>
              <Image className='comp-input-item__clear-img' src={iconClose} />
            </View> : null
        }

      </View>
      <ItemExtra text={itemExtra} />
      <AtToast isOpened={isOpened} text={`${term}格式错误`} onClose={triggleToast}></AtToast>
    </View>
  )
}

export default CustomInput