import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from "react"
import Popup from "@/components/popup";
import { Button, Image, Text, Textarea, View } from "@tarojs/components"
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>
  )
}))