1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / layout / includes / header /
Filename : MobileSearchForm.jsx
back
'use client'
import React, { useEffect, useState } from 'react'
import ExpressButton from '@/components/buttons/ExpressButton'
import { useParams, useRouter } from 'next/navigation'
import useAlert from '@/components/alert/alertInfo'
// import { usePreSearchSubmit } from "@/api/generale";
// import SearchSuggestion from '@/components/layout/header/includes/SearchSuggestion'
import { SearchIcon } from '@/components/icons'
import ImageSearch from '@/components/layout/includes/header/ImageSearch'
import ImageSearchTwo from '@/components/layout/includes/header/ImageSearchTwo'

const MobileSearchForm = () => {

    const params = useParams()

    const router = useRouter()
    const keyword = params?.keyword || ''
    const { info } = useAlert()

    const [search, setSearch] = useState('')
    const [showSuggestion, setShowSuggestion] = useState(false)

    // const { mutateAsync, isLoading } = usePreSearchSubmit()

    useEffect(() => {
        const delayDebounceFn = setTimeout(() => {
            if (
                search?.length > 2 &&
                search?.length < 20 &&
                search !== keyword &&
                !showSuggestion
            ) {
                setShowSuggestion(true)
            } else if (search?.length < 3) {
                setShowSuggestion(false)
            }
        }, 500)
        return () => {
            clearTimeout(delayDebounceFn)
        }
    }, [search])  // eslint-disable-line react-hooks/exhaustive-deps

    useEffect(() => {
        if (keyword && search !== keyword) {
            setSearch(keyword)
        } else if (!keyword) {
            setSearch('')
        }
    }, [keyword]) // eslint-disable-line react-hooks/exhaustive-deps

    const actionSubmit = search_string => {
        if (search_string.length < 20) {
            setShowSuggestion(false)
            router.push(`/search/${search_string}`)
            return ''
        }

        // mutateAsync({ keyword: search_string }).then(res => {
        //     // console.log({res})
        //     if (res.status) {
        //         const item_id = res.item_id || ''
        //         const item_type = res.item_type ? String(res.item_type).toLowerCase() : ''
        //         setSearch('')
        //         if (item_type === 'taobao') {
        //             const spit_Data = item_id.split('-')
        //             if (
        //                 spit_Data.includes('abb') &&
        //                 typeof window === 'undefined'
        //             ) {
        //                 window.location.href = `${wholesaleBase}/product/${item_id}`
        //             } else {
        //                 router.push(res.item_url)
        //             }
        //         } else if (item_type === 'aliexpress') {
        //             router.push(`/aliexpress/product/${item_id}`)
        //         } else {
        //             info(`Sorry! searching is overloaded, Try again!`)
        //         }
        //         setShowSuggestion(false)
        //     } else {
        //         router.push(`/search?keyword=${search_string}`)
        //     }
        // })
    }

    const goToSearchResult = (event) => {
        event.preventDefault()
        if (search) {
            actionSubmit(search)
        } else {
            info(`Type your search text`)
        }
    }

    const enterAction = e => {
        if (e.key === 'Enter' || e.keyCode === 13) {
            if (search) {
                actionSubmit(search)
            } else {
                info(`Type your search text`)
            }
        } else if (e.key === 'Escape') {
            setShowSuggestion(false)
        }
    }


    return (
        <>
            <div
                className={
                    'fixed top-[115px] lg:top-[77px] left-0 right-0 bottom-0 bg-transparent z-[99]'
                }
                style={{
                    display: showSuggestion ? 'block' : 'none',
                }}
                onMouseEnter={() => setShowSuggestion(false)}
            />
            <div className="w-full z-[100]">
                <div className="relative flex justify-start items-center h-8 lg:h-11">
                    <div className="absolute top-0 left-0 bottom-0 flex justify-center items-center w-11 h-8 lg:h-11">
                        {/*<ImageSearch />*/}
                        <ImageSearchTwo />
                    </div>
                    <form onSubmit={goToSearchResult} className={'w-full flex'}>
                        <input
                            type="text"
                            className="py-1 lg:py-2 pl-10 pr-4 lg:pr-0 rounded-[6px] w-full border border-gray-300 focus:outline-none focus:ring-1 focus:!ring-[#f5222d] delay-200 ease-in-out"
                            placeholder="Search..."
                            name={'search'}
                            value={search}
                            onChange={e => setSearch(e.target.value)}
                            onKeyUp={enterAction}
                        />
                        <div className="absolute inset-y-0 right-0 gap-2 flex items-center">
                            <ExpressButton
                                type={'red'}
                                htmlType={'submit'}
                                icon={<SearchIcon size={24} color={'#fff'} />}
                                className={
                                    'px-[12px] py-[4px] rounded-tl-0 rounded-bl-0  w-[54px] h-[34px]  lg:h-[40px] lg:w-[62px]'
                                }
                                aria-label="Search"
                            />
                        </div>
                    </form>
                </div>
                {/* {showSuggestion === true && (
                    <SearchSuggestion
                        search={search}
                        setSearch={setSearch}
                        setShowSuggestion={setShowSuggestion}
                    />
                )}*/}
            </div>
        </>
    )
}

export default MobileSearchForm