import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import MouseTooltip from 'react-sticky-mouse-tooltip';

import Translator from './translator/translator';
import Catalog from './catalog/catalog';
import actions from './actions/export';
import {objectsMap} from './utils/objects-utils';
import {
  ToolbarComponents,
  Content,
  SidebarComponents,
  FooterBarComponents
} from './components/export';
import {VERSION} from './version';
import './styles/export';

const {Toolbar} = ToolbarComponents;
const {Sidebar} = SidebarComponents;
const {FooterBar, TopBar} = FooterBarComponents;

const toolbarW = 50;
const sidebarW = 300;
const footerBarH= 20;
const topBarH  = 32;
const wrapperStyle = {
  display: 'flex',
  flexFlow: 'row nowrap'
};

const infoBlock = {
  position: 'fixed',
  left: toolbarW + 28,
  top: 17,
  zIndex: 1
}

class ReactPlanner extends Component {
  constructor(props){
    super(props)
    this.state={
      hoverTxt : ""
    }
  }

  getChildContext() {
    return {
      ...objectsMap(actions, actionNamespace => this.props[actionNamespace]),
      translator: this.props.translator,
      catalog: this.props.catalog,
    }
  }

  componentWillMount() {
    let {store} = this.context
    let {projectActions, catalog, stateExtractor, plugins} = this.props;
    plugins.forEach(plugin => plugin(store, stateExtractor));
    projectActions.initCatalog(catalog);

    console.log("==================> componet mounted <================")

    
  }

  componentWillReceiveProps(nextProps) {
    let {stateExtractor, state, projectActions, catalog} = nextProps;
    let plannerState = stateExtractor(state);
    let catalogReady = plannerState.getIn(['catalog', 'ready'])
    this.setState({hoverTxt: ""})
    plannerState.getIn(["scene", "layers"]).forEach(layer =>{
      let items = layer.get("items")
      items.forEach(item=>{
        if(item.get("hover")){
          let hoverTxt = item.getIn(["properties", "associate", "popUp"]) ? item.getIn(["properties","associate", "popUp"]) : ""
          this.setState({hoverTxt})
        }
      })
    })
    // console.log("update stat : ", layers)
    if (!catalogReady) {
      projectActions.initCatalog(catalog);
    }
  }

  render() {

    let {width, height, state, stateExtractor, ...props} = this.props;
    let {hoverTxt} = this.state
    let contentW = width - toolbarW - sidebarW;
    let toolbarH = height - footerBarH - topBarH;
    let contentH = height - footerBarH - topBarH;
    let sidebarH = height - footerBarH - topBarH;
    let extractedState = stateExtractor(state);

    return (
      <div style={{...wrapperStyle, height}}>
        <TopBar width={width} height={topBarH} state={extractedState} {...props} />
        
        <div style={{display: "flex", position: "absolute", top: topBarH}}>
          <Toolbar width={toolbarW} top={topBarH} height={toolbarH} state={extractedState} {...props} />

          <MouseTooltip
            visible={hoverTxt!=""}
            offsetX={0}
            offsetY={-36}
          >
              <h4 style={{zIndex: 1000000, margin: 0, color: "white", textAlign:"center", background: "#6F8E71", padding: "5px 24px", fontWeight: 200, borderRadius: 3}}>{hoverTxt}</h4>
          </MouseTooltip>

          <Content width={contentW} top={topBarH} height={contentH} state={extractedState} {...props}/>
          <Sidebar width={sidebarW} top={topBarH} height={sidebarH} state={extractedState} {...props} />
        </div>        
        <FooterBar width={width} height={footerBarH} state={extractedState} {...props} />
      </div>
    );

  }
}

ReactPlanner.propTypes = {
  translator: PropTypes.instanceOf(Translator),
  catalog: PropTypes.instanceOf(Catalog),
  allowProjectFileSupport: PropTypes.bool,
  plugins: PropTypes.arrayOf(PropTypes.func),
  autosaveKey: PropTypes.string,
  autosaveDelay: PropTypes.number,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  stateExtractor: PropTypes.func.isRequired,
  toolbarButtons: PropTypes.array,
  sidebarComponents: PropTypes.array,
  footerbarComponents: PropTypes.array,
  customContents: PropTypes.object,
  softwareSignature: PropTypes.string
};

ReactPlanner.contextTypes = {
  store: PropTypes.object.isRequired,
};

ReactPlanner.childContextTypes = {
  ...objectsMap(actions, () => PropTypes.object),
  translator: PropTypes.object,
  catalog: PropTypes.object,
};

ReactPlanner.defaultProps = {
  translator: new Translator(),
  catalog: new Catalog(),
  plugins: [],
  allowProjectFileSupport: true,
  softwareSignature: `React-Planner ${VERSION}`,
  toolbarButtons: [],
  sidebarComponents: [],
  footerbarComponents: [],
  customContents: {},
};

//redux connect
function mapStateToProps(reduxState) {
  return {
    state: reduxState
  }
}

function mapDispatchToProps(dispatch) {
  return objectsMap(actions, actionNamespace => bindActionCreators(actions[actionNamespace], dispatch));
}

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