import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const GridOverlayWrapper = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    z-index: 10000;
    display: ${props => props.visible ? 'block' : 'none'}
`;

class GridOverlay extends Component {
    constructor(props) {
        const { config } = props;
        super();

        this.state = {
            config,
            visible: false
        };

        this.onKeyUp = this.onKeyUp.bind(this);
        this.onKeyDown = this.onKeyDown.bind(this);
    }

    componentDidMount() {
        window.addEventListener('keyup', this.onKeyUp, false);
        window.addEventListener('keydown', this.onKeyDown, false);
    }

    componentWillUnmount() {
        window.removeEventListener('keyup', this.onKeyUp, false);
        window.removeEventListener('keydown', this.onKeyDown, false);
    }

    onKeyUp(e) {
        console.log(e);
        this.setState({
            commandPressed: false
        });
    }

    onKeyDown(e) {
        console.log(e);
        this.setState({
            commandPressed: true
        });
    }

    render() {
        return (
            <GridOverlayWrapper visible={this.state.visible}>
                I am GridOverlay
            </GridOverlayWrapper>
        )
    }
}

GridOverlay.propTypes = {
    config: PropTypes.shape({
        breakpoints: PropTypes.array.isRequired
    }).isRequired
};

export default GridOverlay;