import {useState} from "react";
import {Empty, Modal, Pagination} from "antd";
import {useRequest} from "ahooks";

import VideoItem from "@/pages/library/components/video-item.tsx";
import SearchForm from "@/pages/library/components/search-form.tsx";
import VideoDetail from "@/pages/library/components/video-detail.tsx";
import {search} from "@/service/api/video.ts";

export default function LibraryIndex() {
	const [modal, contextHolder] = Modal.useModal();
	const [checkedIdArray, setCheckedIdArray] = useState<number[]>([])
	const [params, setParams] = useState<VideoSearchParams>({
		time_flag: 0,
		pagination: {
			page: 1,
			limit: 10
		}
	})
	const {data,loading} = useRequest(() => search(params), {
		refreshDeps: [params]
	})
	const handleRemove = (video: VideoInfo) => {
		modal.confirm({
			title: '删除提示',
			content: '是否要删除该视频',
			onOk: () => {
				console.log('OK', video);
			}
		})
	}
	const handleLive = async () => {
		if (checkedIdArray.length == 0) return;
		modal.confirm({
			title: '推流提示',
			content: '是否确定一键推流选中新闻视频？',
			onOk: () => {
				console.log('OK');
			}
		})
	}
	const [detailVideo, setDetailVideo] = useState<VideoInfo>()

	return (<>
		<div className={'container py-20'}>
			{contextHolder}
			<div className="search-form-container mb-5">
				<SearchForm
					onSearch={setParams}
					onBtnStartClick={handleLive}
					loading={loading}
				/>
			</div>
			<div className="bg-white rounded p-5">
				<div className={'video-list-container grid gap-5 grid-cols-4'}>
					{data?.list?.map((it, idx) => (
						<VideoItem
							onLive={idx == 2} key={it.id}
							videoInfo={it}
							onRemove={() => handleRemove(it)}
							onClick={() => setDetailVideo(it)}
							onCheckedChange={(checked) => {
								setCheckedIdArray(idArray => {
									return checked ? idArray.concat(it.id) : idArray.filter(id => id != it.id);
								})
							}}
						/>
					))}
				</div>
				<div className="video-page-container flex justify-center mt-5">
					{data?.pagination && data?.pagination.total > 0 ? <div className="flex justify-center mt-10">
						<Pagination
							current={params.pagination.page}
							total={data?.pagination.total}
							pageSize={data?.pagination.limit}
							showSizeChanger={false}
							simple={true}
							rootClassName={'simple-pagination'}
							onChange={(page) => setParams(prev=>({...prev,pagination: {page, limit: 10}}))}
						/>
					</div> : <div className="py-10">
						<Empty />
					</div>
					}
					{/*<Pagination defaultCurrent={1} total={50}/>*/}
				</div>
			</div>
		</div>
		{detailVideo && <VideoDetail video={detailVideo} onClose={() => setDetailVideo(undefined)}/>}
	</>)
}