import type { FC } from 'react';
import React from 'react';
import { BsOverlayTrigger, BsPopover } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { EMPTY_CHAR, IMAGE_PLACEHOLDER_URL } from 'src/constants';
import ProductArtworkInfoPopover from 'src/pages/productModal/components/productBasicsBlock/productArtworkInfoPopover/productArtworkInfoPopover';
import { trackContentReviewEvent } from 'src/utils/product';
import ArtworkValidationPill from '../artworkValidation/artworkValidationPill';
import type { ProductField } from 'src/product/fields/field';
import type { MergedProduct } from 'src/product/product';

interface Props {
    field: ProductField<string>;
    product: MergedProduct;
}

export const CLASS_NAME = 'Revision';
const POPOVER_ID = 'RevisionPopover';
const POPOVER_CLASS_NAME = `${CLASS_NAME}Popover`;

const AnnotatedArtworkBlock: FC<Props> = ({ field, product }) => {
    const renderImgTag = (url?: string | null) => (
        <img
            src={url || IMAGE_PLACEHOLDER_URL}
            alt={$t('common.fieldNames.coverart')}
            style={{ width: '100%' }}
        />
    );

    const formattedPreviousValue =
        renderImgTag(field.getPrevious()?.toString()) || EMPTY_CHAR;

    const onMouseOver = () => {
        trackContentReviewEvent(
            'Hover',
            'Product Artwork',
            null,
            null,
            null,
            field.isRevised
        );
    };

    const renderRevisionPopover = () => (
        <BsOverlayTrigger
            placement="auto"
            trigger={['hover', 'focus']}
            rootClose
            overlay={
                <BsPopover
                    id={POPOVER_ID}
                    className={`contentReview ${POPOVER_CLASS_NAME}`}
                >
                    <BsPopover.Content
                        data-testid={`${POPOVER_CLASS_NAME}-content`}
                        className={`${POPOVER_CLASS_NAME}-content`}
                    >
                        <div className={`${POPOVER_CLASS_NAME}-info`}>
                            <div className={`${POPOVER_CLASS_NAME}-info-title`}>
                                <GlyphIcon name="revision" size={16} />
                                {formatMessage(
                                    'contentReview.revision.previousArtwork'
                                )}
                            </div>
                            <div className={`${POPOVER_CLASS_NAME}-info-body`}>
                                {formattedPreviousValue}
                            </div>
                        </div>
                    </BsPopover.Content>
                </BsPopover>
            }
        >
            <div
                className={`${POPOVER_CLASS_NAME}-trigger`}
                data-testid={`${POPOVER_ID}-trigger`}
                onMouseOverCapture={onMouseOver}
            >
                {field.isRevised && <GlyphIcon name="revision" size={16} />}
            </div>
        </BsOverlayTrigger>
    );

    // To-do: Include Classical version in info popover
    const header = (
        <div className={`${CLASS_NAME}-header-wrapper`}>
            <div className={`${CLASS_NAME}-header`}>
                <ArtworkValidationPill product={product} />

                <span className={`${CLASS_NAME}-header-title`}>
                    {$t('common.fieldNames.coverart')}
                </span>

                <ProductArtworkInfoPopover product={product} />
            </div>
            {renderRevisionPopover()}
        </div>
    );

    if (!field.isRevised)
        return (
            <div className={`${CLASS_NAME}-wrapper`}>
                <div className={`${CLASS_NAME}-header`}>{header}</div>
                <span className={`${CLASS_NAME}-value`}>
                    {renderImgTag(field.get()?.toString())}
                </span>
            </div>
        );

    return (
        <div
            className={`${CLASS_NAME} ${CLASS_NAME}-wrapper ${CLASS_NAME}-Block`}
        >
            {header}
            <div className={`${CLASS_NAME}-info-body`}>
                {renderImgTag(field.get()?.toString())}
            </div>
        </div>
    );
};

export default AnnotatedArtworkBlock;