import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { graphql, createFragmentContainer } from 'react-relay';
import { injectIntl, intlShape, defineMessages, FormattedMessage } from 'react-intl';
import get from 'lodash.get';

import { Button } from 'dibs-elements/exports/Button';
import FavoriteSellerMutation from '../mutations/drsmFavoriteSeller';
import tracking from '../tracking';

import css from '../styles.scss';

const messages = defineMessages({
    followSellerError: {
        id: 'dc.requestShippingModal.follow_seller_error',
        defaultMessage:
            'An error occurred when attempting to follow this seller. Please try again later.',
    },
    unfollowSellerError: {
        id: 'dc.requestShippingModal.unfollow_seller_error',
        defaultMessage:
            'An error occurred when attempting to no longer follow this seller. Please try again later.',
    },
});

class FollowDealerButton extends Component {
    constructor(props) {
        super(props);
    }

    commitFavoriteSellerMutation(options) {
        const { relay, currentUserId, seller } = this.props;
        const favoriteId = get(seller, 'favoritesByUser[0].serviceId');

        FavoriteSellerMutation.commit(relay.environment, {
            userId: currentUserId,
            sellerPk: seller.serviceId,
            favoriteId,
            ...options,
        });
    }

    followSeller() {
        const errorMessage = this.props.intl.formatMessage(messages.followSellerError);

        this.commitFavoriteSellerMutation({
            onFailure: () => this.props.setErrorMessage({ errorMessage }),
            onSuccess: () => tracking.trackDealerFollowed({ isMC: this.props.isMC }),
        });
    }

    unfollowSeller() {
        const errorMessage = this.props.intl.formatMessage(messages.unfollowSellerError);

        this.commitFavoriteSellerMutation({
            onFailure: () => this.props.setErrorMessage({ errorMessage }),
            onSuccess: () => tracking.trackDealerUnFollowed({ isMC: this.props.isMC }),
        });
    }

    render() {
        const { seller, isMC, errorMessage } = this.props;
        const favoriteId = get(seller, 'favoritesByUser[0].serviceId');

        const followSellerCta = (
            <FormattedMessage
                id="dc.requestShippingModal.follow_seller_cta"
                defaultMessage="follow seller"
            />
        );

        const unfollowSellerCta = (
            <FormattedMessage
                id="dc.requestShippingModal.unfollow_seller_cta"
                defaultMessage="seller followed"
            />
        );

        const ctaMessage = favoriteId ? unfollowSellerCta : followSellerCta;

        return (
            <div>
                <Button
                    className={css.followDealerCta}
                    onClick={(favoriteId ? this.unfollowSeller : this.followSeller).bind(this)}
                    dataTn={isMC ? 'mc-follow-dealer-cta' : ''}
                >
                    {ctaMessage}
                </Button>
                {errorMessage ? <div className={css.sqrError}>{errorMessage}</div> : null}
            </div>
        );
    }
}

FollowDealerButton.propTypes = {
    seller: PropTypes.object.isRequired,
    setErrorMessage: PropTypes.func.isRequired,
    currentUserId: PropTypes.string.isRequired,
    errorMessage: PropTypes.string,
    isMC: PropTypes.bool,
    relay: PropTypes.object,
    intl: intlShape,
};

export default createFragmentContainer(injectIntl(FollowDealerButton), {
    seller: graphql`
        fragment FollowDealerButton_seller on Seller {
            serviceId
            favoritesByUser(userIds: $userId) @include(if: $hasUserId) {
                serviceId
            }
        }
    `,
});