import type { FC } from 'react';
import React from 'react';
import { BsPopover } from '@theorchard/suite-components';
import OverlayTriggerPopover from 'src/components/overlayTriggerPopover';
import { formatValidationMessage } from 'src/pages/productModal/utils/productValidation';
import ProductValidationGroup from '../productValidationGroup';
import type { MergedProduct } from 'src/product/product';
import type { Validation } from 'src/types';

export const CLASS_NAME = 'BlocklistValidationGroup';
export const INTL_PREFIX = 'contentReview.productValidationBlock';

export interface Props {
    validationGroup: Validation[];
    product: MergedProduct;
}
const BlocklistValidationGroup: FC<Props> = ({ validationGroup, product }) => {
    const renderPopoverContent = () => (
        <BsPopover.Content className={`${CLASS_NAME}-Popover-Content`}>
            <ul>
                {validationGroup.map(v => (
                    <li key={v.target}>{formatValidationMessage(v)}</li>
                ))}
            </ul>
        </BsPopover.Content>
    );

    return (
        <OverlayTriggerPopover
            id={CLASS_NAME}
            PopoverContent={() => renderPopoverContent()}
        >
            <div data-testid={CLASS_NAME}>
                <ProductValidationGroup
                    validationGroup={validationGroup}
                    product={product}
                />
            </div>
        </OverlayTriggerPopover>
    );
};

export default BlocklistValidationGroup;