import { useState } from 'react'
import { View, Input } from '@tarojs/components'
import TDesignIcon from '../icon'
import './index.css'

interface SearchProps {
  placeholder?: string
  disabled?: boolean
  shape?: 'round' | 'square'
  value?: string
  leftIcon?: string
  clearable?: boolean
  action?: string
  center?: boolean
  onChange?: (value: string) => void
  onFocus?: () => void
  onBlur?: () => void
  onSubmit?: (value: string) => void
  onClear?: () => void
  onActionClick?: () => void
}

export default function TDesignSearch({
  placeholder = '搜索商品',
  disabled = false,
  shape = 'round',
  value = '',
  leftIcon = 'search',
  clearable = true,
  action = '',
  center = false,
  onChange,
  onFocus,
  onBlur,
  onSubmit,
  onClear,
  onActionClick
}: SearchProps) {
  const [focused, setFocused] = useState(false)
  const [internalValue, setInternalValue] = useState(value)

  const handleInput = (e) => {
    const newValue = e.detail.value
    setInternalValue(newValue)
    onChange?.(newValue)
  }

  const handleFocus = () => {
    setFocused(true)
    onFocus?.()
  }

  const handleBlur = () => {
    setFocused(false)
    onBlur?.()
  }

  const handleConfirm = (e) => {
    onSubmit?.(e.detail.value)
  }

  const handleClear = () => {
    setInternalValue('')
    onChange?.('')
    onClear?.()
  }

  const handleActionClick = () => {
    onActionClick?.()
  }

  const showClearIcon = clearable && internalValue && !disabled

  return (
    <View className={`tdesign-search tdesign-search--${shape}`}>
      <View
        className={`
          tdesign-search__input-box
          ${focused ? 'tdesign-search__input-box--focused' : ''}
          ${center ? 'tdesign-search__input-box--center' : ''}
          tdesign-search__input-box--${shape}
        `}
      >
        {leftIcon && (
          <TDesignIcon
            name={leftIcon}
            size="32rpx"
            color="#fa550f"
            className="tdesign-search__icon"
          />
        )}

        <Input
          type="text"
          placeholder={placeholder}
          disabled={disabled}
          value={internalValue}
          onInput={handleInput}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onConfirm={handleConfirm}
          className={`tdesign-search__input ${disabled ? 'tdesign-search__input--disabled' : ''}`}
          placeholderClass="tdesign-search__placeholder"
        />

        {showClearIcon && (
          <View
            className="tdesign-search__clear hotspot-expanded"
            onClick={handleClear}
          >
            <TDesignIcon name="close-circle-filled" size="32rpx" color="#999" />
          </View>
        )}
      </View>

      {action && (
        <View
          className="tdesign-search__search-action"
          onClick={handleActionClick}
        >
          {action}
        </View>
      )}
    </View>
  )
}