import {Search} from '@nutui/icons-react-taro'
import {Button, Input} from '@nutui/nutui-react-taro'
import {useState} from "react";
import Taro from '@tarojs/taro';
import { goTo } from '@/utils/navigation';

function MySearch(props: any) {
  const [keywords, setKeywords] = useState<string>('')

  const onKeywords = (keywords: string) => {
    setKeywords(keywords)
  }

  const onQuery = () => {
    if(!keywords.trim()){
      Taro.showToast({
        title: '请输入关键字',
        icon: 'none'
      });
      return false;
    }
    // 跳转到搜索页面 - 使用新的导航工具，自动处理路径和参数
    goTo('shop/search/index', { keywords: keywords.trim() });
  }

  // 点击搜索框跳转到搜索页面
  const onInputFocus = () => {
    goTo('shop/search/index');
  }


  return (
    <div className={'z-50 left-0 w-full hidden'}>
      <div className={'px-2'}>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            background: '#ffffff',
            padding: '0 5px',
            borderRadius: '20px',
            marginTop: `${props.statusBarHeight + 50}px`,
          }}
        >
          <Search size={18} className={'ml-2 text-gray-400'}/>
          <Input
            placeholder="搜索商品"
            value={keywords}
            onChange={onKeywords}
            onConfirm={onQuery}
            onFocus={onInputFocus}
            style={{ padding: '9px 8px'}}
          />
          <div
            className={'flex items-center'}
          >
            <Button type="success" style={{background: 'linear-gradient(to bottom, #1cd98a, #24ca94)'}} onClick={onQuery}>
              搜索
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MySearch;