import { View } from '@tarojs/components'
import classnames from 'classnames'
import type { ReactNode } from 'react'
import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'
import IconFont from '../iconfont/iconfont'
import InputX from '../InputX/index'
import styles from './index.module.scss'
import CloseBtn from '@/components/closeBtn'

interface Params {
  clickOnSearch?: (val: string) => void
  disabled?: boolean
  placeholder?: string
  changeOnSearch?: (value: string) => void
  showIcon?: boolean
  placeIcon?: 'out' | 'inner'
  style?: Object
  showBtn?: boolean
  btnStyle?: Object
  btnTitle?: string
  defaultValue?: string
  children?: ReactNode
  customRightSlot?: ReactNode
  adjustPosition?: boolean
  showScan?: boolean
  handScan?: () => void
  cursorSpacing?: Number
}
const Search = (
  {
    clickOnSearch, // 点击筛选按钮触发
    changeOnSearch, // 输入文字触发
    adjustPosition = false,
    disabled = false, // 是否禁用
    placeholder = '输入搜索内容',
    showIcon = true, // 是否显示关闭图标
    showBtn = false, // 是否显示搜索按钮
    btnStyle = {},
    placeIcon = 'inner', // 搜索图标位置：inner在里面，out在外面
    btnTitle = '搜索', // 搜索文字
    defaultValue = '', // 默认值
    children,
    customRightSlot,
    showScan = false,
    handScan,
    cursorSpacing = 0,
  }: Params,
  ref,
) => {
  const [inputCon, setInputCon] = useState('')
  useEffect(() => {
    setInputCon(defaultValue)
  }, [defaultValue])

  const onInputEven = (e) => {
    const value = e.detail.value
    setInputCon(value)
    changeOnSearch?.(value)
  }

  const clearInput = () => {
    setInputCon('')
    changeOnSearch?.('')
  }
  useImperativeHandle(ref, () => ({
    clearInput,
  }))
  const onSearch = () => {
    clickOnSearch?.(inputCon)
  }

  return (
    <>
      <View className={styles.search_main}>
        <View className={styles.search_con}>
          {showIcon && (
            <IconFont
              name="icon-sousuo"
              size={37}
              color="#ababac"
              customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}
            ></IconFont>
          )}
          <View className={styles.input_bar}>
            <InputX
              cursorSpacing={cursorSpacing as any}
              adjustPosition={adjustPosition}
              placeholderStyle="color:#ABABAB; font-size:26rpx"
              onConfirm={onSearch}
              disabled={disabled}
              value={inputCon}
              placeholder={placeholder}
              onInput={e => onInputEven(e)}
              customClassName={classnames(placeIcon == 'out' && styles.input_out)}
              customStyle={{ width: '100%' }}
            />
            <View className={styles.search_closeBtn}>
              {!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}
            </View>
            {showScan && (
              <View
                onClick={() => {
                  handScan?.()
                }}
              >
                <IconFont name="icon-saomiao" size={40} color="#337FFF"></IconFont>
              </View>
            )}

            <View className={styles.customRightSlot}>{customRightSlot}</View>
          </View>
        </View>
        {showBtn && (
          <View style={btnStyle} className={styles.btn} onClick={onSearch}>
            {btnTitle}
          </View>
        )}
        {children}
      </View>
    </>
  )
}
export default memo(
  forwardRef(
    Search,
  ),
)