import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { memo, useEffect, 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
}

export default memo(({
    clickOnSearch,
    changeOnSearch,
    disabled = false,
    placeholder = '输入搜索内容',
    showIcon = true,
    showBtn = false,
    style = {},
    btnStyle = {},
    placeIcon = 'inner',
    btnTitle = '搜索'
}:Params) => {
    const [inputCon , setInputCon] = useState('')
    
    const onInputEven = (e) => {
        const value = e.detail.value
        setInputCon(value)
        changeOnSearch?.(value)
    }

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

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

    return (
        <>
            <View className={styles.search_main} onClick={() => onSearch()} style={style}>
                <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>
        </>
    )
})