import { sendTrackingData } from '@rh-support/api';
import isEmpty from 'lodash/isEmpty';
import React, { useContext, useEffect, useRef } from 'react';
import { RouteComponentProps } from 'react-router';
import { AppMetadataDispatchContext, AppMetadataStateContext } from '../../context/AppMetadataContext';
import { CreateCaseDispatchContext, CreateCaseStateContext } from '../../context/CreateCaseContext';
import { RouteContext } from '../../context/RouteContext';
import { setRef, setTrackingProductFlag } from '../../reducers/AppMetadataReducer';
import { submitCase } from '../../reducers/CreateCaseReducer';
import { AppRouteSections, IRouteUrlParams } from '../../reducers/RouteReducer';
import RouteUtils from '../../utils/routeUtils';
import FeedbcakForm from '../FeedbackForm/FeedbackForm';

interface IProps {
    routeProps: RouteComponentProps<IRouteUrlParams>;
}
const defaultProps: Partial<IProps> = {};
export default function WizardNavigation(props: IProps) {
    const createCaseDispatch = useContext(CreateCaseDispatchContext);
    const { routeState: {appRouteConfugurations , activeSection, isSectionValid, appRouteSectionsSequence} } = useContext(RouteContext);
    const { createCaseState } = useContext(CreateCaseStateContext);
    const { appMetadataState: {guid, loggedInUserJwtToken, loggedInUsersAccount, trackingProductFlag} } = useContext(AppMetadataStateContext);
    const dispatchToAppMetadataReducer = useContext(AppMetadataDispatchContext);

    // defining next button ref
    const nextButtonRef: React.MutableRefObject<HTMLButtonElement> = useRef(null);

    useEffect(() => {
        // setting ref in the reducer
        setRef(dispatchToAppMetadataReducer, nextButtonRef);
    }, [dispatchToAppMetadataReducer, nextButtonRef]);

    // if guid is ready but product and version are not
    // sent to tracking api, here we send them
    useEffect(() => {
        if (!trackingProductFlag && !isEmpty(createCaseState.product)) {
            sendTrackingData('product_selected', [
                createCaseState.product,
                createCaseState.version
            ], guid.data);
        }
        setTrackingProductFlag(dispatchToAppMetadataReducer);
    }, [guid.isFetching]);

    const onNext = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (appRouteConfugurations[activeSection].nextSection === AppRouteSections.SUBMIT_CASE) {
            submitCase(
                createCaseDispatch,
                {
                    ...createCaseState,
                    accountNumber: loggedInUserJwtToken.account_number,
                    contactSsoUsername: loggedInUserJwtToken.username
                },
                loggedInUsersAccount.data
            );

            sendTrackingData('opened_case', [
                createCaseState.product,
                createCaseState.version,
                createCaseState.issue,
                createCaseState.description
            ], guid.data);
        }
        RouteUtils.navigateToSection(props.routeProps, appRouteConfugurations[activeSection].nextSection, appRouteSectionsSequence);

        if (appRouteConfugurations[activeSection].nextSection === AppRouteSections.SUGGESTIONS) {
            if (!guid.isFetching) {
                setTrackingProductFlag(dispatchToAppMetadataReducer);
                sendTrackingData('product_selected', [
                    createCaseState.product,
                    createCaseState.version
                ], guid.data);
            }
        }

        if (appRouteConfugurations[activeSection].nextSection === AppRouteSections.RESULTS) {
            sendTrackingData('problem_statement', [
                createCaseState.summary
            ], guid.data);
            !isEmpty(createCaseState.issue) && sendTrackingData('issue_detail', [
                createCaseState.issue
            ], guid.data);
        }
    };
    const onPrevious = (e: React.MouseEvent<HTMLButtonElement>) => {
        RouteUtils.navigateToSection(props.routeProps, appRouteConfugurations[activeSection].previousSection, appRouteSectionsSequence);
    };
    const onSkipToSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
        RouteUtils.navigateToSection(props.routeProps, AppRouteSections.REVIEW, appRouteSectionsSequence);
    };
    return (
        <footer id="wizard-navigation">
            {appRouteConfugurations[activeSection].nextSection &&
                <button
                    ref={nextButtonRef}
                    disabled={appRouteConfugurations[activeSection].disableOtherSections || !isSectionValid}
                    onClick={onNext}
                    className="btn btn-app btn-primary"
                >
                    {appRouteConfugurations[activeSection].nextButtonLabel}
                </button>
            }
            {appRouteConfugurations[activeSection].previousSection &&
                <button
                    disabled={appRouteConfugurations[activeSection].disableOtherSections}
                    onClick={onPrevious}
                    className="btn btn-app btn-open-white"
                >
                    {appRouteConfugurations[activeSection].previousButtonLabel}
                </button>
            }
            {appRouteConfugurations[activeSection].showSkipToSubmit &&
                <button
                    disabled={appRouteConfugurations[activeSection].disableOtherSections || !isSectionValid}
                    onClick={onSkipToSubmit}
                    className="btn btn-app btn-link"
                >
                    {appRouteConfugurations[activeSection].skipToSubmitLabel}
                </button>
            }
            <FeedbcakForm />
        </footer>
    );
}
WizardNavigation.defaultProps = defaultProps;
