import React, { useState } from 'react';
import type { FC } from 'react';
import ProductEditModalWrapper from 'src/pages/productEditModal/productEditModalWrapper';
import { OAReleasePageURL } from 'src/utils/oa';
import { trackContentReviewEvent } from 'src/utils/product';
import type { SubmissionType } from 'src/types';

interface Props {
    className?: string;
    testId?: string;
    title: string;
    productId: number;
    section: string;
    formatHref?: (productId: number, isRevision?: boolean) => string;
    isRevision: boolean;
    submissionType?: SubmissionType;
    onFingerprintRulesUpdated?: (rulesUpdatedNum: number) => void;
}

const trackClick = (section: string, isRevision?: boolean) =>
    trackContentReviewEvent(
        'Click',
        `view/edit in OA - ${section}`,
        null,
        null,
        null,
        isRevision
    );

const CLASS_NAME = 'ProductModal-SectionTitle';
const INTL_CLASSNAME = 'contentReview.sectionTitle';

const SectionTitle: FC<Props> = ({
    className,
    testId,
    title,
    productId,
    section,
    formatHref = OAReleasePageURL,
    isRevision,
    submissionType,
    onFingerprintRulesUpdated,
}) => {
    const pricing = section === 'Scheduling and Pricing';
    const delivery = section === 'View Delivery Restrictions';

    const [showProductEditModal, setShowProductEditModal] = useState(false);

    return (
        <div className={CLASS_NAME} data-testid={testId || className}>
            <div>
                <h2>{title}</h2>
            </div>
            <>
                {pricing && (
                    <div>
                        <a
                            href={formatHref(productId, isRevision)}
                            onClick={() => trackClick(section, isRevision)}
                            target="_blank"
                            rel="noreferrer"
                        >
                            {$t(`${INTL_CLASSNAME}.viewEditPricingInOA`)}
                        </a>
                    </div>
                )}

                {delivery && productId !== null && (
                    <>
                        <div
                            onClick={() => setShowProductEditModal(true)}
                            className={`${CLASS_NAME}-editLink`}
                        >
                            {$t(
                                `${INTL_CLASSNAME}.editDeliveryRestrictionsInOA`
                            )}
                        </div>
                        {showProductEditModal && (
                            <ProductEditModalWrapper
                                onCancel={() => setShowProductEditModal(false)}
                                onSave={fpRulesResult => {
                                    setShowProductEditModal(false);
                                    if (fpRulesResult) {
                                        onFingerprintRulesUpdated?.(
                                            fpRulesResult.numCreated +
                                                fpRulesResult.numDeleted
                                        );
                                    }
                                }}
                                productIdFromReview={productId}
                                submissionType={submissionType}
                            />
                        )}
                    </>
                )}
            </>
        </div>
    );
};

export default SectionTitle;