import * as React from 'react';
import {Skeleton} from '../../index';
import {IMenuSiderProps} from '../menu_sider/MenuSider';
import {IHeaderProps} from '../page_header/PageHeader';

import * as styles from './pageLayout.m.scss';
import {joinClassNames} from '../..';

interface IProps {
    menuComponent?: React.ReactElement<IMenuSiderProps>;
    headerComponent?: React.ReactElement<IHeaderProps>;
    noBodyPadding?: boolean;
    'data-qaid'?: string;
    isWaiting?: boolean;
    footerComponent?: React.ReactElement<any>;
}

export class PageLayout extends React.PureComponent<IProps> {

    renderWithHeader = (dataQaid?: string) => {
        const bodyClass = joinClassNames(
            styles.headerChildren,
            [styles.noBodyPadding, this.props.noBodyPadding === true]
        );

        return (
            <div className={styles.containerWithHeader} data-qaid={dataQaid}>
                {this.props.headerComponent}
                {this.props.isWaiting === true ? (
                    <Skeleton isLoading={true}/>
                ) : (
                    <div className={bodyClass}>
                        {this.props.children}
                    </div>
                )}
                {this.props.footerComponent && (
                    <div className={styles.footer}>
                        {this.props.footerComponent}
                    </div>
                )}
            </div>
        );
    };

    renderWithMenu = (dataQaid?: string) => {
        return (
            <div className={styles.containerWithMenu} data-qaid={dataQaid}>
                {this.props.menuComponent}
                <div className={styles.menuChildren}>
                    {this.renderWithHeader()}
                </div>
            </div>
        );
    };

    override render () {
        if (this.props.menuComponent !== undefined) {
            return this.renderWithMenu(this.props['data-qaid']);
        }

        return this.renderWithHeader(this.props['data-qaid']);
    }
}