import * as React from "react";
import Loader from "../loader/Loader";

export interface IFixedActionBarProps {
    /** Content to be displayed on the left side of the fixed action bar */
    leftContent?: React.ReactNode;

    /** Content to be displayed on the right side of the fixed action bar */
    rightContent?: React.ReactNode;

    /** Is the fixed action bar visible. Default is true */
    visible?: boolean;

    /** Height of the fixed action bar. Default is 53px */
    height?: number;


    /** Show loading mask */
    loading?: boolean;
}

/**
 * Fixed Action Bar that contains actions and is anchored at the bottom of the page or section
 * @beta
 */
const FixedActionBar: React.FC<IFixedActionBarProps> = (props) => {
    const { visible = true, height = 53, leftContent, rightContent, children, loading } = props;

    let containerClassName = `tempo-fixed-action-bar`;
    if (visible) {
        containerClassName += ` tempo-fixed-action-bar--visible`;
    }

    return (
        <Loader loading={loading}>
            <div className={containerClassName} style={{ paddingBottom: visible ? height : 0 }}>
                {children}
                <div className="tempo-fixed-action-bar__actions" style={{ height: height }}>
                    {leftContent ? (
                        <div className="tempo-fixed-action-bar__left-content">{leftContent}</div>
                    ) : (
                        <div></div>
                    )}
                    {rightContent && <div className="tempo-fixed-action-bar__right-content">{rightContent}</div>}
                </div>
            </div>
        </Loader>
    )
}

export default FixedActionBar;