import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { debounce } from "@/common/util";
import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";

type Params = {
    clickOnSearch?: (val: string) => void
    disabled?: false|true,
    placeholder?: string,
    changeOnSearch?:(any) => void,
    showIcon?: false|true,
    placeIcon?: 'out'|'inner',
    style?: Object,
    showBtn?: false|true,
    btnStyle?: Object,
    btnTitle?: string,
    debounceTime?: number //防抖时间，不设默认为零
}

export default forwardRef(({
    clickOnSearch,
    changeOnSearch,
    disabled = false,
    placeholder = '输入搜索内容',
    showIcon = true,
    showBtn = false,
    btnStyle = {},
    placeIcon = 'inner',
    btnTitle = '搜索',
    debounceTime = 0,
}:Params, ref) => {
    const [inputCon , setInputCon] = useState('')
    const debounceTimeRef = useRef(0)

    useEffect(() => {
        debounceTimeRef.current = debounceTime
    }, [debounceTime])

    const onInputEven = (e) => {
        const value = e.detail.value
        changeData(value)
    }

    useImperativeHandle(ref, () => ({
        clearInput
    }))

    const clearInput = () => {
        setInputCon('')
        changeOnSearch?.('')
    }

    const changeData = debounce((value) => {
        setInputCon(value)
        changeOnSearch?.(value)
    }, debounceTimeRef.current)

    const onSearch = () => {
        clickOnSearch?.(inputCon)
    }

    return (
        <>
            <View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
                <View className={styles.search_con}>
                    {showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
                    <Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
                    {!!inputCon&&<View className={styles.search_closeBtn}>
                        <CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
                    </View>}
                </View>
                {showBtn&&<View style={btnStyle} className={styles.btn} onClick = {() => onSearch()}>{btnTitle}</View>}
            </View>
        </>
    )
})