import React from "react";
import clsx from "clsx";
import {Divider, Popconfirm} from "antd";

import {IconAdd, IconDelete, IconWarningCircle} from "@/components/icons";
import ImageList from "@/components/article/list.tsx";

import { BlockText} from "./item.tsx";
import styles from './article.module.scss'
import {useTranslation} from "react-i18next";

type Props = {
	children?: React.ReactNode;
	index: number;
	className?: string;
	blocks: BlockContent[];
	editable?: boolean;
	onChange?: (blocks: BlockContent[]) => void;
	onRemove?: () => void;
	onAdd?: (index?:number) => void;
	errorMessage?: string;
}

function rebuildBlockArray(blocks: BlockContent[]) {
	const textBlock: BlockContent = {
		type: 'text',
		content: ''
	}
	const _blocks: BlockContent[] = [textBlock];
	const textArray: string[] = []
	blocks.forEach(it => {
		if (it.type == 'text') {
			textArray.push(it.content)
		} else {
			_blocks.push(it)
		}
	})
	textBlock.content = textArray.join('\n')
	return _blocks
}


export default function ArticleBlock(
	{
		className,
		blocks: defaultBlocks,
		editable,
		onRemove,
		onAdd,
		onChange,
		index,
	}: Props) {
	const {t} = useTranslation()
	const blocks = rebuildBlockArray(defaultBlocks)

	const handleBlockChange = (index: number, block: BlockContent) => {
		const _blocks = [...blocks]
		_blocks[index] = block
		onChange?.(_blocks)
	}

	return <div className={`${styles.blockContainer} group`}>
		{editable && index == 1 && <div  className={'divider-container before'}><Divider>
            <span onClick={()=>onAdd?.(1)} className="article-action-add" title={t('news.edit_add_group')}><IconAdd style={{fontSize: 24}}/></span>
        </Divider></div> }
		<div className={styles.blockInner}>
			<div className={clsx(className || '', styles.block, index == 0 ? styles.blockFist : '', ' hover:bg-blue-10')}>
				<div className={styles.blockBody}>
					<div>
						<div className={clsx(index == 0 ? '' : styles.blockItem, 'flex')}>
							<BlockText
								onChange={(block) => handleBlockChange(0, block)}
								data={blocks[0]}
								isFirstBlock={index == 0}
								editable={editable}/>
						</div>
					</div>
					<ImageList blocks={blocks} editable={editable} onChange={onChange}/>
				</div>
			</div>
			{editable && <div className="ml-2 flex items-center">
				{
					index > 0 ? <Popconfirm
						rootClassName={'popconfirm-main'}
						placement={'left'}
						arrow={false}
						icon={<IconWarningCircle/>}
						title={<div style={{minWidth: 150}}><span>{t('news.edit_delete_group_confirm')}</span></div>}
						onConfirm={onRemove}
						okText={t('delete')}
						cancelText={t('cancel')}
					>
                    <span className="article-action-icon hidden group-hover:block ml-1" title={t('news.edit_delete_group')}>
	                    <IconDelete style={{fontSize: 24}}/>
					</span>
					</Popconfirm> : <span></span>
				}
            </div>}
		</div>

		{editable && <div  className={'divider-container after'}><Divider>
            <span onClick={()=>onAdd?.(index + 1)} className="article-action-add" title="新增分组"><IconAdd style={{fontSize: 24}}/></span>
        </Divider></div> }
	</div>
}