import {Input, message} from "antd"
import ArticleBlock from "@/components/article/block.tsx";

import styles from './article.module.scss'
import {showToast} from "@/components/message.ts";
import React from "react";
import {useTranslation} from "react-i18next";

type Props = {
	groups: BlockContent[][];
	editable?: boolean;
	onChange?: (groups: BlockContent[][]) => void;
	errorMessage?: string;
}


export default function ArticleGroup({groups, editable, onChange, errorMessage}: Props) {
	const {t,i18n} = useTranslation()
	// const groups = rebuildGroups(_groups)
	/**
	 * 添加一个组
	 * @param insertIndex 插入的位置，-1表示插入到末尾
	 */
	const handleAddGroup = (insertIndex: number = -1) => {
		if (insertIndex !== -1 && insertIndex !== 1) {
			const triggerGroup = insertIndex == -1 || insertIndex >= groups.length ? groups[groups.length - 1] : groups[insertIndex - 1];
			// 判断
			if (triggerGroup.length == 0 || triggerGroup.some(s => !s.content)) {
				showToast(t('news.edit_notice_enter_text'))
				return;
			}
		}

		const newGroup: BlockContent[] = [{type: 'text', content: ''}]
		const _groups = [...groups];
		if (insertIndex == -1 || insertIndex >= groups.length) { // -1或者越界表示新增
			_groups.push(newGroup)
		} else {
			_groups.splice(insertIndex, 0, newGroup)
		}
		onChange?.(_groups)
	}

	const handleDigitalPersonContentChange = (content:string) => {
		groups[0] = [{type: 'text', content}]
		onChange?.([...groups])
	}

	return <div className={styles.group}>
		<div className={'panel digital-person'}>
			<div className="area-title">
				<span className="">{t('news.edit_digital_text')}</span>
				{i18n.language == 'zh-CN' && <span className="text-gray-400">（出现数字人形象）</span>}
			</div>
			<div className="panel-body p-3">
				{/* value={groups || groups[0][0].content}*/}
				<div className="h-[486px] pt-2 rounded-xl overflow-hidden bg-gray-50">
					{editable ? <div className="relative">
						<Input.TextArea
							placeholder={t('news.edit_notice_enter_text')}
							value={groups && groups.length > 0 ? groups[0][0].content : ''}
							autoSize={{minRows: 20, maxRows: 21}}
							variant={"borderless"}
							onChange={e => {
								handleDigitalPersonContentChange(e.target.value)
							}}
						/>
					</div> : <p className="p-2">{groups && groups.length > 0 ? groups[0][0].content : ''}</p>}
				</div>
			</div>
		</div>
		<div className={"panel groups-list flex-1"}>
			<div className={"area-title"}>
				<span className="">{t('news.edit_other_text')}</span>
				{i18n.language == 'zh-CN' && <span className="text-gray-400">（文、图、视频，不出现数字人形象）</span>}
			</div>

			<div className="panel-body py-3">
				<div className="max-h-[485px] overflow-auto py-4">
					{groups.map((g, index) => (
						index == 0 ? null : <ArticleBlock
							editable={editable}
							key={index}
							blocks={g}
							onChange={(blocks) => {
								groups[index] = blocks
								onChange?.([...groups])
							}}
							errorMessage={errorMessage}
							index={index}
							onAdd={(_index) => {
								handleAddGroup?.(_index ? _index :index + 1)
							}}
							onRemove={async () => {
								if (groups.length == 1) {
									message.warning(t('news.edit_notice_keep_1'))
									return;
								}
								onChange?.(groups.filter((_, idx) => index !== idx))
							}}
						/>
					))}
				</div>
			</div>
		</div>
		{groups.length == 0 && editable &&
            <ArticleBlock editable onChange={blocks => onChange?.([blocks])} index={0}
                          blocks={[{type: 'text', content: ''}]}/>}
	</div>
}