import { Button, Form, Input } from 'antd';
import { useCodeManageContext } from './CodeManageContext';
import { ChangeEvent, useRef } from 'react';

export default function CodeManageSearchBase() {
    const { setCurrentPage, searchRefetch, setSearchKeyword } = useCodeManageContext();
    const debounceTimer = useRef<NodeJS.Timeout | null>(null);
    const onSearch = (value: string) => {
        console.log(value);
        setSearchKeyword(value);
        setCurrentPage(1)
        searchRefetch()
    };
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // 设置表单值
        setSearchKeyword(e.target.value);
        // 设置页码为1，确保从第一页开始显示搜索结果
        setCurrentPage(1);
        // 使用防抖处理，避免频繁发送请求
        if (debounceTimer.current) {
            clearTimeout(debounceTimer.current);
        }
        debounceTimer.current = setTimeout(() => {
            // 触发查询
            searchRefetch();
        }, 300); // 300毫秒的防抖延迟
    };
    return <>
        <div className="py-4 mt-10 w-2/3 mx-auto">
            <Form>
                <Form.Item name="search" label="关键字搜索">
                    <Input.Search
                        placeholder="输入分享码或文件名"
                        enterButton
                        onSearch={onSearch}
                        onChange={onChange}
                    />
                </Form.Item>
            </Form>
        </div>
    </>
}