import Popup from "@/components/popup";
import { Input, ScrollView, Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useMemo, useRef } from "react";
import classnames from "classnames";
import styles  from './index.module.scss'
import TextareaEnhance from "@/components/textareaEnhance";
import { CreateFavoriteApi } from "@/api/favorite";
import { alert } from "@/common/common";

//原因选择
type ReasonInfoParam = {
    show?: boolean, //显示 
    onClose?: () => void, //关闭
    onSuccess?: (val:any) => void, //成功
    defaultValue?: {
        remark: string,
        name: string
    }, //默认数据
}
export default memo(({show = false, onClose, onSuccess, defaultValue}: ReasonInfoParam) => {
    
    const submitData = useRef({
        "name": '',
        "remark": ''
    })

    const getOtherReason = (val) => {
        submitData.current.remark = val
    }

    const changeInput = (val) => {
        submitData.current.name = val.detail.value
    }

    const onSubmit = () => {
        onSuccess?.(submitData.current)
    }

    useEffect(() => {
        submitData.current = {name: defaultValue?.name!, remark: defaultValue?.remark!}
    }, [defaultValue])
    return (
        <Popup show={show} title="新建收藏夹" onClose={onClose} >
            <View className={styles.collection_con}>
                <View className={styles.title_item}>
                    <View className={styles.title}>名称</View>
                    <View className={styles.select}>
                        <Input placeholder="请输入文件夹名称" className={styles.input} cursorSpacing={150} onInput={changeInput} value={defaultValue?.name} />
                    </View>
                </View>
                <View className={styles.desc_item}>
                    <View className={styles.title}>简介</View>
                    <View className={styles.desc}>
                        <TextareaEnhance defaultValue={defaultValue?.remark} onChange={getOtherReason}  placeholder="请输入简介" />
                    </View>
                </View>
                
                <View  className={styles.btns_con}>
                    <View  className={styles.btns_two}>
                        <View  className={styles.verify_btn } onClick={() => onSubmit()}>确认</View>
                    </View >
                </View>
            </View>
        </Popup>
    )
})