     value = @refs.title.getDOMNode().value
     TaskPlanActions.updateTitle(id, value)
 
+  showSectionTopics: ->
+    @setState({
+      showSectionTopics: true
+    })
+
+  hideSectionTopics: ->
+    @setState({
+      showSectionTopics: false
+    })
+
   render: ->
     {id, courseId} = @props
     plan = TaskPlanStore.get(id)
 
     headerText = if TaskPlanStore.isNew(id) then 'Add Reading' else 'Edit Reading'
     topics = TaskPlanStore.getTopics(id)
+    formClasses = ['create-reading']
 
     if TaskPlanStore.isNew(id) and @context?.router?.getCurrentQuery().date
       plan.due_at = new Date(@context.router.getCurrentQuery().date)


{TaskPlanStore, TaskPlanActions} = require '../../flux/task-plan'
{TocStore, TocActions} = require '../../flux/toc'
PlanFooter = require './footer'
ConfirmLeaveMixin = require '../confirm-leave-mixin'


SectionTopic = React.createClass
  render: ->
    classes = ['section']
    classes.push('selected') if @props.active
    classes = classes.join(' ')

    <div key={@props.section.id} className={classes} onClick={@toggleSection}>
      <span className="-section-number">{@props.section.number}</span>
      <span className="-section-title">{@props.section.title}</span>
    </div>

  toggleSection: ->
    section = @props.section
    if (TaskPlanStore.hasTopic(@props.planId, section.id))
      TaskPlanActions.removeTopic(@props.planId, section.id)
    else
      TaskPlanActions.addTopic(@props.planId, section.id)


SelectTopics = React.createClass
  mixins: [BS.OverlayMixin]
  getInitialState: ->
    {courseId} = @props
    TocActions.load(courseId) unless TocStore.isLoaded()
    { isModalOpen: false }

  componentWillMount:   -> TocStore.addChangeListener(@update)
  componentWillUnmount: -> TocStore.removeChangeListener(@update)

  update: -> @setState({})

  handleToggle: ->
    @setState({
      isModalOpen: !@state.isModalOpen
    })

  doneWithSelection: ->
    return

  render: ->
    if TocStore.isLoaded()
      if @props.selected.length
        selectedReadingList =
          <ul className="selected-reading-list">
            <li><strong>Currently selected sections in this reading</strong></li>
            {_.map(@props.selected, @renderTopics)}
          </ul>
      else
        selectedReadingList = <div className="-selected-reading-list-none">No Readings Selected Yet</div>

      <div>
        <label htmlFor="reading-select">Select Readings</label>
        <BS.Button id="reading-select" onClick={@handleToggle} bsStyle="primary">Edit Readings</BS.Button>
        {selectedReadingList}
      </div>

    else
      <div className="-loading">Loading...</div>


  renderTopics: (topicId) ->
    topic = TocStore.getSectionInfo(topicId)
    <li className="-selected-section">
      <span className="-section-number">{topic.number}</span>
      <span className="-section-title">{topic.title}</span>
    </li>

  renderSections: (section) ->
    active = TaskPlanStore.hasTopic(@props.planId, section.id)
    <SectionTopic active={active} section={section} planId={@props.planId} />

  renderChapterPanels: (chapter, i) ->
    sections = _.map(chapter.children, @renderSections)
    header =
      <h2 className="-chapter-title">
        <span className="-chapter-number">{chapter.number}</span>
        <span className="-chapter-title">{chapter.title}</span>
      </h2>

    <BS.Accordion>
      <BS.Panel key={chapter.id} header={header} eventKey={chapter.id}>
        {sections}
      </BS.Panel>
    </BS.Accordion>

  renderOverlay: ->
    {courseId} = @props
    unless @state.isModalOpen
      return <span className="-no-modal"/>
    unless TocStore.isLoaded()
      TocActions.load(courseId)
      return <span className="-loading">Loading...</span>

    chapters = _.map(TocStore.get(), @renderChapterPanels)

    <BS.Modal backdrop={true} onRequestHide={@doneWithSelection}>
      <div className="modal-body select-reading-modal">
        {chapters}
      </div>
      <div className="modal-footer">
        <BS.Button onClick={@handleToggle}>Close</BS.Button>
      </div>
    </BS.Modal>


ReadingPlan = React.createClass


    if plan?.due_at
      dueAt = new Date(plan.due_at)

    footer = <PlanFooter id={id} courseId={courseId} />

    if (@state?.showSectionTopics)
      formClasses.push('hide')
      selectReadings = <ChooseReadings
                        hide={@hideSectionTopics}
                        courseId={courseId} 
                        planId={id} 
                        selected={topics}/>

    <div>
      <BS.Panel bsStyle="primary" 
        className={formClasses.join(' ')} 
        footer={footer} 
        header={headerText}>

        <div className="-reading-title">
          <label htmlFor="reading-title">Title</label>
          <input
            ref="title"
            id="reading-title"
            type="text"
            value={plan.title}
            placeholder="Enter Title"
            onChange={@setTitle} />
        </div>
        <div className="-reading-open-date">
          <label htmlFor="reading-open-date">Open Date</label>
          <DateTimePicker
            id="reading-open-date"
            format="MMM dd, yyyy"
            time={false}
            calendar={true}
            readOnly={false}
            onChange={@setOpensAt}
            max={dueAt}
            value={opensAt}/>
        </div>
        <div className="-reading-due-date">
          <label htmlFor="reading-due-date">Due Date</label>
          <DateTimePicker
            id="reading-due-date"
            format="MMM dd, yyyy"
            time={false}
            calendar={true}
            readOnly={false}
            onChange={@setDueAt}
            min={opensAt}
            value={dueAt}/>
        </div>
        <div>
          <label htmlFor="reading-select">Select Readings</label>
          <BS.Button id="reading-select" 
            onClick={@showSectionTopics} 
            bsStyle="primary">Edit Readings
          </BS.Button>
          <ReviewReadings courseId={courseId} selected={topics}/>
        </div>
      </BS.Panel>
      {selectReadings}
    </div>

module.exports = {ReadingPlan}

