 GroupBrowser  = require('./group-browser')
 GenericButton   = require('components/buttons/generic-button')
 FirstPageThumbnail = require('./first-page-thumbnail')
+SelectDropdown = require('./select-dropdown')
 API           = require('../lib/api')
 
 GroupPage = React.createClass

    group: null

  componentDidMount: ->
    # make a request to http://localhost:3000/subject_set_first_pages?group_id=578b885e3dfe9ecf50896966
    # using the incoming query param, and use the results of that query to populate and update the view

    API.type("subject_set_first_pages").get(group_id: @props.params.group_id).then (firstPagesJson) =>
      @setState
        all_first_pages: firstPagesJson
        current_first_pages: firstPagesJson

    API.type("groups").get(@props.params.group_id).then (group) =>
      @setState

      @setState
        subject_sets: sets


  initializeFirstPageArray: ->
    # iterate over all first pages to display and build the view
    first_pages_view = []
    for page_json, index in @state.all_first_pages
      first_pages_view.push <FirstPageThumbnail page_json={page_json} key={index} />
    @setState
      first_page_array: first_pages_view
      first_pages_initialized: 1


  updateFirstPageArray: ->
    console.log("updating first page array")
    selected_institution = $(".collection-institution select").val()
    selected_playwright  = $(".collection-playwright select").val() 

    # define the selection criteria to be used to filter first page objects
    selection_criteria_options = [
      {
        "label": "selected_institution", 
        "value": selected_institution, 
        "key_in_first_page_json": "location"
      }, 
      {
        "label": "selected_playwright", 
        "value": selected_playwright,
        "key_in_first_page_json": "written_by"
      }
    ]

    # if either selected_institution or selected_playwright are == "",
    # don't use them as selection criteria
    selection_criteria = []
    for selection_criterion in selection_criteria_options
      if selection_criterion.value?
        selection_criteria.push(selection_criterion)

    console.log(selection_criteria)

    # iterate over the first page array and retain only those elements that match
    # the user-specified selection criteria
    first_pages_to_display = []
    for first_page in @state.all_first_pages
      keep_page = 1
      for selection_criterion in selection_criteria
        console.log(first_page.meta_data[selection_criterion.key_in_first_page_json], selection_criterion.value)
        if first_page.meta_data[selection_criterion.key_in_first_page_json] != selection_criterion.value
          keep_page = 0
          console.log("not keeping page")
      if keep_page == 1
        first_pages_to_display.push(first_page)

    # iterate over the first pages to display and build the view
    first_pages_view = []
    for page_json, index in first_pages_to_display
      first_pages_view.push <FirstPageThumbnail page_json={page_json} key={index} />
    @setState
      first_page_array: first_pages_view


  render: ->
    if ! @state.group?
      <div className="group-page">
        <h2>Loading...</h2>
      </div>
    else
      <div className="collection-page-content">
        <div className="collection-title-container">
          <div className="collection-title">James Bundy Era</div>
        </div>

        <div className="collection-container">
          <div className="collection-thumbnails">{ @state.first_page_array }</div>
          <div className="collection-browse-controls-container">
            <div className="collection-browse-controls-content">
              <div className="collection-description">Praesent vitae lobortis, tempor vitae magna sed interdum nascetur. Eu eget facilisi urna laoreet, risus numquam bibendum, pellentesque odio dictum. Risus quam qui amet pellentesque nonummy, feugiat sodales lacus luctus.</div>
