import { CommentOutlined } from '@ant-design/icons';
import { Button, Popover } from 'antd';
import { useState } from 'react';
import { CommentsList } from './CommentsList';
import { useDocumentComments } from './useDocumentComments';

/** Кнопка с числом комментариев в строке панели документов [39-01]; по клику — список только для чтения. */
export function CommentsPopover({ documentId, fileName, count }: { documentId: string; fileName: string; count: number }) {
	const [open, setOpen] = useState(false);
	const { state, load, reset } = useDocumentComments(documentId);

	const onOpenChange = (next: boolean) => {
		setOpen(next);
		if (next) load();
		else reset();
	};

	const content = (
		<div style={{ width: 360, maxWidth: 420 }}>
			<div style={{ maxHeight: 320, overflowY: 'auto', marginBottom: 8 }}>
				<CommentsList state={state} emptyText='Комментарий отсутствует' />
			</div>
			<div style={{ textAlign: 'right' }}>
				<Button size='small' onClick={() => onOpenChange(false)}>
					Закрыть
				</Button>
			</div>
		</div>
	);

	return (
		// Поповер рисуется в портале, но события React всплывают по дереву компонентов до onClick строки таблицы и открывали
		// бы документ. Обёртка вокруг всего Popover ловит клики по кнопке, заголовку, отступам и содержимому разом.
		<span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
			<Popover trigger='click' title={`Комментарии к документу ${fileName}`} content={content} open={open} onOpenChange={onOpenChange}>
				<Button icon={<CommentOutlined />} aria-label={`Комментарии: ${count}`}>
					{count > 0 ? count : null}
				</Button>
			</Popover>
		</span>
	);
}