import type { FC } from 'react';
import React from 'react';
import {
    BsOverlayTrigger,
    BsPopover,
    TruncatedText,
} 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 { ProductListField } from 'src/product/fields/listField';

interface Props {
    field: ProductListField<string>;
    trackHoverEventValue?: string;
}

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

const AnnotatedListField: FC<Props> = ({
    field,
    trackHoverEventValue = null,
}) => {
    const formattedValue = field.get().length
        ? field.get().join(', ')
        : EMPTY_CHAR;
    if (!field.isRevised)
        return (
            <div className={`${CLASS_NAME}-wrapper`}>
                <div className={`${CLASS_NAME}IconBox`} />
                <ProductFieldValidation validations={field.validations} />
                <div className={`${CLASS_NAME}-header`} />
                <span className={`${CLASS_NAME}-value`}>
                    <TruncatedText
                        text={formattedValue}
                        maxWidth={270}
                        numberOfLines={3}
                    />
                </span>
            </div>
        );
    const onMouseOver = () => {
        if (trackHoverEventValue)
            trackContentReviewEvent(
                'Hover',
                trackHoverEventValue,
                null,
                null,
                null,
                field.isRevised
            );
    };
    const formattedPreviousValue = field.currentValue.length
        ? field.currentValue.join(', ')
        : EMPTY_CHAR;
    return (
        <div className="PopoverContainer">
            <ProductFieldValidation validations={field.validations} />
            <BsOverlayTrigger
                placement="bottom"
                trigger={['hover', 'focus']}
                rootClose
                overlay={
                    <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.previousValues'
                                    )}
                                </div>
                                <div
                                    className={`${POPOVER_CLASS_NAME}-info-body`}
                                >
                                    {formattedPreviousValue}
                                </div>
                            </div>
                        </BsPopover.Content>
                    </BsPopover>
                }
            >
                <div
                    className={`${CLASS_NAME} ${CLASS_NAME}-wrapper ${CLASS_NAME}-Field`}
                    onMouseOverCapture={onMouseOver}
                >
                    <div className="Revision-info-glyph">
                        <GlyphIcon name="revision" size={16} />
                    </div>
                    <div className="Revision-info-body">{formattedValue}</div>
                </div>
            </BsOverlayTrigger>
        </div>
    );
};

export default AnnotatedListField;