import { Input, View } from "@tarojs/components";
import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
import styles from  './index.module.scss';

type Params = {
    showIcon?: false|true,
    disabled?: false|true,
    placeholder?: string,
    title?: string,
    showTitle?: false|true,
    showBorder?: false|true,
    changeOnInput?: (string) => void,
    clickOnInput?: () => void,
    children?: ReactNode
    height?: string,
    titleStyle?: Object,
    styleObj?: Object

}

export default memo((props: Params) => {
    let {
        showTitle = true,
        title = '标题', 
        showIcon = false, 
        disabled = false, 
        placeholder = '请输入',
        showBorder = true,
        changeOnInput,
        clickOnInput,
        height = '80rpx',
        titleStyle = {}
    } = props

    let stylen = useMemo(() => {
        if(!showBorder) {
            return { borderBottom: 0 }
        }
        return {}
    }, [showBorder])
    return (
        <View className={styles.searchInput_main} style={{height: height, ...stylen}}>
            {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
            <View className={styles.searchInput_con}>
                {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
                    ||<>{props.children}</>
                }
            </View>
            {showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
        </View>
    )
})