context = window
rest = window.JK.Rest()
logger = context.JK.logger

@SelectLocation = React.createClass({

  mixins: [Reflux.listenTo(@LocationStore,"onLocationsChanged")]

  propTypes: {
    onItemChanged: React.PropTypes.func.isRequired
  }

  getInitialState:() ->
    {selectedCountry: null, countries:{US: {name: 'United States', region: null}}}

  onLocationsChanged: (countries) ->
    @setState({countries: countries})

  onCountryChanged: (e) ->
    val = $(e.target).val()
    @changed(val, null)
    @setState({selectedCountry: val, selectedRegion: null })

    if val?
      LocationActions.selectCountry(val)

  onRegionChanged: (e) ->
    val = $(e.target).val()
    @changed(@state.selectedCountry, val)
    @setState({selectedRegion: val })

  changed: (country, region) ->
    if country == ''
      country = null

    if region == ''
      region = null

    @props.onItemChanged(country, region)

  render: () ->
    countries = [`<option key="" value="">Any</option>`]
    for countryId, countryInfo of @state.countries
      countries.push(`<option key={countryId} value={countryId}>{countryInfo.name}</option>`)

    country = @state.countries[@state.selectedCountry]

    regions = [`<option key="" value="">Any</option>`]


    if country? && country.regions
      for region in country.regions
        regions.push(`<option key={region.id} value={region.id}>{region.name}</option>`)

    disabled = regions.length == 1
    `<div className="SelectLocation">
      <h3>Country:</h3>
      <select name="countries" onChange={this.onCountryChanged} value={this.state.selectedCountry}>{countries}</select>
      <h3>State/Region:</h3>
      <select name="regions" disabled={disabled} onChange={this.onRegionChanged} value={this.state.selectedRegion}>{regions}</select>
    </div>`
})