import Taro, { useState } from '@tarojs/taro'
import { View, Text, Textarea } from '@tarojs/components'
import classnames from 'classnames'
import { CustomLabel, ItemExtra, UnEditeableView } from '../index'
import './index.scss'
// import '../../src/app.scss';


interface Props {
  itemExtra?: string
  name: string
  placeholder?: string
  term: string
  value?: any
  defaultValue?: any
  onChange: (value) => void
  editable?: boolean
  help?: string
  required?: boolean
  count?: boolean
  onView?: boolean
  listItemChildren?: boolean
}

const CTextArea: React.FC<Props> = ({
  itemExtra,
  editable,
  name,
  placeholder,
  term,
  value,
  onChange,
  help,
  required,
  defaultValue,
  onView,
  listItemChildren
}) => {

  const [isShowText, setisShowText] = useState(true)
  const [onFocus, setonFocus] = useState(false)
  // const [textareaValue, settextareaValue] = useState(placeholder)
  //  失去焦点，存值
  const onTextearaBlur = (e) => {
    // settextareaValue(e.detail.value)
    onChange(e.detail.value)
  }

  //输入完成，改变显示
  const textareaConfirm = (e) => {
    setisShowText(true)
    setonFocus(false)
  }

  const showTextarea = () => {
    setisShowText(false)
    setonFocus(true)
  }

  const showValue = value !== undefined ? value : defaultValue || placeholder

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

  const containerCLs = classnames(['texteara-wrap', listItemChildren ? 'item-container' : 'item-container-margin'])

  return (
    <View className={containerCLs}>
      {!isShowText ? <View className='form-textarea'>
        <CustomLabel term={term} help={help} required={required} />
        {itemExtra && <View className='textarea-extra-wrap'>
          <ItemExtra text={itemExtra} />
        </View>}
        <View className='text-view'>
          <Textarea
            className='text-value'
            autoHeight
            onBlur={onTextearaBlur}
            onConfirm={textareaConfirm}
            focus={onFocus}
            maxlength={400}
            value={showValue}
            adjustPosition
            holdKeyboard
            onFocus={(e: any) => {
              if (Taro.getEnv() === 'WEAPP') {
                const platform = Taro.getSystemInfoSync()
                if (!platform.system.toLocaleLowerCase().includes('ios')) {
                  Taro.pageScrollTo({
                    scrollTop: e.currentTarget.offsetTop - 40,
                    duration: 100,
                  })
                }
              }
            }}
          />
        </View>
      </View> :
        <View className='form-textarea' onClick={showTextarea}>
          <CustomLabel term={term} help={help} required={required} />
          {itemExtra &&
            <View className='textarea-extra-wrap'>
              <ItemExtra text={itemExtra} />
            </View>}
          <View className='text-view'>
            <Text className='text-value'>{showValue}</Text>
          </View>
        </View>
      }
    </View>
  )
}

export default CTextArea