import {App} from "antd";
import {showToast} from "@/components/message.ts";
import React, {useState} from "react";
import {IconDelete, IconWarningCircle} from "@/components/icons";
import {deleteByIds} from "@/service/api/article.ts";

export default function ButtonDeleteBatch(props: { ids: Id[];onSuccess?: () => void; }) {
	const {modal} = App.useApp();
	const [loading, setLoading] = useState(false)
	const handlePush = () => {
		setLoading(true)
		deleteByIds(props.ids).then(() => {
			props.onSuccess?.();
			showToast('删除成功', 'success')
		}).catch(() => {
			showToast('删除失败', 'error')
		}).finally(() => {
			setLoading(false)
		})
	}
	const onPushClick = () => {
		if(loading) return;
		if (props.ids.length === 0) {
			showToast('请选择要删除的新闻', 'warning')
			return
		}
		modal.confirm({
			wrapClassName:'root-modal-confirm',
			icon: <span className="anticon anticon-exclamation-circle"><IconWarningCircle/></span>,
			title: `你确定要删除选择的 ${props.ids.length} 条新闻吗？`,
			content: '删除后需从新闻素材中重新选择',
			onOk: handlePush,
			centered: true
		})
	}
	return (
		<div>
			<button
				disabled={loading}
				onClick={onPushClick}
				className='bg-gray-300 hover:bg-gray-400 text-white'
			>
				<span className={'text'}>批量删除</span>
				<IconDelete className=""/>
			</button>
		</div>
	)
}