 {TocStore, TocActions} = require '../../flux/toc'
 {TaskPlanStore, TaskPlanActions} = require '../../flux/task-plan'
 {CourseStore} = require '../../flux/course'
-
+SectionsChooser = require '../sections-chooser'
+LoadableItem = require '../loadable-item'
 
 SelectTopics = React.createClass
   displayName: 'SelectTopics'


  getInitialState: -> {initialSelected: @props.selected}

  renderChapterPanels: (chapter, i) ->
    expanded = not @props.selected?.length and i is 0
    <ChapterAccordion {...@props} expanded={expanded} chapter={chapter}/>

  hasChanged: ->
    @props.selected and not _.isEqual(@props.selected, @state.initialSelected)

  renderDialog: ->
    {courseId, planId, selected, hide, header, primary, cancel} = @props

    selected = TaskPlanStore.getTopics(planId)
    chapters = _.map(TocStore.get(@props.ecosystemId), @renderChapterPanels)
    changed = @hasChanged()

    <Dialog
      className='select-reading-dialog'

      primary={primary}
      confirmMsg='You will lose unsaved changes if you continue.'
      cancel='Cancel'
      isChanged={_.constant(@hasChanged())}
      onCancel={cancel}>

      <div className='select-reading-chapters'>
        <SectionsChooser
          chapters={TocStore.get(ecosystemId)}
          selectedSectionIds={TaskPlanStore.getTopics(planId)}
          onSelectionChange={@onSectionChange}
        />
      </div>

    </Dialog>

  render: ->
