import React, {useState} from "react";
import {showErrorToast, showToast} from "@/components/message.ts";
import {push2video} from "@/service/api/article.ts";
import {IconArrowRight} from "@/components/icons";
import {useNavigate} from "react-router-dom";
import {useTranslation} from "react-i18next";


export default function ButtonPush2Video(props: { ids: Id[]; onSuccess?: () => void; }) {
	const [loading, setLoading] = useState(false)
	const {t} = useTranslation()
	const navigate = useNavigate()
	const handlePush = () => {
		setLoading(true)
		push2video(props.ids).then(() => {
			showToast(t('news.push_stream_success'), 'success')
			navigate('/create?state=push-success', {
				state: 'push-success'
			})
			// props.onSuccess?.()
		}).catch(showErrorToast).finally(() => {
			setLoading(false)
		})
	}
	const onPushClick = () => {
		if (loading) return;
		if (props.ids.length === 0) {
			showToast(t('news.push_stream_empty'), 'warning')
			return
		}
		// Modal.confirm({
		// 	title: '操作提示',
		// 	content: '是否确定一键开播选中新闻？',
		// 	onOk: handlePush
		// })
		handlePush();
	}
	return (
		<div>
			<button
				disabled={loading}
				className='bg-[#4096ff] hover:bg-blue-600 text-white'
				onClick={onPushClick}
			>
				<span className={'text'}>{loading ? t('news.push_streaming') : t('news.generate_video')}</span>
				<IconArrowRight className={'text-white'}/>
			</button>
		</div>
	)
}