import clsx from "clsx";
import {CaretRightOutlined} from "@ant-design/icons"
import {timeFromNow} from "@/util/strings.ts";

import styles from './style.module.scss'

type VideoItemProps = {
	videoInfo: VideoInfo;
	onLive?: boolean;
	onClick?: (autoPlay:boolean) => void;
	onRemove?: () => void;
	onCheckedChange?: (checked: boolean) => void;
	checked?: boolean;
}

export default function VideoItem(props: VideoItemProps) {

	return <div
		className={clsx(styles.videoItem, `rounded-lg h-[240px] overflow-hidden relative group ${props.checked ? styles.videoChecked : ''}`)}>
		<div className={`controls absolute top-1 right-1 z-[2] rounded items-center gap-2`}>
			{/*<span onClick={props.onRemove} className={'cursor-pointer text-blue-500 text-2xl cursor-pointer'}><IconDelete /></span>*/}
			<div className={clsx("checkbox", {checked: props.checked})}
			     onClick={() => props.onCheckedChange?.(!props.checked)}></div>
		</div>
		<div className="cover">
			<img className={'w-full cursor-pointer object-cover'} src={props.videoInfo.cover}/>
			<div className={'absolute inset-x-0 top-0 flex items-center justify-center bottom-[36px]'}>
				<div className={styles.playIcon} onClick={()=>props.onClick?.(true)}><CaretRightOutlined /></div>
			</div>
		</div>
		<div
			className="video-bottom bg-black/30 backdrop-blur-[2px] text-sm absolute inset-x-0 bottom-0 text-white py-2 px-3 items-center flex justify-between">
			<div className="title cursor-pointer flex-1 text-nowrap overflow-hidden text-ellipsis min-w-0 mr-4"
			     onClick={()=>props.onClick?.(false)}>{props.videoInfo.title}</div>
			<div className="video-time-info">{timeFromNow(props.videoInfo.ctime)}</div>
		</div>
		<div
			className={"absolute top-1 left-1 bg-black/50 rounded-3xl text-white px-3 py-0.5"}>{Math.ceil(props.videoInfo.duration / 1000)}s
		</div>
	</div>
}