import {useSortable} from "@dnd-kit/sortable";
import {useSetState} from "ahooks";
import React, {useEffect} from "react";
import {Checkbox, Popconfirm} from "antd";

import ImageCover from '@/assets/images/cover.png'
import {IconDelete, IconEdit, IconPlaying, IconWarningCircle} from "@/components/icons";
import {VideoStatus} from "@/service/api/video.ts";
import {formatTime} from "@/util/strings.ts";
import {useTranslation} from "react-i18next";

type Props = {
	video: VideoInfo | LiveVideoInfo,
	editable?: boolean;
	sortable?: boolean;
	index?: number;
	checked?: boolean;
	active?: boolean;
	playing?: boolean;
	onCheckedChange?: (checked: boolean) => void;
	onPlay?: () => void;
	onEdit?: () => void;
	onItemClick?: () => void;
	onRemove?: () => void;
	id: number;
	className?: string;
	type?: 'live' | 'create'
}

export const VideoListItem = (
	{
		id, video, onRemove, checked,playing,
		onCheckedChange, onEdit, active, editable,
		className, sortable, type, index,onItemClick
	}: Props) => {
	const {
		attributes, listeners,
		setNodeRef, transform
	} = useSortable({resizeObserverConfig: {}, id})

	const {t} = useTranslation()
	const [state, setState] = useSetState<{ checked?: boolean }>({})
	useEffect(() => {
		setState({checked})
	}, [checked])

	const generating = (type == 'create' && video.status == VideoStatus.Generating  )

	return <div
		className={`video-item ${className}`}
		ref={setNodeRef} style={{transform: `translateY(${transform?.y || 0}px)`,}}
	>
		<div className={`list-row ${generating ? 'disabled' : ''} ${active?'playing':''}`}>
			<div
				className="col number"
			     {... (sortable && !generating?listeners:{})}
			     {... (sortable && !generating?attributes:{})}
			>{index}</div>
			<div className="col cover cursor-pointer" onClick={onItemClick}>
				<div className="relative">
					<img className="w-[100px] h-[56px] object-cover" src={video.cover || ImageCover}/>
					{generating &&
                        <div className={'absolute inset-0 bg-black/30 text-white flex items-center justify-center'}>
                            <span className="ml-1">{t('video.generating')}</span>
                        </div>
					}
					{/* && active*/}
					{!generating && playing && <div className={'absolute rounded inset-0 bg-black/30 text-sm text-white flex items-center justify-center'}>
                        <div className="text-center">
                            <IconPlaying className="inline-block text-xl" />
                            <div>{t('video.playing')}</div>
                        </div>
                    </div>}
				</div>
			</div>
			<div
				className="col title"
			     {... (sortable && !generating?listeners:{})}
			     {... (sortable && !generating?attributes:{})}
			>
				<div className="line-clamp-2">
					{video.title || video.video_title}
				</div>
			</div>
			<div
				className="col generated-time"
			     {... (sortable && !generating?listeners:{})}
			     {... (sortable && !generating?attributes:{})}
			>{video.ctime ? formatTime(video.ctime,'min') : '-'}</div>
			<div className="col operation">
				{/*{sortable && !generating && (!active ?*/}
				{/*	<button className="hover:text-blue-500 cursor-move">*/}
				{/*		<MenuOutlined/>*/}
				{/*	</button> : <button disabled className="cursor-not-allowed"><MenuOutlined/></button>)}*/}
				<div className={"flex items-center gap-4"}>
					{editable && !generating && <>
						{onEdit &&
                            <button className="hover:text-blue-500" onClick={e=>{
								e.preventDefault()
								e.stopPropagation()
								onEdit?.()
							}} style={{fontSize: '1.1em'}}>
                                <IconEdit/>
                            </button>}

						{onRemove && <Popconfirm
                            rootClassName={'popconfirm-main'}
                            placement={'left'}
                            arrow={false}
                            icon={<IconWarningCircle/>}
                            title={t('video.delete_confirm_title')}
                            // description={`删除后需从重新${type == 'create' ? '生成' : '推流'}`}
                            onConfirm={onRemove}
                        ><button className="hover:text-blue-500"><IconDelete/></button></Popconfirm>}
                        <Checkbox checked={state.checked} onChange={() => {
							if (onCheckedChange) {
								onCheckedChange(!state.checked)
							} else {
								setState({checked: !state.checked})
							}
						}} />
                    </>}
				</div>
			</div>
		</div>
	</div>
}