import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import AllWidget from '../components/AllWidgets.jsx';

const AddWidgetStyle = {
  headerList: {
    margin: 0,
    padding: 0,
  },
  headerListItem: {
    listStyle: 'none',
    padding: 0,
    margin: '0 10px 0 0',
    display: 'inline-block'
  },
  content: {
    marginTop: '15px',
  },
  title: {
    margin: '0 0 15px 0',
    padding: '10px 0 5px 0',
    fontSize: '16px',
    borderBottom: '1px solid #ccc',
  },
};

class AddWidget extends Component {

  render() {
    const {
      widgetConfiguration,
      onBackClick,
      onAddWidgetClick,
    } = this.props;

    return (<div>
      <ul style={AddWidgetStyle.headerList}>
        <li key="back" style={AddWidgetStyle.headerListItem}>
          <RaisedButton onClick={onBackClick} label="Back"></RaisedButton>
        </li>
        <li key="widget" style={AddWidgetStyle.headerListItem}>
          <h4 style={AddWidgetStyle.title}>Choose Your Widget</h4>
        </li>
      </ul>
      <div style={AddWidgetStyle.content}>
        <AllWidget widgetConfiguration={widgetConfiguration}
                   onAddWidgetClick={onAddWidgetClick}></AllWidget>
      </div>
    </div>);
  }
}

export default AddWidget;