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 } from 'src/constants';
import { trackContentReviewEvent } from 'src/utils/product';
import ProductFieldValidation from '../productFieldValidation/productFieldValidation';
import type { ProductField } from 'src/product/fields/field';

export interface Props {
    field: ProductField<number | string>;
    trackHoverEventValue?: string;
}

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

const AnnotatedField: FC<Props> = ({ field, trackHoverEventValue = null }) => {
    if (!field.isRevised)
        return (
            <div className={`${CLASS_NAME}-wrapper`}>
                <ProductFieldValidation validations={field.validations} />
                <span className={`${CLASS_NAME}-value`}>
                    {field.get() || EMPTY_CHAR}
                </span>
            </div>
        );

    const onMouseOver = () => {
        if (trackHoverEventValue)
            trackContentReviewEvent(
                'Hover',
                trackHoverEventValue,
                null,
                null,
                null,
                field.isRevised
            );
    };
    const revisionPopover = (
        <BsPopover
            id={POPOVER_ID}
            className={`contentReview ${POPOVER_CLASS_NAME}`}
        >
            <BsPopover.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.previousValue')}
                    </div>
                    <div className={`${POPOVER_CLASS_NAME}-info-body`}>
                        {field.getPrevious() || EMPTY_CHAR}
                    </div>
                </div>
            </BsPopover.Content>
        </BsPopover>
    );

    return (
        <div className="PopoverContainer">
            <ProductFieldValidation validations={field.validations} />
            <BsOverlayTrigger
                placement="bottom"
                trigger={['hover', 'focus']}
                rootClose
                overlay={revisionPopover}
            >
                <div
                    className={`${CLASS_NAME} ${CLASS_NAME}-wrapper ${CLASS_NAME}-Field`}
                    onMouseOverCapture={onMouseOver}
                >
                    <div className="Revision-info-glyph">
                        <GlyphIcon
                            testId="RevisionGlyph"
                            name="revision"
                            size={16}
                        />
                    </div>
                    <div className="Revision-info-body">
                        {field.get() || EMPTY_CHAR}
                    </div>
                </div>
            </BsOverlayTrigger>
        </div>
    );
};

export default AnnotatedField;