import * as React from 'react';
import {ReactNode, SFC} from 'react';
import {Button} from 'reactstrap';
import {Breadcrumbs, Icon} from './..';

export interface MainNavLeftProps {
  breadcrumbs?: (string | ReactNode)[];
  button?: ReactNode;
  noMenuButton?: boolean;
  title: ReactNode;
  onClickMenuButton?: () => void;
}

export const MainNavLeft: SFC<MainNavLeftProps> = ({
  button,
  breadcrumbs,
  noMenuButton,
  title,
  onClickMenuButton}: MainNavLeftProps) => (

  <div className="main-nav-left">
    {button}

    {!button && !noMenuButton && (
      <Button
        className="btn-icon btn-square toggle-drawer"
        color="link"
        onClick={onClickMenuButton}
      >
        <Icon name="menu" />
      </Button>
    )}

    <h1 className="page-title">{title}</h1>

    {breadcrumbs.length !== 0 && (
      <Breadcrumbs list={breadcrumbs} />
    )}
  </div>
);

MainNavLeft.displayName = 'MainNavLeft';

MainNavLeft.defaultProps = {
  breadcrumbs: [],
  button: null,
  noMenuButton: false,
  onClickMenuButton: () => { return; },
};