import { Textarea, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { usePropsValue } from '@/use/useCommon'

// 其他说明
interface Param {
  title?: string
  onChange?: (val: string) => void
  placeholder?: string
  defaultValue?: string
  onlyRead?: boolean
  maxLength?: number
  customClassName?: string
  customStyle?: React.CSSProperties
}
const TextareaEnhance = (props: Param) => {
  const { onChange: _onChange, title = '', placeholder = '请输入', defaultValue, onlyRead = false, maxLength = 200, customStyle, customClassName } = props
  const [number, setNumber] = useState(0)
  const [show, setShow] = useState(false)
  // 最大长度
  const countRef = useRef(maxLength)
  const [value, setValue] = usePropsValue({
    value: defaultValue,
    defaultValue: '',
    onChange: (res) => {
      _onChange?.(res)
    },
  })
  const getDesc = (value = '') => {
    let res = value
    if (value.length > countRef.current) {
      res = value.slice(0, countRef.current)
    }
    setNumber(res.length)
    setValue(res)
    // setDescData({ ...descData, number: res.length, value: res })
  }

  useEffect(() => {
    getDesc(defaultValue)
  }, [defaultValue])

  const toggleShowRealTextarea = (show) => {
    setShow(show)
    // setDescData({ ...descData, show })
  }
  return (
    <View className={styles.other_desc}>
      <View className={styles.title}>{title}</View>
      <View className={styles.textarea}>
        {(show && !onlyRead)
          ? <Textarea autoFocus value={value} onBlur={() => toggleShowRealTextarea(false)} style={customStyle} className={classnames(styles.textarea_con, customClassName)} cursorSpacing={100} maxlength={countRef.current} onInput={e => getDesc(e.detail.value)}></Textarea>
          : <View className={classnames(styles.textarea_con_pretend, value && styles.textarea_con_pretend_ed, customClassName)} style={customStyle} onClick={() => toggleShowRealTextarea(true)}>{value || placeholder}</View>
        }
        <View className={styles.descDataNum}>{`${number}/${countRef.current}`}</View>
      </View>
    </View>
  )
}
export default memo(TextareaEnhance)