
import { Button, Image, Text, Textarea, View } from '@tarojs/components'
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from 'react'
import Popup from '@/components/popup'
import './ModifyModal.scss'

interface Params{
  title?: string
  save: (value: any) => void // 确定保存
}
export default memo(forwardRef((props: any, ref) => {
  const { title = '修改昵称' } = props
  const [value, setValue] = useState('')
  useEffect(() => {
    setValue(props.value)
  }, [props.value])
  // popup输入长度
  const handleTextareaInput = (ev: any) => {
    setValue(ev.detail.value.slice(0, 20))
  }
  // 重置
  const handleTextareaReset = () => {
    setValue('')
  }
  const [textareaBottom, setTextareaBottom] = useState(0)
  const handleBlur = () => {
    setTextareaBottom(0)
  }
  const handleFocus = (ev) => {
    setTextareaBottom(ev.detail.height)
  }
  const [modalShow, setModalShow] = useState(false)
  useImperativeHandle(ref, () => ({ setModalShow }))
  return (
    <Popup onClose={() => setModalShow(false)} title={title} show={modalShow}>
      <View style={{ marginBottom: `${textareaBottom}px` }} className="modify-ickname-content">
        <View className="modify-ickname-input">
          <Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20} />
          <Text>{value?.length}/20</Text>
        </View>
        <Text className="modify-ickname-tips">请设置2-20个字符，可由中文、英文、数字组成</Text>
        <View className="modify-ickname-operation">
          <Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
          <Button onClick={() => props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
        </View>
      </View>
    </Popup>
  )
}))
