import React from 'react';
import {Component} from 'react';
import {findDOMNode} from 'react-dom';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import {store} from '../store';

import ThemeContext from './shared/ThemeContext';
import Clock from './shared/Clock';

store.subscribe(() => {
  console.log('Counter:', store.getState());
});

class AboutSection extends Component {
  componentDidMount() {
    // The modern app is wrapped in StrictMode,
    // but the legacy bits can still use old APIs.
    findDOMNode(this);
  }
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => (
          <div style={{border: '1px dashed black', padding: 20}}>
            <h3>src/legacy/Greeting.js</h3>
            <h4 style={{color: theme}}>
              This component is rendered by the nested React ({React.version}).
            </h4>
            <Clock />
            <p>
              Counter: {this.props.counter}{' '}
              <button onClick={() => this.props.dispatch({type: 'increment'})}>
                +
              </button>
            </p>
            <b>
              <Link to="/">Go to Home</Link>
            </b>
          </div>
        )}
      </ThemeContext.Consumer>
    );
  }
}

function mapStateToProps(state) {
  return {counter: state};
}

export default connect(mapStateToProps)(AboutSection);