import {Button, Modal} from "antd";
import React, {useState} from "react";
import {showErrorToast, showToast} from "@/components/message.ts";
import {push2room, VideoStatus} from "@/service/api/video.ts";
import {IconArrowRight, IconWarningCircle} from "@/components/icons";
import {useTranslation} from "react-i18next";


export default function ButtonPush2Room(props: { ids: Id[]; list: VideoInfo[];onSuccess?:()=>void; }) {
	const [loading, setLoading] = useState(false)
	const {t} = useTranslation()
	const handlePush = () => {
		setLoading(true)
		// 只需要已经生成视频的数据id
		const vids = props.list.filter(v => v.status == VideoStatus.Generated && props.ids.includes(v.id)).map(v => v.id)
		push2room(vids).then(() => {
			props.onSuccess?.()
			if(props.ids.length == vids.length){
				showToast(t("video.push_success"), 'success')
			}else{
				showToast(t("video.push_failed"), 'success')
			}
		}).catch(showErrorToast).finally(() => {
			setLoading(false)
		})
	}
	const onPushClick = () => {
		if(loading) return;
		if (props.ids.length === 0) {
			showToast(t("video.push_empty"), 'warning')
			return
		}
		Modal.confirm({
			wrapClassName:'root-modal-confirm',
			title: '操作提示',
			icon: <span className="anticon anticon-exclamation-circle"><IconWarningCircle/></span>,
			content: t("video.push_confirm"),
			onOk: handlePush
		})
	}
	return (

		<div>
			<button
				disabled={loading}
				className='bg-[#4096ff] hover:bg-blue-600 text-white'
				onClick={onPushClick}
			>
				<span className={'text'}>{t("video.push_to_live")}</span>
				<IconArrowRight />
			</button>
		</div>
	)
}