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";
import {useTranslation} from "react-i18next";
import {divide} from "lodash";

export default function ButtonDeleteBatch(props: { ids: Id[];onSuccess?: () => void; }) {
	const {t} = useTranslation()
	const {modal} = App.useApp();
	const [loading, setLoading] = useState(false)
	const handlePush = () => {
		setLoading(true)
		deleteByIds(props.ids).then(() => {
			props.onSuccess?.();
			showToast(t('delete_success'), 'success')
		}).catch(() => {
			showToast(t('delete_failed'), 'error')
		}).finally(() => {
			setLoading(false)
		})
	}
	const onPushClick = () => {
		if(loading) return;
		if (props.ids.length === 0) {
			showToast(t('news.delete_empty'), 'warning')
			return
		}
		modal.confirm({
			wrapClassName:'root-modal-confirm',
			icon: <span className="anticon anticon-exclamation-circle"><IconWarningCircle/></span>,
			title: t('news.delete_confirm_count',{count:props.ids.length}),
			content: <span dangerouslySetInnerHTML={{__html:t('news.delete_description')}}></span>,
			onOk: handlePush,
			centered: true
		})
	}
	return (
		<div>
			<button
				disabled={loading}
				onClick={onPushClick}
				className='bg-gray-300 hover:bg-gray-400 text-white'
			>
				<span className={'text'}>{t('delete_batch')}</span>
				<IconDelete className=""/>
			</button>
		</div>
	)
}