export default observer class InfoView extends Component
  @propTypes:
    isLoading: PropTypes.bool.isRequired
    links: PropTypes.array.isRequired,
    onSubmit: PropTypes.func.isRequired

  state: observable
    title: ''
    url: ''

  onSubmit: (event) =>
    event.preventDefault()

    @props.onSubmit @state.title, @state.url, =>
      @state.title = ''
      @state.url = ''

  renderLinks: =>
    @props.links.map (link) =>
      <li key={link._id}>
        <a href={link.url} target="_blank">{ link.title }</a>
      </li>

  render: =>
    if this.props.isLoading
      return null

    <div>
      <h2>Learn Meteor!</h2>
      <ul>
        <li>
          <form onSubmit={this.onSubmit}>
            <input placeholder="Title" value={this.state.title} onChange={(event) => @state.title = event.target.value} />
            <input type="url" placeholder="Url" value={this.state.url} onChange={(event) => @state.url = event.target.value} />
            <input type="submit" value="Add new link" onClick={@onSubmit} />
          </form>
        </li>
        { this.renderLinks() }
      </ul>
    </div>