import React from 'react';
import {
    Button,
    Help,
    InfoGlyph
} from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { withRouter, RouteComponentProps } from 'react-router';
import Segment from 'src/utils/segment';
import useHasAccessToPayments from 'src/utils/use-has-access-to-payments';
import {
    SEGMENT_CATEGORIES,
    SEGMENT_EVENTS,
} from '../../constants';
import { getPaymentsUrl } from '../../urls/collaborator';
import messages from './i18n';

const CLASS_NAME = 'SearchPagePaymentsButton';

type Props = RouteComponentProps & {
    onShowActivatePaymentsModal: Function,
    paymentIsNotActivated: boolean
};

export const PaymentsButton: React.FC<Props> = (
    {
        onShowActivatePaymentsModal,
        paymentIsNotActivated,
        history
    }
) => {
    const hasAccessToPayments = useHasAccessToPayments();

    const handleGeneratePayment = () => {
        Segment.trackEvent(SEGMENT_EVENTS.GENERATE_PAYMENT_CLICK, SEGMENT_CATEGORIES.HOMEPAGE);
        history.push(getPaymentsUrl());
    };

    const handleActivatePayment = () => {
        Segment.trackEvent(SEGMENT_EVENTS.ACTIVATE_PAYMENT_CLICK, SEGMENT_CATEGORIES.HOMEPAGE);
        onShowActivatePaymentsModal();
    };

    const renderContent = () => {
        if (!hasAccessToPayments)
            return (
                <Help
                    id="disabled-payments-tooltip"
                    message={ (
                        <div>
                            <div className={ `${CLASS_NAME}-disabled-payments-header` }>
                                <InfoGlyph />
                                { formatMessage(messages.notAccessible) }
                            </div>
                            { formatMessage(messages.activatePaymentsAdminRequest) }
                        </div>
                    ) }
                >
                    <div>
                        <Button
                            data-testid="activate-payment-button"
                            className={ `${CLASS_NAME}-activate-payment-button` }
                            type="button"
                            variant="link"
                            disabled={ true }
                        >
                            { formatMessage(messages.activatePayments) }
                        </Button>
                    </div>
                </Help>
            );

        if (paymentIsNotActivated)
            return (
                <Button
                    data-testid="activate-payment-button"
                    className={ `${CLASS_NAME}-activate-payment-button` }
                    type="button"
                    variant="link"
                    onClick={ handleActivatePayment }
                >
                    { formatMessage(messages.activatePayments) }
                </Button>
            );

        return (
            <Button
                data-testid="generate-payment-button"
                onClick={ handleGeneratePayment }
                className={ `${CLASS_NAME}-generate-payment-button` }
            >
                { formatMessage(messages.generatePayment) }
            </Button>
        );
    };

    return <div className={ CLASS_NAME }>{ renderContent() }</div>;
};

export default withRouter(PaymentsButton);