import React from 'react';
import {
    Modal as FRCModal,
    CloseIcon,
} from '@orchard/frontend-react-components';
import { useAppConfig } from '@theorchard/suite-frontend';
import { formatMessage, getGoAppName } from 'src/utils';

// FRC Modal ships a .d.ts that marks all props as required; widen to the props this caller passes.
const Modal = FRCModal as unknown as React.ComponentType<{
    className?: string;
    children?: React.ReactNode;
    isOpen?: boolean;
    onRequestClose?: () => void;
}>;

const CLASS_NAME = 'Promo-modal';

interface PromoModalProps {
    shouldOpenModal: boolean;
    handleModalClose: () => void;
}

const PromoModal: React.FC<PromoModalProps> = ({
    shouldOpenModal,
    handleModalClose,
}) => {
    const config = useAppConfig();

    return (
        <div>
            <Modal
                className={`${CLASS_NAME} ${config.brand}`}
                onRequestClose={handleModalClose}
                isOpen={shouldOpenModal}
            >
                <div className={`${CLASS_NAME}-content`}>
                    <CloseIcon
                        className={`${CLASS_NAME}-close-icon`}
                        onClick={handleModalClose}
                    />
                    <img
                        className={`${CLASS_NAME}-content-logo`}
                        alt="Go Logo"
                        src={`https://cdn.theorchard.io/assets/workstation/go-popup/${config.brand}/go-icon.png`}
                    />
                    <div className={`${CLASS_NAME}-content-text`}>
                        {formatMessage('promoModal.orchardGO.description', {
                            goAppName: getGoAppName(config.brand),
                        })}
                    </div>
                    <div className={`${CLASS_NAME}-content-text`}>
                        {formatMessage('promoModal.orchardGO.downloadMessage', {
                            goAppName: getGoAppName(config.brand),
                        })}
                    </div>
                    <img
                        className={`${CLASS_NAME}-content-barcodes`}
                        alt="GO Barcodes"
                        src={`https://cdn.theorchard.io/assets/workstation/go-popup/${config.brand}/stores-qrs.png`}
                    />
                </div>
            </Modal>
        </div>
    );
};

export default PromoModal;