import Taro from '@tarojs/taro'
import { AtTextarea } from 'taro-ui'
import { View } from '@tarojs/components'
import classnames from 'classnames'
import { CustomLabel, ItemExtra, UnEditeableView } from '../index'
import './index.scss'

interface InputProps {
  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 MultilineText: React.FC<InputProps> = ({
  itemExtra,
  editable,
  name,
  placeholder,
  term,
  value,
  onChange,
  help,
  required,
  defaultValue,
  onView,
  listItemChildren
}) => {
  const textareaOnChange = (value) => {
    if (onChange) {
      onChange(value)
    }
  }
  const disabled = (editable === undefined || editable === true) ? false : true

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

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

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

  return (
    <View className={containerCLs}>
      <View className='textarea-content'>
        <CustomLabel term={term} help={help} required={required} />
        {itemExtra && <View className='textarea-item-extra-wrap'><ItemExtra text={itemExtra} /></View>}
        <View className='text-area'>
          <AtTextarea
            count={false}
            placeholder={placeholder}
            value={showValue}
            onChange={textareaOnChange}
            disabled={disabled}
          />
        </View>
      </View>
    </View>
  )
}

export default MultilineText