import React, { forwardRef } from 'react';
import { AppRouteSections } from '../../reducers/RouteReducer';
import LoadingIndicator from '../shared/LoadingIndicator';

interface IProps {
    section: AppRouteSections;
    activeSection: AppRouteSections;
    title: string | JSX.Element | JSX.Element[];
    children: JSX.Element | JSX.Element[];
    isLoading?: boolean;
    description?: string | JSX.Element | JSX.Element[];
    descriptionClassName?: string;
}
const defaultProps: Partial<IProps> = {
    isLoading: false
};

const MainSection = forwardRef<HTMLDivElement, IProps>((props, ref) => {
    return (
        <section className={`wizard-main-section${props.activeSection === props.section ? ' wizard-main-active-section' : ''}`}
            id={`${props.section}`}
            ref={ref}
            tabIndex={-1}
            aria-labelledby={`${props.section}-heading`}
            aria-describedby={`${props.section}-description`}>
            <LoadingIndicator show={props.isLoading} size="lg" />
            {!props.isLoading && <>
                <header>
                    {props.title && <h2 id={`${props.section}-heading`}>
                        {props.title}
                    </h2>}
                    {props.description && <p id={`${props.section}-description`} className={`${props.descriptionClassName ? props.descriptionClassName : ''}`}>
                        {props.description}
                    </p>}
                </header>
                {props.children}
            </>}
        </section>
    );
});
MainSection.defaultProps = defaultProps;
export default MainSection;
