import { View } from '@tarojs/components'
import type { ReactNode } from 'react'
import { memo, useMemo } from 'react'
import IconFont from '../iconfont/iconfont'
import InputX from '../InputX'
import styles from './index.module.scss'

interface Params {
  showIcon?: boolean
  disabled?: boolean
  placeholder?: string
  title?: string
  showTitle?: boolean
  showBorder?: boolean
  changeOnInput?: (string) => void
  clickOnInput?: () => void
  children?: ReactNode
  height?: string
  titleStyle?: Object
  styleObj?: Object
}
const SearchInput = (props: Params) => {
  const {
    showTitle = true,
    title = '标题',
    showIcon = false,
    disabled = false,
    placeholder = '请输入',
    showBorder = true,
    changeOnInput,
    clickOnInput,
    height = '80rpx',
    titleStyle = {},
  } = props

  const stylen = useMemo(() => {
    if (!showBorder) {
      return { borderBottom: 0 }
    }
    return {}
  }, [showBorder])
  return (
    <View className={styles.searchInput_main} style={{ height, ...stylen }}>
      {showTitle && (
        <View className={styles.searchInput_title} style={titleStyle}>
          {title}
        </View>
      )}
      <View className={styles.searchInput_con}>
        {(!props.children && (
          <InputX disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
        )) || <>{props.children}</>}
      </View>
      {showIcon && <IconFont customClassName={styles.icon_more_self} name="icon-chakanquanbukehu" size={36} color="#333"></IconFont>}
    </View>
  )
}
export default memo(SearchInput)
