import _ from 'lodash';
import React from "react";
import { Cell, Grid } from "..";
import style from "./style";

/**
 * The toolbar component can be used as a fixed header to display a navigation
 * of buttons, title, and actions
 * @todo Bring in the toolbar concepts from the Header object, & use this toolbar in that
 * @param {object} props The props
 * @returns {function} The component
 */
const Toolbar = props => {

  const Title = () => (
    <span style={style[props.theme].titleText}>{props.title}</span>
  );

  const LeftActionsGroup = () => (
    <Grid style={style[props.theme].leftActionsGroup}>
      {props.leftActionsGroup.map(Elem => (
        <Cell key={Math.random()} align="center">
          <Elem {...props} />
        </Cell>
      ))}
    </Grid>
  );

  const RightActionsGroup = () => (
    <Grid style={style[props.theme].rightActionsGroup}>
      {props.rightActionsGroup.map(Elem => (
        <Cell key={Math.random()} align="center">
          <Elem {...props} />
        </Cell>
      ))}
    </Grid>
  );

  // const Content = props.Content; //_.get(props, 'Content', <></>)
  const { ToolbarContent } = props;

  return (
    <div style={{
      ...style[props.theme].toolbar,
      ..._.get(props, 'style', {})
    }}>
      <Grid justify="space-between">
        <Cell>
          <LeftActionsGroup />
        </Cell>
        <Cell style={style[props.theme].title}>
          {typeof props.title === "function" ? (
            <span style={style[props.theme].titleText}>
              <props.title />
            </span>
          ) : (
            <Title />
          )}
        </Cell>
        <Cell>
          <RightActionsGroup />
        </Cell>
      </Grid>
      {ToolbarContent && <ToolbarContent />}
    </div>
  );
};

Toolbar.defaultProps = {
  theme: "dark"
};

export default Toolbar;