/** @module react-aiot/components/Header */
import React from 'react';
import { Toolbar, Creatable, Spin } from '.';
/**
* Render the header with headline, {@link module:react-aiot/components/Creatable|Creatable buttons} buttons
* and {@link module:react-aiot/components/Toolbar|Toolbar}. In this part the sticky component is ensured and
* you do not have to worry about it.
*
* @param {object} props Properties
* @param {React.Element|string} props.headline The headline
* @param {object} [props.creatable] The creatables configuration
* @param {object<key,object>} props.creatable.buttons The buttons. The key is the unique
* button key and the object represents the {@link module:react-aiot/components/Creatable|Creatable} properties.
* @param {object} props.creatable.backButton If isCreatableLinkCancel is true this button is showed ({@link module:react-aiot/components/Creatable|Creatable} properties)
* @param {boolean} [props.isCreatableLinkDisabled] Allows to disable all creatable buttons
* @param {boolean} [props.isCreatableLinkCancel] If true the props.creatable.backButton is parsed as Creatable button
* @param {boolean} [props.isToolbarActive] If true the toolbar buttons are enabled (see {@link module:react-aiot/components/Toolbar|Toolbar})
* @param {boolean} [props.isToolbarBusy] If true the toolbar is overlayed with a spinning loader (see {@link module:react-aiot/components/Toolbar|Toolbar})
* @param {object} [props.toolbar] The toolbar configuration (see {@link module:react-aiot/components/Toolbar|Toolbar})
* @param {object<key,object>} [props.toolbar.buttons] The toolbar buttons
* @param {object} [props.toolbar.backButton] The toolbar back button. Is showed if toolbarActiveButton is set
* @param {string} [props.toolbarActiveButton] The active toolbar button (must match the same as the object key of the button)
* @param {boolean} [props.isBusyHeader] If true the header is overlayed with a spinning loader
*/
export default ({
headline,
creatable,
isCreatableLinkDisabled,
isCreatableLinkCancel,
isToolbarActive,
isToolbarBusy,
toolbar,
toolbarActiveButton,
isBusyHeader
}) => <Spin spinning={ !!isBusyHeader } size="small">
<div className="aiot-tree-headline">
{ headline }
{ !isCreatableLinkCancel ? Object.keys(creatable.buttons).map(key =>
( <Creatable key={ key } type={ key } {...creatable.buttons[key]} isCreatableLinkDisabled={ isCreatableLinkDisabled } /> ) )
: <Creatable { ...creatable.backButton } type="_aio_cancel" /> }
</div>
<Toolbar isToolbarActive={ isToolbarActive } isToolbarBusy={ isToolbarBusy } buttons={ toolbar.buttons }
backButton={ toolbar.backButton } activeButton={ toolbarActiveButton } />
</Spin>;