import React from 'react';
import { connect } from 'react-redux';

import { resizeWindow } from './Reducers/Device/Actions';
import PropTypes from 'prop-types';

class Frame extends React.Component {
    static propTypes = {
        resize: PropTypes.func,
        orientation: PropTypes.string,
        children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    };

    componentDidMount() {
        window.addEventListener('resize', this.props.resize);
    }

    render() {
        const className = ['frame'];
        className.push(this.props.orientation);
        return (
            <div className={className.join(' ')} id="frame">
                {this.props.children}
            </div>
        );
    }
}
const mapStateToProps = state => ({
    orientation: state.device.screen.orientation,
});

const mapDispatchToProps = dispatch => ({
    resize: () => dispatch(resizeWindow()),
});

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