import type { FC } from 'react';
import React from 'react';
import { useRef } from 'react';
import {
    FullscreenModal,
    Button,
    GlyphButton,
    ErrorMessage,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { ROUTE_REVIEW_QUEUE } from 'src/constants';
import ProductModalHeader from 'src/pages/productModal/components/productModalHeader';
import ProductModalHeaderV2 from 'src/pages/productModal/components/productModalHeaderV2';
import {
    useDisplayProductModalPageHeaderFF,
    useLockedProductError,
} from 'src/utils/features';
import type { FlattenedApolloError } from '@theorchard/suite-frontend';
import type { Product } from 'src/data/queries/product/types';
import type { TargetGroup } from 'src/data/queries/reviewQueueItem/types';
import type { MergedProduct } from 'src/product/product';
import type { SubmissionType, Validation } from 'src/types';

export const CLASS_NAME = 'FullscreenModalReview';
const INTL_PREFIX = 'contentReview.fullscreenModalReview';

export interface Props {
    product: Product | null;
    mergedProduct: MergedProduct | null;
    isOpen: boolean;
    isProductAndQueueItemLoaded: boolean;
    isLoadingItemsOrProduct: boolean;
    productQueryError: FlattenedApolloError | undefined;
    submissionType: SubmissionType | undefined;
    onClickSkip: () => void;
    onClose: () => void;
    renderModalBody: () => React.ReactNode | null;
    queueName: string | undefined;
    isApprovalNoteRequired: boolean;
    isApprovalBlocked: boolean;
    isRejectionBlocked: boolean;
    isReviewHistoryDisabled: boolean;
    isSubmittingReview: boolean;
    productReviewQueueId: number;
    onReviewCompleted: (status: string, eventType?: string) => void;
    onQueueMove: (
        destinationQueueName: string,
        movedToTargetId?: number,
        moveNote?: string
    ) => void;
    productTargetGroup: TargetGroup | null;
    submittedByUserLanguage: string | null;
    currentReviewQueueItemId: number;
    lockedByUserName: string | undefined;
    wasExistingLockDetected: boolean;
    validations?: Validation[];
}

const FullscreenModalReview: FC<Props> = ({
    product,
    mergedProduct,
    isOpen,
    isProductAndQueueItemLoaded,
    isLoadingItemsOrProduct,
    productQueryError,
    submissionType,
    onClose,
    onClickSkip,
    renderModalBody,
    queueName,
    isApprovalNoteRequired,
    isApprovalBlocked,
    isRejectionBlocked,
    isReviewHistoryDisabled,
    isSubmittingReview,
    productReviewQueueId,
    onReviewCompleted,
    onQueueMove,
    productTargetGroup,
    submittedByUserLanguage,
    currentReviewQueueItemId,
    lockedByUserName,
    wasExistingLockDetected,
    validations,
}) => {
    const sidebarRef = useRef(null);

    const displayProductModalPageHeader = useDisplayProductModalPageHeaderFF();
    const lockedProductError = useLockedProductError();

    const headerProps =
        isProductAndQueueItemLoaded && product && mergedProduct
            ? {
                  product,
                  mergedProduct,
                  submissionType,
                  queueName,
                  isApprovalNoteRequired,
                  isApprovalBlocked,
                  isRejectionBlocked,
                  isReviewHistoryDisabled,
                  isSubmittingReview,
                  productReviewQueueId,
                  onReviewCompleted,
                  onQueueMove,
                  productTargetGroup,
                  submittedByUserLanguage,
                  sidebarRef: sidebarRef,
                  lockedProductError,
                  wasExistingLockDetected,
              }
            : null;

    return (
        <FullscreenModal
            className={`contentReview ${CLASS_NAME}`}
            isOpen={isOpen}
        >
            <FullscreenModal.Header>
                <Button
                    onClick={onClose}
                    variant="tertiary"
                    data-testid="end-session-button"
                >
                    End Review
                </Button>
                <GlyphButton
                    onClick={onClickSkip}
                    name="arrowRight"
                    variant="tertiary"
                    data-testid="skip-button"
                    disabled={Boolean(
                        isLoadingItemsOrProduct && !productQueryError
                    )}
                />
            </FullscreenModal.Header>
            {!displayProductModalPageHeader && headerProps && (
                <ProductModalHeaderV2
                    key={currentReviewQueueItemId}
                    {...headerProps}
                    validations={validations}
                />
            )}

            <FullscreenModal.Body sidebarRef={sidebarRef}>
                {displayProductModalPageHeader && headerProps && (
                    <ProductModalHeader
                        key={currentReviewQueueItemId}
                        {...headerProps}
                        validations={validations}
                    />
                )}

                {/* delete this div after FF is removed */}
                <div id="scrollTo">
                    {lockedProductError &&
                    wasExistingLockDetected &&
                    lockedByUserName &&
                    isProductAndQueueItemLoaded ? (
                        <Page className="ProductModal lockedState">
                            <ErrorMessage
                                className="lockedStateError"
                                variant="full-page"
                                testId="review-queue-item-locked-state"
                                title={$t(`${INTL_PREFIX}.errorMessage.title`, {
                                    lockedByUserName,
                                })}
                                description={$t(
                                    `${INTL_PREFIX}.errorMessage.description`
                                )}
                                button={{
                                    text: 'Return to Queue',
                                    href: ROUTE_REVIEW_QUEUE,
                                }}
                            />
                        </Page>
                    ) : (
                        <Page className="ProductModal">
                            {renderModalBody()}
                        </Page>
                    )}
                </div>
            </FullscreenModal.Body>
        </FullscreenModal>
    );
};

export default FullscreenModalReview;