import {Button, Form, Input, Select, Space} from "antd";
import {useSetState} from "ahooks";
import {PlayCircleOutlined} from "@ant-design/icons";
import {SearchListTimes} from "@/pages/news/components/news-source.ts";

type Props = {
	onSearch?: (params: VideoSearchParams) => void;
	onBtnStartClick?: () => Promise<void>;
	loading?:boolean;
}
export default function SearchForm({onSearch, onBtnStartClick,loading}: Props) {
	const [state, setState] = useSetState<{
		pushing?: boolean;
	}>({})
	const onFinish = (values) => {
		onSearch?.({
			...values,
			pagination: {page: 1, limit: 10}
		})
		//console.log(values)
	}

	return (<div className={'search-panel'}>
		<div className="flex justify-between items-center">
			<div className="search-form">
				<Form<VideoSearchParams> className={""} layout="inline" onFinish={onFinish} initialValues={{title:'',time_flag:0}}>
					<Form.Item name="title">
						<Input className="w-[200px]" allowClear placeholder={'请输入搜索信息'}/>
					</Form.Item>
					<Form.Item label={'更新时间'} name="time_flag" className="w-[250px]">
						<Select
							options={SearchListTimes}
							optionRender={(option) => (
								<div className="flex items-center">
									<span role="icon" className={`radio-icon`}></span>
									<span role="listitem" aria-label={String(option.label)}>{option.label}</span>
								</div>
							)}
						/>
					</Form.Item>
					<Form.Item>
						<Space size={10}>
							<Button loading={loading} type={'primary'} htmlType={'submit'}>搜索</Button>
						</Space>
					</Form.Item>
				</Form>
			</div>
			<Space size={10}>
				<Button
					loading={state.pushing} type={'primary'}
					onClick={onBtnStartClick} icon={<PlayCircleOutlined/>}
				>一键推流</Button>
			</Space>
		</div>
	</div>)
}