import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles'

import Layout from 'react-uikit/layout'
import Header from 'containers/header'
import Nav from 'containers/nav'

const bem = new BEMModule(styles)

const PrivateLayout = ({app, children, className}) => {
    const classes = bem.classNames('c-layout', className, {
        private: true,
        'nav-expanded': app.nav.isOpen,
    })
    const headerClasses = bem.classNames('c-layout__header')
    const navClasses = bem.classNames('c-layout__nav')
    const innerClasses = bem.classNames('c-layout__inner')

    return (
        <Layout.Flex className={classes}>
            <Header className={headerClasses} />
            <Nav className={navClasses} />

            <div className={innerClasses}>{children}</div>
        </Layout.Flex>
    )
}

PrivateLayout.propTypes = {
    app: PropTypes.shape({
        nav: PropTypes.shape({
            isOpen: PropTypes.bool,
        }).isRequired,
        title: PropTypes.string.isRequired,
    }).isRequired,
    children: PropTypes.node,
    className: PropTypes.string,
    user: PropTypes.object,
}

export default PrivateLayout