import React from 'react';
import PropTypes from 'prop-types';
import { graphql, createFragmentContainer } from 'react-relay';
import { ModalBody } from 'dibs-elements/exports/ModalBody';
import { FormattedMessage } from 'react-intl';

import FollowDealerButton from '../FollowDealerButton';
import RightArrow from 'dibs-vg/dist/react/arrow-right';

import style from './successContent.scss';

function RequestShippingSuccessContent(props) {
    const { seller, userId, isMC } = props;

    return (
        <div data-tn="shipping-request-modal-success">
            <ModalBody>
                <p className={style.sqrSuccessMessage}>
                    <FormattedMessage
                        id="dc.requestShippingModal.success_message"
                        defaultMessage="Your request has been sent. You will be notified by email when a custom shipping quote is available for your review."
                    />
                </p>
                {!isMC && (
                    <p className={style.sqrSuccessMessage}>
                        <FormattedMessage
                            id="dc.requestShippingModal.view_request"
                            defaultMessage="You can view your request at any time in"
                        />
                        <a href="/my/conversations/" className={style.sqrSuccessLink}>
                            <FormattedMessage
                                id="dc.requestShippingModal.my_conversations"
                                defaultMessage="My Conversations"
                            />
                            <RightArrow className={style.sqrCtaArrow} />
                        </a>
                    </p>
                )}
            </ModalBody>
            <div className={style.sqrSuccessFooter}>
                <div className={style.sqrSuccessFooterTitle}>
                    <FormattedMessage
                        id="dc.requestShippingModal.success_footer_title"
                        defaultMessage="stay up to date"
                    />
                </div>
                <div className={style.sqrSuccessFooterText}>
                    <FormattedMessage
                        id="dc.requestShippingModal.success_footer_text"
                        defaultMessage="Follow this seller to get weekly updates on new arrivals."
                    />
                </div>
                <FollowDealerButton seller={seller} currentUserId={userId} isMC={isMC} />
            </div>
        </div>
    );
}

RequestShippingSuccessContent.propTypes = {
    seller: PropTypes.object.isRequired,
    userId: PropTypes.string,
    isMC: PropTypes.bool,
};

export default createFragmentContainer(RequestShippingSuccessContent, {
    seller: graphql`
        fragment RequestShippingSuccessContent_seller on Seller {
            ...FollowDealerButton_seller
        }
    `,
});