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: LocationStore.countries || {US: {name: 'United States', regions: []}}}

  onLocationsChanged: (countries) ->
    console.log("countires in ", countries)
    @setState({countries: countries})

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

    if val?
      LocationActions.selectCountry(val)

  onRegionChanged: (e) ->
    val = $(e.target).val()
    @changed(this.currentCountry(), val, null)
    @setState({selectedRegion: val, selectedCity: null})

    if val? && this.props.showCity
      LocationActions.selectRegion(this.currentCountry(), val)

  onCityChanged: (e) ->
    val = $(e.target).val()
    @changed(this.currentCountry(), this.currentRegion(), val)
    @setState({selectedCity: val})


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

    if region == ''
      region = null

    if city == ''
      city = null

    @props.onItemChanged(country, region, city)

  currentCity: () ->
    this.state.selectedCity || this.props.selectedCity

  currentCountry: () ->
    this.state.selectedCountry || this.props.selectedCountry || 'US'

  currentRegion: () ->
    this.state.selectedRegion || this.props.selectedRegion

  defaultText: () ->
    if this.props.defaultText?
      this.props.defaultText
    else
      'Any'

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


    country = @state.countries[this.currentCountry()]

    regions = [`<option key="" value="">{this.defaultText()}</option>`]

    cities = [`<option key="" value="">{this.defaultText()}</option>`]


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

        if this.currentRegion() == region.id && this.props.showCity
            for city in region.cities
              cities.push(`<option key={city} value={city}>{city}</option>`)

    if !this.props.hideCountry
      countryJsx = `<div><h3>Country:</h3>
        <select name="countries" onChange={this.onCountryChanged} value={this.currentCountry()}>{countries}</select>
      </div>`

    disabled = regions.length == 1
    if this.props.showCity
      cityJsx = `<div><h3>City:</h3>
        <select name="cities" disabled={cities.length == 1} onChange={this.onCityChanged} value={this.currentCity()}>{cities}</select>
      </div>`

    `<div className="SelectLocation">
      {countryJsx}
      <h3>State/Region:</h3>
      <select name="regions" disabled={disabled} onChange={this.onRegionChanged}
              value={this.currentRegion()}>{regions}</select>
      {cityJsx}
    </div>`
})