import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import Shortcuts from '../widgets/shortcuts';
import Status from '../widgets/status';


class App extends Component {

  static propTypes = {
    children: PropTypes.node,
    status: PropTypes.string,
    shortcuts: PropTypes.array,
  };

  static contextTypes = {
    theme: PropTypes.object.isRequired,
  };

  render () {
    const { children, status } = this.props;
    const { theme } = this.context;
    const shortcuts = [
      { key: 'q', label: 'Quit' },
      { key: 'escape', label: 'Back' },
      ...this.props.shortcuts,
    ];
    return (
      <box position={{ top: 0, left: 0, bottom: 0, right: 0 }} style={theme.header}>
        <text style={theme.header} content=" SQLECTRON" />
        <box position={{ top: 1, left: 0, right: 0, bottom: 2 }} style={theme.main}>
          {children}
        </box>
        <Status status={status} />
        <Shortcuts shortcuts={shortcuts} />
      </box>
    );
  }
}


export default connect(
  state => ({
    status: state.status,
    shortcuts: state.shortcuts,
  })
)(App);
