import find from 'lodash/find';
import isEmpty from 'lodash/isEmpty';
import map from 'lodash/map';
import React, { useContext } from 'react';
import { RouteComponentProps } from 'react-router';
import { CreateCaseStateContext } from '../../context/CreateCaseContext';
import { RouteContext } from '../../context/RouteContext';
import { AppRouteSections, IRouteUrlParams } from '../../reducers/RouteReducer';
import RouteUtils from '../../utils/routeUtils';
import { AttachmentStateContext } from '../shared/fileUpload/AttachmentReducerContext';
interface IProps {
    routeProps: RouteComponentProps<IRouteUrlParams>;
}
const defaultProps: Partial<IProps> = {};
export default function WizardProgress(props: IProps) {
    const { routeState } = useContext(RouteContext);
    const { appRouteConfugurations , activeSection, appRouteSectionsSequence} = routeState;
    const { attachmentState } = useContext(AttachmentStateContext);
    const { createCaseState: {isCreatingCase} } = useContext(CreateCaseStateContext);
    const isUploadingAttachment = !isEmpty(find(attachmentState.caseFiles.selectedLocalFiles, (localFile) => localFile.uploadProgress.inProgress || localFile.uploadProgress.verifying));
    const onJumpCompleted = (section: AppRouteSections) => () => {
        RouteUtils.navigateToSection(props.routeProps, section, appRouteSectionsSequence);
    };
    const onJumpFuture = (section: AppRouteSections) => () => {
        RouteUtils.navigateToSection(props.routeProps, section, appRouteSectionsSequence);
    };
    const onNext = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        RouteUtils.navigateToSection(props.routeProps, appRouteConfugurations[activeSection].nextSection, appRouteSectionsSequence);
    };
    const onCurrent = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        RouteUtils.navigateToSection(props.routeProps, activeSection, appRouteSectionsSequence);
    };
    return (
        <nav id="wizard-progress" className={appRouteConfugurations[activeSection].disableOtherSections ? 'section-disabled' : ''}>
            <ol className="wizard-progress-content">
                {map(routeState.completedSections, (completedSection) => (<li className="completed" key={`completed-${completedSection}`}>
                    <button disabled={appRouteConfugurations[activeSection].disableOtherSections}
                        title={`${appRouteConfugurations[completedSection].title}`}
                        onClick={onJumpCompleted(completedSection)}>
                        <span className="sr-only">{appRouteConfugurations[completedSection].title}</span>
                    </button>
                </li>))}
                {activeSection && <li className={`${(activeSection === AppRouteSections.SUBMIT_CASE && !isUploadingAttachment && !isCreatingCase) ? 'completed' : 'on'}`}>
                    <button onClick={onCurrent}
                        title={`${appRouteConfugurations[activeSection].title}`}>
                        <span className="sr-only">{appRouteConfugurations[activeSection].title}</span>
                    </button>
                </li>}
                {appRouteConfugurations[activeSection].nextSection && <li className="next">
                    <button disabled={appRouteConfugurations[activeSection].disableOtherSections || !routeState.isSectionValid}
                        onClick={onNext}
                        title={`${appRouteConfugurations[appRouteConfugurations[activeSection].nextSection].title}`}>
                        <span className="sr-only">{appRouteConfugurations[appRouteConfugurations[activeSection].nextSection].title}</span>
                    </button>
                </li>}
                {map(appRouteConfugurations[activeSection].futureSections, (futureSection) => (<li className="future" key={`completed-${futureSection}`}>
                    <button disabled={appRouteConfugurations[activeSection].disableOtherSections || !routeState.isSectionValid}
                        title={`${appRouteConfugurations[futureSection].title}`}
                        onClick={onJumpFuture(futureSection)}>
                        <span className="sr-only">{appRouteConfugurations[futureSection].title}</span>
                    </button>
                </li>))}
            </ol>
        </nav>
    );
}
WizardProgress.defaultProps = defaultProps;
