import React from 'react';
import type { FC } from 'react';
import { useParams } from 'react-router-dom';
import { DeliveryRestrictionsProvider } from 'src/components/deliveryRestrictionsContext/useDeliveryRestrictionsContext';
import ProductEditModal from 'src/pages/productEditModal/productEditModal';
import type { FingerprintRulesResult, SubmissionType } from 'src/types';

interface ParamTypes {
    productId: string;
}

interface ProductEditModalWrapperProps {
    productIdFromReview?: number;
    onSave?: (fpRulesResult?: FingerprintRulesResult) => void;
    onCancel?: () => void;
    submissionType?: SubmissionType;
}

const ProductEditModalWrapper: FC<ProductEditModalWrapperProps> = ({
    productIdFromReview,
    onCancel,
    onSave,
    submissionType,
}) => {
    const params = useParams<ParamTypes>();
    const productId = Number(productIdFromReview ?? params.productId);

    return (
        <DeliveryRestrictionsProvider productId={productId}>
            <ProductEditModal
                productId={productId}
                onSave={onSave}
                onCancel={onCancel}
                submissionType={submissionType}
            />
        </DeliveryRestrictionsProvider>
    );
};

export default ProductEditModalWrapper;