import React, { PropTypes } from 'react';
import { Card } from 'material-ui';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import './Launcher.css';

import LauncherGroup from './LauncherGroup';

const { object } = PropTypes;

function renderLauncherItems(launcherData) {
  const toArray = arg => (Array.isArray(arg) ? arg : [arg]);
  const navItemList = toArray(launcherData.contents);

  return navItemList.map((item, counter) => (
    item.contents
      ? (<LauncherGroup key={`muiLauncherGroup-${counter}`} data={item} />)
      : null
  ));
}

const Launcher = (props) => {
  const navItems = renderLauncherItems(props.ncd);

  const style = props.border === false
                  ? { border: 'none', boxShadow: 'none' }
                  : undefined;

  return (
    <MuiThemeProvider>
      <div style={{ marginBottom: '0px' }}>
        <div className="ih-bottom-padding">
          <Card style={style} className="ih-appbar-popover">
            {navItems}
          </Card>
        </div>
      </div>
    </MuiThemeProvider>
  );
};

Launcher.propTypes = {
  ncd: object.isRequired,
  border: PropTypes.bool,
};

Launcher.defaultProps = {
  border: true,
};

export default Launcher;