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

interface 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
}
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 && (
          <Input
            alwaysEmbed
            cursorSpacing={150}
            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>
  )
}
export default memo(SearchInput)
