// @flow
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Button, Input} from 'antd';
import moment from 'moment';
import MainHeaderControls from './MainHeaderControls';
import MainHeaderCapture from './MainHeaderCapture';
import MainUpdateApp from './MainUpdateApp';
import Settings from '../settings/Settings';
import SettingsDataTimeRage from '../settings/SettingsDataTimeRage';
import * as MainActions from '../../actions/main';
import * as DataSetActions from '../../actions/dataSet';
import * as StationActions from '../../actions/station';
import * as ChartActions from '../../actions/chart';
import {IS_PROD} from "../../constants/app";


class MainHeader extends Component {
  size = 'small';

  componentWillMount() {
    if (!this.props.isLoading) {
      this.handlerReload();
    }
    this.props.chartActions.setChartCurrentTime(null);
  }

  componentWillReceiveProps(nextProps) {
    // if (nextProps.dbPath && !nextProps.isError) {
    //   this.handlerReload();
    // }
  }

  handlerReload = (e) => {
    this.props.stationActions.getLatitudeAvgValues();
    this.props.dataSetActions.getData();
    // e.target.blur(); // TODO: focusout not working
  };

  handlerClose = (e) => {
    this.props.mainActions.closeDataBase();
    // e.target.blur(); // TODO: focusout not working
  };

  handlerDatePickerOk = (value) => {
    this.props.mainActions.saveSettings({
      time: {
        selected: {
          start: value[0],
          end: value[1],
        }
      }
    }).then(() => {
      this.handlerReload();
    });
  };

  render() {
    const {timeSelected, timePeriod, timeAvg} = this.props;

    return (
      <div className="main-page-header">
        <Input.Group size={this.size} className="custom-group" compact>
          <span className="ant-input-group-addon">Time</span>
          <SettingsDataTimeRage
            defaultValue={timeSelected.map((item) => moment(item))}
            valueLimit={timePeriod.map((item) => moment(item))}
            onOk={(value) => this.handlerDatePickerOk(value)}
          />
          <span className="ant-input-group-addon">{timeAvg.value} {timeAvg.by.substr(0, 3)}. data</span>
          <Button
            size={this.size}
            icon="reload"
            type="danger"
            className="spin"
            onClick={(e) => this.handlerReload(e)}
          />
          {!IS_PROD && <Button
            size={this.size}
            icon="close-circle-o"
            type="danger"
            onClick={(e) => this.handlerClose(e)}
          />}
        </Input.Group>
        <Settings size={this.size}/>
        <MainHeaderControls size={this.size} onTick={this.props.stationActions.getStationsValue}/>
        <MainHeaderCapture size={this.size}/>
        <MainUpdateApp/>
      </div>
    );

  }
}

function mapStateToProps(state) {
  return {
    // timeAvgBy: state.main.settings.projectTimeAvg.by,
    // timeAvgValue: state.main.settings.projectTimeAvg.value,
    // timeStart: state.main.settings.projectTimeSelected[0],
    // timeEnd: state.main.settings.projectTimeSelected[1],
    // timePeriodStart: state.main.settings.projectTimePeriod[0],
    // timePeriodEnd: state.main.settings.projectTimePeriod[1],
    timeAvg: state.main.settings.projectTimeAvg,
    timePeriod: state.main.settings.projectTimePeriod,
    timeSelected: state.main.settings.projectTimeSelected,
    isLoading: state.station.isLoading || state.dataSet.isLoading,
    dbPath: state.main.dbPath,
    isError: state.main.isError,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    mainActions: bindActionCreators(MainActions, dispatch),
    dataSetActions: bindActionCreators(DataSetActions, dispatch),
    stationActions: bindActionCreators(StationActions, dispatch),
    chartActions: bindActionCreators(ChartActions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(MainHeader);

@@ -802,16 +802,19 @@
 () %7B%0A   
+ //
  if (!th
@@ -835,26 +835,29 @@
 ding) %7B%0A    
+//
   
+ 
 this.handler
@@ -869,16 +869,19 @@
 d();%0A   
+ //
  %7D%0A    t
@@ -979,24 +979,28 @@
 s) %7B%0A   
- //
  if (
+%0A      
 nextProp
@@ -1012,39 +1012,207 @@
 ath 
-&& !nextProps.isError
+!== this.props.dbPath %7C%7C%0A      nextProps.timeAvg !== this.props.timeAvg %7C%7C%0A      nextProps.timePeriod !== this.props.timePeriod %7C%7C%0A      nextProps.timeSelected !== this.props.timeSelected%0A    
 ) %7B%0A   
- //
    t
@@ -1231,27 +1231,24 @@
 eload();%0A   
- //
  %7D%0A  %7D%0A%0A  ha
@@ -3089,380 +3089,8 @@
 n %7B%0A
-    // timeAvgBy: state.main.settings.projectTimeAvg.by,%0A    // timeAvgValue: state.main.settings.projectTimeAvg.value,%0A    // timeStart: state.main.settings.projectTimeSelected%5B0%5D,%0A    // timeEnd: state.main.settings.projectTimeSelected%5B1%5D,%0A    // timePeriodStart: state.main.settings.projectTimePeriod%5B0%5D,%0A    // timePeriodEnd: state.main.settings.projectTimePeriod%5B1%5D,%0A
     

Fix data loading on open db