import type { FC } from 'react';
import React from 'react';
import { Alert } from '@theorchard/suite-components';
// eslint-disable-next-line import/no-extraneous-dependencies
import moment from 'moment';
import { useEscalationNoticeFF } from 'src/utils/features';
import type { ReviewQueueItem } from 'src/data/queries/reviewQueueItem/types';

export interface Props {
    reviewQueueItem: ReviewQueueItem;
}

export const CLASS_NAME = 'ProductNoteSection';
export const INTL_PREFIX = 'contentReview.productNoteSection';

const ProductNoteSection: FC<Props> = ({ reviewQueueItem }) => {
    const escalationNoticeEnabled = useEscalationNoticeFF();

    const queueName = reviewQueueItem?.queueName ?? '';
    const escalationType = reviewQueueItem?.movedToTarget?.escalationType ?? '';
    const firstName = reviewQueueItem?.movedToQueueByIdentity?.firstName ?? '';
    const lastName = reviewQueueItem?.movedToQueueByIdentity?.lastName ?? '';
    const userName = `${firstName} ${lastName}`.trim();
    const note = reviewQueueItem?.moveNote;

    const noteHeader =
        escalationNoticeEnabled && queueName == 'escalation'
            ? $t(`${INTL_PREFIX}.noteEscalationHeader`, {
                  escalationType: escalationType,
                  user: userName,
                  date: moment(reviewQueueItem?.movedAtDatetime).format(
                      'D MMM YYYY'
                  ),
              })
            : $t(`${INTL_PREFIX}.noteHeader`, {
                  user: userName,
                  date: moment(reviewQueueItem?.movedAtDatetime).format(
                      'MM/DD/YYYY'
                  ),
              });

    return (
        <Alert
            testId={CLASS_NAME}
            className={CLASS_NAME}
            variant="information"
            text={
                <div className={`${CLASS_NAME}-text`}>
                    <div data-testid="noteSectionTitle" className="title">
                        {noteHeader}
                    </div>
                    <div data-testid="noteSectionBody" className="body">
                        {note}
                    </div>
                </div>
            }
        />
    );
};

export default ProductNoteSection;