import React, { forwardRef, useRef } from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import useClickOutside from '../../tools/hooks/useClickOutside';
import Button from '../button/Button';
import Icon from '../icon/Icon';
import './styles/ReplaceEdition.scss';

const n = createNamespace('ReplaceEdition');

const ReplaceEdition = forwardRef((
    { editionName,
        onSelectEdition,
        onViewCart,
        onExit,
        i18n },
    forwardedRefs
) => {
    const {
        titleRef,
        mainRef
    } = forwardedRefs || {};

    const containerRef = useRef(null);
    useClickOutside(containerRef, onExit);

    return (
        <div
            {...n('container').withTestId().withE2EId().props}
            ref={containerRef}
        >
            <div {...n('cardHeader').props}>
                <h3 {...n('title').withTestId().props}>
                    {editionName}
                </h3>
                <Icon type="close" {...n('close').withTestId().props} onClick={onExit} />
            </div>
            <div />
            <div {...n('main').props} ref={mainRef}>
                <div {...n('header').props}>
                    <h3 {...n('title').withTestId().props} ref={titleRef}>
                        {i18n.differentEditionAlreadyInCart}
                    </h3>
                </div>
                <div {...n('actionsWrapper').props}>
                    <div {...n('buttonWrapper').props}>
                        <Button
                            type="emphasisAlt"
                            onClick={onSelectEdition}
                            wide
                            data-testid="replaceEdition:selectEdition"
                        >
                            {i18n.selectEdition}
                        </Button>
                        <div {...n('hint').props}>
                            {i18n.switchEdition}
                        </div>
                    </div>
                    <div {...n('buttonWrapper').props}>
                        <Button
                            type="primary"
                            onClick={onViewCart}
                            wide
                            data-testid="replaceEdition:viewCart"
                        >
                            {i18n.viewCart}
                        </Button>
                        <div {...n('hint').props}>
                            {i18n.completePurchase}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
});

ReplaceEdition.propTypes = {
    editionName: PropTypes.string,
    onSelectEdition: PropTypes.func,
    onViewCart: PropTypes.func,
    onExit: PropTypes.func,
    i18n: PropTypes.shape({
        differentEditionAlreadyInCart: PropTypes.string,
        selectEdition: PropTypes.string,
        switchEdition: PropTypes.string,
        viewCart: PropTypes.string,
        completePurchase: PropTypes.string
    })
};

ReplaceEdition.defaultProps = {
    editionName: 'Starter Plan',
    onSelectEdition: () => {},
    onViewCart: () => {},
    onExit: () => {},
    i18n: {
        differentEditionAlreadyInCart: 'A different edition of this product is already in your cart.',
        selectEdition: 'Select this edition',
        switchEdition: 'Switch your selection to this edition instead.',
        viewCart: 'View Cart',
        completePurchase: 'Complete your purchase with the currently selected edition.'
    }
};

export default ReplaceEdition;
