import {Input, Modal} from "antd";
import ArticleGroup from "@/components/article/group.tsx";
import {useEffect, useState} from "react";
import {useSetState} from "ahooks";
import * as article from "@/service/api/article.ts";
import {regenerate} from "@/service/api/video.ts";

type Props = {
	id?: number;
	type: 'news' | 'video';
	onClose?: (saved?: boolean) => void;
}

export default function ArticleEditModal(props: Props) {

	const [groups, setGroups] = useState<BlockContent[][]>([]);
	const [title, setTitle] = useState('')

	const [state, setState] = useSetState({
		loading: false,
		open: false,
		msgTitle: '',
		msgGroup: '',
	})
	// 保存数据
	const handleSave = () => {
		console.log(groups, title)
		if (!title) {
			// setState({msgTitle: '请输入标题内容'});
			return;
		}
		if (groups.length == 0 || groups[0].length == 0 || !groups[0][0].content) {
			// setState({msgGroup: '请输入正文文本内容'});
			return;
		}
		const save = props.type == 'news' ? article.save : regenerate
		setState({loading: true})
		save(title, groups, props.id > 0 ? props.id : undefined).then(() => {
			props.onClose?.(true)
		}).finally(() => {
			setState({loading: false})
		});
		props.onClose?.()
	}
	useEffect(() => {
		if (props.id) {
			if (props.id > 0) {
				if (props.type == 'news') {
					article.getById(props.id).then(res => {
						setGroups(res.content_group)
						setTitle(res.title)
					})
				}
			} else {
				// 新增
				setGroups([
					[{
						type: 'text',
						content: '韩国国会当地时间14日16时举行全体会议，就在野党阵营第二次提出的尹锡悦总统弹劾案进行表决。根据投票结果，有204票赞成，85票反对，3票弃权，8票无效，弹劾案最终获得通过，尹锡悦的总统职务立即停止。'
					}],
					[
						{
							type: 'text',
							content: '韩国宪法法院将在180天内完成弹劾案审判程序。如果宪法法院作出弹劾案不成立的裁决，尹锡悦将立即恢复总统职务；如果宪法法院认可弹劾案成立，尹锡悦将立即被罢免，预计韩国将在明年4月至6月间举行大选。'
						},
						{
							type: 'image',
							content: 'https://zverse-on.oss-cn-shanghai.aliyuncs.com/metahuman/workbench/20241214/193c442df75.jpeg'
						},

					],
				])
				setTitle('韩国国会通过总统弹劾案 尹锡悦职务立即停止')
			}
		}
	}, [props.id])

	return (<Modal
		title={'编辑文章'}
		open={props.id >= 0}
		maskClosable={false}
		keyboard={false}
		width={800}
		onCancel={()=>props.onClose?.()}
		okButtonProps={{loading: state.loading}}
		onOk={handleSave}
	>
		<div className="article-title mt-5">
			<div className="title">
				<span className="text text-base">标题</span>
				<span className="require ml-1 font-bold text-red-500">*</span>
			</div>
			<div className="box mt-1">
				<Input rootClassName={state.msgTitle ? 'border-red-500' : ''} value={title} onChange={e => {
					setTitle(e.target.value)
					setState({msgTitle: e.target.value ? '' : '请输入标题内容'})
				}} placeholder={'请输入文章标题'}/>
			</div>
			<div className="text-red-500">{state.msgTitle}</div>
		</div>
		<div className="aricle-body mt-3">
			<div className="title">
				<span className="text text-base">正文</span>
				<span className="require ml-1 font-bold text-red-500">*</span>
			</div>
			<div className="box mt-1">
				<ArticleGroup
					errorMessage={state.msgGroup} editable groups={groups}
					onChange={list => {
						setGroups(() => list)
						setState({msgGroup: (list.length == 0 || list[0].length == 0 || !list[0][0].content) ? '请输入正文文本内容' : ''});
					}}
				/>
			</div>
		</div>
	</Modal>);
}