import { Input } from 'antd';
import { SearchProps } from 'antd/es/input'
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSearchParams } from 'react-router-dom';
import { useOrderFillterState } from '../../../zustand/OrderFillter';
const { Search } = Input;

const CustomSearchField = ({ searchBy }: any) => {
    const { t } = useTranslation();
    const {setUsername,username} = useOrderFillterState((state) => state)


    const [searchParams,] = useSearchParams();
    const [searchValue, setSearchValue] = useState(searchParams.get(searchBy ) || "");

    const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
        if (value || value !== "") {
            setUsername(value)
        } else {
            setUsername(value)
        }
    }

    const onChange = (e: any) => {
        const value = e.target.value
        setSearchValue(value);
        setUsername(value)
    }


    return (
        <div className='SearchField'
        >
            <Search
                allowClear
                enterButton={t("search")}
                size="middle"
                placeholder={t(searchBy ?? "search")}
                onSearch={onSearch}
                style={{ width: 250 }}
                value={username??searchValue}
                onChange={onChange}
            />

        </div>
    )
}

export default CustomSearchField