import { IRule, sendTrackingData } from '@rh-support/api';
import filter from 'lodash/filter';
import isEmpty from 'lodash/isEmpty';
import map from 'lodash/map';
import React, { useContext } from 'react';
import { Trans } from 'react-i18next';
import { RouteComponentProps } from 'react-router';
import { AppMetadataStateContext } from '../../context/AppMetadataContext';
import { RecommendationStateContext } from '../../context/RecommendationContext';
import { RouteContext } from '../../context/RouteContext';
import { RulesDispatchContext, RulesStateContext } from '../../context/RulesContext';
import { AppRouteSections, IRouteUrlParams } from '../../reducers/RouteReducer';
import { setCustomerPortalRulesVisibilityChange, setEARulesVisibilityChange } from '../../reducers/RulesReducer';
import CaseUtils from '../../utils/caseUtils';
import Rule from '../shared/Rule';

interface IProps {
    routeProps: RouteComponentProps<IRouteUrlParams>;
}
const defaultProps: Partial<IProps> = {};
export default function WizardAside(props: IProps) {
    const { routeState: { appRouteConfugurations, activeSection } } = useContext(RouteContext);
    const rulesDispatch = useContext(RulesDispatchContext);
    const { rulesState } = useContext(RulesStateContext);
    const { recommendationState } = useContext(RecommendationStateContext);
    const { appMetadataState: { guid } } = useContext(AppMetadataStateContext);

    if (appRouteConfugurations[activeSection].hideAside) { return null; }

    const validSidebarEARules = filter(rulesState.EARules.rules, r => r.visible && r.rule_sub_type !== 'attachment');
    const validSidebarCPRules = filter(rulesState.customerPortalRules.rules, r => r.visible);

    const onHideCPRule = (cta: string) => setCustomerPortalRulesVisibilityChange(rulesDispatch, { 'cta': cta });
    const onHideEARule = (cta: string) => setEARulesVisibilityChange(rulesDispatch, { 'cta': cta });
    const canShowHeader = (): boolean => (!isEmpty(validSidebarEARules) && rulesState.EARules.sidebarSections.indexOf(activeSection) !== -1);
    const canShowSidebarRules = (rule_name: string): boolean => (rulesState[rule_name].sidebarSections.indexOf(activeSection) !== -1);

    const canShowSideRecommendations = (): boolean => (
        (activeSection === AppRouteSections.OPEN_CASE ||
            activeSection === AppRouteSections.REVIEW ||
            activeSection === AppRouteSections.IMPROVE_CASE ||
            activeSection === AppRouteSections.CASE_MGM
        ) && (recommendationState.sideRecommendation.length > 0 && !recommendationState.sideRecommendationError)
    );

    const sendTracking = (title: string, link: string) => () => {
        sendTrackingData('url_visited', [title, link], guid.data);
    };

    return (
        <aside id="wizard-aside">
            <section className="wizard-aside-content">
                {canShowHeader() && <header><h3>Have you tried?</h3></header>}
                {canShowSidebarRules('customerPortalRules') && map(validSidebarCPRules,
                    (rule: IRule) => <Rule onHide={onHideCPRule.bind(null, rule.cta)}
                        description={rule.description}
                        title={rule.title}
                        link={rule.cta}
                        key={rule.cta} />
                )}
                {canShowSidebarRules('EARules') && map(validSidebarEARules,
                    (rule: IRule) => <Rule onHide={onHideEARule.bind(null, rule.cta)}
                        description={rule.description}
                        title={rule.title}
                        link={rule.cta}
                        key={rule.cta} />
                )}
                {canShowSideRecommendations() && <section>
                    <header><h3><Trans>Top matches to your issue</Trans></h3></header>
                    <div className="card card-white card-md">
                        <ul className="list-flushleft">
                            {recommendationState.sideRecommendation.map((doc) => (
                                <li key={doc.id}>
                                    <a href={`${doc.view_uri}?band=se`} target="_blank" onClick={sendTracking(CaseUtils.getRecommendationTitle(doc), doc.view_uri)}>
                                        {!isEmpty(doc.publishedTitle) ? doc.publishedTitle : doc.allTitle}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </div>
                </section>}
            </section>
        </aside>
    );
}
WizardAside.defaultProps = defaultProps;
