import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styles from './style.css';

import JustShowTheStuff from 'example/components/JustShowTheStuff';
import ThingsToDoArea from 'example/components/ThingsToDoArea';
import { collapseStuff, collapseToDoItems, getThingsToDo, loadStuff } from 'example/redux/actions';

class OldClassComponent extends Component {
    constructor(props) {
        super(props);
        this.handleEscKeyDown = handleEscKeyDown.bind(this)
        this.handleStuffClick = handleStuffClick.bind(this)
        this.handleSubmit = handleSubmit.bind(this)
        this.handleToDoItemClick = handleToDoItemClick.bind(this)
    }

    componentDidMount() {
        this.props.loadStuff(
            this.props.stuffSlug
        )

        this.props.getThingsToDo(
            this.props.toDoItemId
        )

        window.addEventListener('keydown', this.handleEscKeyDown)
    }

    componentWillUnmount() {
        window.removeEventListener('keydown', this.handleEscKeyDown)
    }

    render() {
        const canRenderStuff = this.props.stuff != null && typeof this.props.stuff === "object";
        const canRenderThingsToDo = this.props.thingsToDo != null && Array.isArray(this.props.thingsToDo);

        return (
            <div className={styles.stretchyLikeSuspenders}>
                <h2 className={styles.bolderPlease}>Look at this dashboard!</h2>
                {canRenderStuff && (
                    <JustShowTheStuff
                        theStuff={this.props.stuff}
                        handleStuffClick={this.handleStuffClick}
                        handleSubmit={this.handleSubmit}
                    />
                )}
                {canRenderThingsToDo && (
                    <ThingsToDoArea
                        things={this.props.thingsToDo}
                        handleToDoItemClick={this.handleToDoItemClick}
                    />
                )}
            </div>
        )
    }
}

function handleEscKeyDown(event) {
    if (event.keyCode === 27) {
        this.props.collapseStuff();
        this.props.collapseToDoItems();
    }
}

function handleStuffClick(e) {
    // do some stuff
}

function handleSubmit(e) {
    // do some stuff
}

function handleToDoItemClick(e) {
    // do some stuff
}

OldClassComponent.defaultProps = {
    stuff: null,
    things: null,
};

OldClassComponent.propTypes = {
    stuff: PropTypes.object,
    stuffSlug: PropTypes.string.isRequired,
    thingsToDo: PropTypes.array,
    toDoItemId: PropTypes.string.isRequired,
};


function mapStateToProps(state) {
    return {
        stuff: state.stuff.data,
        stuffSlug: state.stuff.id,
        thingsToDo: state.thingsToDo.displayData,
        toDoItemId: state.thingsToDo.itemSlug,
    };
};

const mapActionsToProps = {
    collapseStuff,
    collapseToDoItems,
    getThingsToDo,
    loadStuff,
};

export default connect(mapStateToProps, mapActionsToProps)(OldClassComponent);