import {Checkbox, Image, Tag} from "antd";
import {IconDelete} from "@/components/icons";
import {useState} from "react";


import ImageCover from './cover.png'
import {formatDuration, timeFromNow} from "@/util/strings.ts";
import dayjs from "dayjs";

type VideoItemProps = {
	videoInfo: VideoInfo;
	onLive?: boolean;
	onClick?: () => void;
	onRemove?: () => void;
	onCheckedChange?: (checked:boolean) => void;
}
export default function VideoItem(props: VideoItemProps) {
	const [state, setState] = useState({
		checked: false
	})
	const handleCheckedChange = (checked:boolean) => {
		setState({checked})
		if (props.onCheckedChange) {
			props.onCheckedChange(checked)
		}
	}

	return <div className={'video-item bg-gray-100 hover:drop-shadow-md rounded overflow-hidden relative group'}>
		<div className={`controls absolute top-1 right-1 z-[2] p-1 rounded  items-center gap-2 bg-white/80 ${state.checked?'flex':'hidden'} group-hover:flex`}>
			<span onClick={props.onRemove} className={'cursor-pointer text-blue-500 text-2xl cursor-pointer'}><IconDelete /></span>
			{!props.onLive && <Checkbox onChange={e=>handleCheckedChange(e.target.checked)} />}
		</div>
		<div className="cover" onClick={props.onClick}>
			<img className={'w-full cursor-pointer h-[180px] object-cover'} src={props.videoInfo.cover}/>
		</div>
		<div className="text-sm py-2 px-3">
			<div className="title my-1 cursor-pointer" onClick={props.onClick}>{props.videoInfo.title}</div>
			<div className="info flex justify-between gap-2 text-sm">
				<div className="video-time-info  text-gray-500">
					<span>时长: {formatDuration(Math.ceil(props.videoInfo.duration / 1000))}</span>
					<span className="ml-1">{timeFromNow(props.videoInfo.publish_time)}</span>
				</div>
				{props.videoInfo.status == 3 && <div className="live-info">
					<Tag color="processing" className="mr-0">已在直播间</Tag>
				</div>}
			</div>
		</div>
	</div>
}