'use strict'

import React, { Component } from 'react'
import Select from 'react-select'
import { style } from 'next/css'
import Alert from 'react-s-alert'

import { countries, locations } from '../services/places'
import { RANKINGS_ERROR } from './../constants'

const styles = {
  filter: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '30px'
  },

  input: {
    flexBasis: '100%',
    marginLeft: '10px',
    marginRight: '10px'
  }
}

class Filter extends Component {
  constructor () {
    super()

    this.state = {
      stateList: locations['BR'],
      cityList: null,
      state: null,
      city: null
    }

    this.handleState = this.handleState.bind(this)
    this.handleCity = this.handleCity.bind(this)
  }

  handleState (e) {
    const city = locations['BR'].filter(state => state.value === e.value)

    this.setState({
      state: e.value,
      stateParam: e.label,
      cityList: city[0].cities
    })

    const params = {
      country: 'BR',
      state: e.label
    }

    this.props.fetchRankings(params)
      .then(res => {
        if (res.type === RANKINGS_ERROR) {
          Alert.error('Nenhum invocador encontrado nessa região', {position: 'bottom-right'})
        }
      }).catch(err => console.log('err', err))
  }

  handleCity (e) {
    this.setState({city: e.value})

    const params = {
      country: 'BR',
      state: this.state.stateParam,
      city: e.label
    }

    this.props.fetchRankings(params)
      .then(res => {
        if (res.type === RANKINGS_ERROR) {
          Alert.error('Nenhum invocador encontrado nessa região', {position: 'bottom-right'})
        }
      }).catch(err => console.log('err', err))
  }

  render () {
    return (
      <section className={style(styles.filter)}>
        <div className={style(styles.input)}>
          <Select options={this.state.stateList} value={this.state.state} onChange={this.handleState} placeholder="Selecione um estado..."/>
        </div>

        <div className={style(styles.input)}>
          <Select options={this.state.cityList} value={this.state.city} onChange={this.handleCity} placeholder="Selecione uma cidade..."/>
        </div>

        <Alert effect="jelly" stack={{limit: 3}}/>
      </section>
    )
  }
}

export default Filter

@@ -845,16 +845,31 @@
 e.value)
+%0A    let params
 %0A%0A    th
@@ -966,37 +966,198 @@
 ies%0A    %7D)%0A%0A    
-const
+if (this.state.selected === 'ranked') %7B%0A      params = %7B%0A        country: 'BR',%0A        state: e.label,%0A        limit: 100,%0A        skip: 0%0A      %7D%0A    %7D else %7B%0A     
  params = %7B%0A    
@@ -1144,32 +1144,34 @@
      params = %7B%0A
+  
       country: '
@@ -1177,24 +1177,26 @@
 'BR',%0A      
+  
 state: e.lab
@@ -1189,32 +1189,85 @@
   state: e.label
+,%0A        limit: 300,%0A        unrankeds: true%0A      %7D
 %0A    %7D%0A%0A    this
@@ -1308,32 +1308,149 @@
  .then(res =%3E %7B%0A
+        this.setState(%7B%0A          summoners: res.data.summoners,%0A          unrankeds: res.data.summoners%0A        %7D)%0A%0A
         if (res.

Fix filter