content: import React from 'react'
  import map from 'lodash/map'
  import isEmpty from 'lodash/isEmpty'
  import Category from 'components/HomePage/Category'
  import AddCategoryButton from 'components/HomePage/AddCategoryButton'
  import './HomePage.scss'
  import { DragDropContext } from 'react-dnd'
  import HTML5Backend from 'react-dnd-html5-backend'
  import * as DataService from 'services/data'
  import * as CategoryUtils from 'utils/category'
  import * as ItemUtils from 'utils/item'
  import Tabs from 'antd/lib/Tabs'
  import 'antd/dist/antd.css'
  
  @DragDropContext(HTML5Backend)
  export default class HomePage extends React.Component {
  
    constructor() {
      super()
      this.state = {
        jsonData: [],
        isEdit: false,
        searchWord: '',
        savePending: false,
        searchTimeOut: undefined,
        activeTagId: ''
      }
      this.handleClickSave = this.handleClickSave.bind(this)
      this.handleIsEdit = this.handleIsEdit.bind(this)
      this.handleChangeSearchWord = this.handleChangeSearchWord.bind(this)
      this.handleMoveCategory = this.handleMoveCategory.bind(this)
      this.handleAddCategory = this.handleAddCategory.bind(this)
      this.handleEditCategory = this.handleEditCategory.bind(this)
      this.handleDeleteCategory = this.handleDeleteCategory.bind(this)
      this.handleMoveItem = this.handleMoveItem.bind(this)
      this.handleMoveItemToEmptyCategory = this.handleMoveItemToEmptyCategory.bind(this)
      this.handleAddItem = this.handleAddItem.bind(this)
      this.handleEditItem = this.handleEditItem.bind(this)
      this.handleDeleteItem = this.handleDeleteItem.bind(this)
      this.handleChangeTags = this.handleChangeTags.bind(this)
    }
  
    componentWillMount() {
      DataService.loadData().then((jsonData) => {
        this.setState({jsonData, activeTagId: jsonData[0].id})
      })
    }
  
    componentWillUpdate (nextProps, nextState) {
      if (nextState.isEdit) {
        window.onbeforeunload = () => {return 'leave without save?'}
      } else {
        window.onbeforeunload = null
      }
    }
  
    handleClickSave() {
      if (!this.state.savePending) {
        this.setState({savePending: true})
        DataService.saveData(this.state.jsonData).then(
          () => {this.setState({
            isEdit: false,
            savePending: false
          })
        },
          () => {alert('save fail!')}
        )
      }
    }
  
    handleIsEdit() {
      if (this.state.isEdit) {
        this.setState({isEdit: false})
      } else {
        this.setState({isEdit: true})
      }
    }
  
    handleMoveCategory(dragId, hoverId) {
      const jsonData = CategoryUtils.moveCategory(this.state.jsonData, dragId, hoverId)
      this.setState({
        jsonData
      })
    }
  
    handleAddCategory(newCategory) {
      const jsonData = CategoryUtils.addCategory(this.state.jsonData, newCategory)
      this.setState({
        jsonData
      })
    }
  
    handleEditCategory(newCategory) {
      const jsonData = CategoryUtils.editCategory(this.state.jsonData, newCategory)
      this.setState({
        jsonData
      })
    }
  
    handleDeleteCategory(categoryId) {
      const jsonData = CategoryUtils.deleteCategory(this.state.jsonData, categoryId)
      this.setState({
        jsonData
      })
    }
  
    handleMoveItem(dragId, hoverId) {
      const jsonData = ItemUtils.moveItem(this.state.jsonData, dragId, hoverId)
      this.setState({
        jsonData
      })
    }
  
    handleMoveItemToEmptyCategory(dragId, hoverCategoryId) {
      const jsonData = ItemUtils.moveItemToEmptyCategory(this.state.jsonData, dragId, hoverCategoryId)
      this.setState({
        jsonData
      })
    }
  
    handleAddItem(categoryId, newItem) {
      const jsonData = ItemUtils.addItem(this.state.jsonData, categoryId, newItem)
      this.setState({
        jsonData
      })
    }
  
    handleEditItem(categoryId, newItem) {
      const jsonData = ItemUtils.editItem(this.state.jsonData, categoryId, newItem)
      this.setState({
        jsonData
      })
    }
  
    handleDeleteItem(ItemId) {
      const jsonData = ItemUtils.deleteItem(this.state.jsonData, ItemId)
      this.setState({
        jsonData
      })
    }
  
    handleChangeSearchWord() {
      if (!isEmpty(this.state.searchTimeOut)) {
        clearTimeout(this.state.searchTimeOut)
      }
      this.setState({
        searchTimeOut: setTimeout(() => {
          this.setState({
            searchWord: this.refs.searchWord.value
          })
        }, 300)
      })
    }
  
    handleChangeTags(id) {
      console.log(id);
      this.setState({
        activeTagId: id
      })
    }
  
    render() {
      const {jsonData} = this.state
      return (
        <div className='homePage'>
  
          <div className='Menu'>
            {this.renderMenu()}
            <input type='text' placeholder='defaultValue is sesword' onChange={this.handleChangeSearchWord} ref='searchWord'></input>
          </div>
          {this.renderTabs(jsonData)}
          {this.renderAddButton()}
        </div>
      )
    }
  
    renderTabs(jsonData) {
      const TabPane = Tabs.TabPane
      const panes = map(jsonData, tab =>
        <TabPane tab={tab.name} key={tab.id}>{this.renderCategories(tab.categories)}</TabPane>
      )
      //console.log(panes);
      return (
        <Tabs
          onChange={this.handleChangeTags}
          activeKey={this.state.activeTagId}
          type='editable-card'
          //onEdit={this.onEdit}
        >
          {panes}
        </Tabs>
      )
    }
  
    renderCategories(categories) {
      return (
        <div className='categories'>
          {map(categories, (category) => {
              return (<Category
                onMoveItem={this.handleMoveItem}
                onMoveItemToEmptyCategory={this.handleMoveItemToEmptyCategory}
                onAddItem={this.handleAddItem}
                onEditItem={this.handleEditItem}
                onDeleteItem={this.handleDeleteItem}
                category={category}
                isEdit={this.state.isEdit}
                key={category.id}
                searchWord={this.state.searchWord}
                onMoveCategory={this.handleMoveCategory}
                onEditCategory={this.handleEditCategory}
                onDeleteCategory={this.handleDeleteCategory}
              />)
            }
          )}
        </div>
      )
    }
  
    renderMenu() {
      if (this.state.isEdit) {
        return (
          <div>
            <span onClick={this.handleIsEdit}>取消</span>
            <span onClick={this.handleClickSave}>保存</span>
          </div>
        )
      }
      return (
        <div>
          <span onClick={this.handleIsEdit}>编辑</span>
        </div>
      )
    }
  
    renderAddButton() {
      if (!this.state.isEdit) {
        return null
      }
      return (
        <AddCategoryButton onAddCategory={this.handleAddCategory}/>
      )
    }
  }
  