import React from 'react'
import { Link } from 'react-router'
import RestService from '../RestService'
import LanguageStats from './LanguageStats'
import RPCButton from '../RPCButton'
import SFConfigIndex from '../SFConfig/Index'
import _ from 'lodash'
import update from 'react-addons-update'
import Switch from '../Switch'
import SFReleaseFilter from './Filter'

export default class SFReleaseList extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      current: null,
      connectionError: false,
      loading: false,
      filter: {
        // empty: false
      }
    }
  }

  componentWillMount() {
    this.loadData()
  }

  async loadData() {
    try {
      this.setState({loading: true})

      let data = await RestService.load('release')
      // console.log(data)

      this.setState({data: data, connectionError: false, loading: false})
    } catch (promise) {
//      console.log('error', promise)
      this.setState({connectionError: true, loading: false})
    }
  }

  // toggleFilter() {
  //   this.setState(update(this.state, {filter: {$set: {empty: !this.state.filter.empty}}}))
  // }

  filter(item) {
    if (this.state.filter.empty) {
      return _.isEmpty(item.subtitles)
    }

    if (this.state.filter.lang_vi) {
      return !item.subtitles["vi"] || item.subtitles["vi"].length == 0
    }

    return true
  }

  updateFilter(filter) {
    console.log('filter', filter);
    this.setState({filter: filter})
  }

  render() {

    return (
      <div className="box box-solid">
        <div className="box-header with-border">
          <h3 className="box-title">Movies</h3>

          <div className="box-tools">
            <button type="button" className="btn btn-box-tool" data-widget="collapse"><i className="fa fa-minus"></i>
            </button>

            <RPCButton query="release/scan-all" name="Scan All" />
          </div>
        </div>
        <div className="box-body">
          <SFReleaseFilter onChange={this.updateFilter.bind(this)}/>

          {this.state.data.filter(this.filter.bind(this)).map((item, k) => {
            let stateClass = ""
            if (_.isEmpty(item.subtitles)) {
              stateClass = " bg-warning"
            }
            return (
              <div key={k} className={"row row-hover row-list-item"+stateClass}>
                <div className="col-xs-12">
                    {item.name}
                </div>
                <div className="col-xs-6">
                  <LanguageStats data={item.subtitles} />
                </div>
                <div className="col-xs-6 pull-right">
                  <RPCButton query="release/download" params={{src: item.src}} name="Download" />
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

@@ -1251,24 +1251,100 @@
 les)%0A    %7D%0A%0A
+    for (let lang of %5B%22en%22, %22vi%22%5D) %7B%0A      let fieldName = %60lang_$%7Blang%7D%60%0A  
     if (this
@@ -1360,20 +1360,25 @@
 lter
-.lang_vi
+%5BfieldName%5D
 ) %7B%0A
+  
     
@@ -1402,20 +1402,20 @@
 btitles%5B
-%22vi%22
+lang
 %5D %7C%7C ite
@@ -1426,20 +1426,20 @@
 btitles%5B
-%22vi%22
+lang
 %5D.length
@@ -1444,16 +1444,24 @@
 th == 0%0A
+      %7D%0A
     %7D%0A%0A 

support en, vi filter