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

interface 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 // 防抖时间，不设默认为零
  defaultValue?: string
  borderRadius?: string
}
const Search = (
  {
    clickOnSearch, // 点击筛选按钮触发
    changeOnSearch, // 输入文字触发
    disabled = false, // 是否禁用
    placeholder = '输入搜索内容',
    showIcon = true, // 是否显示关闭图标
    showBtn = false, // 是否显示搜索按钮
    btnStyle = {},
    placeIcon = 'inner', // 搜索图标位置：inner在里面，out在外面
    btnTitle = '搜索', // 搜索文字
    debounceTime = 0, // 防抖时间，不设默认为零
    defaultValue = '', // 默认值
    borderRadius = '50rpx',
  }: Params,
  ref,
) => {
  const [inputCon, setInputCon] = useState('')
  const debounceTimeRef = useRef(0)
  useEffect(() => {
    setInputCon(defaultValue)
  }, [defaultValue])

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

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

  const changeData = debounce((value) => {
    setInputCon(value)
    changeOnSearch?.(value)
  }, debounceTimeRef.current)
  const onInputEven = (e) => {
    const value = e.detail.value
    changeData(value)
  }
  const onSearch = () => {
    clickOnSearch?.(inputCon)
  }
  useImperativeHandle(ref, () => ({
    clearInput,
  }))
  return (
    <>
      <View className={styles.search_main}>
        <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
            style={{ borderRadius }}
            alwaysEmbed
            cursorSpacing={150}
            placeholderStyle="color:#ABABAB; font-size:26rpx"
            onConfirm={onSearch}
            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', border: '0' }} />
            </View>
          )}
        </View>
        {showBtn && (
          <View style={btnStyle} className={styles.btn} onClick={onSearch}>
            {btnTitle}
          </View>
        )}
      </View>
    </>
  )
}
export default memo(
  forwardRef(
    Search,
  ),
)
