import {Input} from "antd";
import {useSetState} from "ahooks";
import {SearchOutlined} from "@ant-design/icons";
import React from "react";
import TimeSelect from "@/components/form/time-select.tsx";
import {useTranslation} from "react-i18next";

type Props = {
	onSearch?: (params: VideoSearchParams) => void;
	onBtnStartClick?: () => Promise<void>;
	loading?: boolean;
}

export default function SearchForm({onSearch}: Props) {
	const {t} = useTranslation()
	const [state, setState] = useSetState<{
		pushing?: boolean;
		time_flag: number;
		title?: string;
	}>({
		time_flag: 0
	})

	const onFinish = (params: Partial<VideoSearchParams>) => {
		onSearch?.({
			time_flag: params.time_flag,
			title: params.title,
			pagination: {page: 1, limit: 12}
		})
	}

	const handleTimeFilter = (time_flag: number) => {
		setState({time_flag})
		onFinish({
			title: state.title, time_flag
		})
	}

	return (<div className={'search-panel  pt-6 pb-2'}>
		<div className="search-form">
			<div className="flex items-center gap-4">
				<Input
					className="w-[270px] rounded-3xl"
					prefix={<SearchOutlined/>}
					onChange={e => setState({title: e.target.value})}
					onPressEnter={() => onFinish(state)}
					onBlur={() => onFinish(state)}
					allowClear
					placeholder={t("history.search_key")}
				/>
				<TimeSelect
					className="w-[140px] ml-1"
					value={state.time_flag}
					onChange={handleTimeFilter}
				/>
			</div>
		</div>
	</div>)
}