import Header from './header';
import Sidebar from './sidebar';
import Content from './content';
import Footer from './footer';

export default function Page( props ) {
	const AppSidebar = () => {
		if ( ! props.sidebar ) {
			return;
		}
		return (
			<Sidebar>
				{ props.sidebar }
			</Sidebar>
		);
	},
	AppFooter = () => {
		if ( ! props.footer ) {
			return;
		}
		return (
			<Footer>
				{ props.footer }
			</Footer>
		);
	};

	return (
		<div className={ `eps-app__lightbox ${ props.className }` }>
			<div className="eps-app">
				<Header title={ props.title } buttons={ props.headerButtons } titleRedirectRoute={ props.titleRedirectRoute } onClose={ () => props.onClose?.() } />
				<div className="eps-app__main">
					{ AppSidebar() }
					<Content>
						{ props.content }
					</Content>
				</div>
				{ AppFooter() }
			</div>
		</div>
	);
}

Page.propTypes = {
	title: PropTypes.string,
	titleRedirectRoute: PropTypes.string,
	className: PropTypes.string,
	headerButtons: PropTypes.arrayOf( PropTypes.object ),
	sidebar: PropTypes.object,
	content: PropTypes.object.isRequired,
	footer: PropTypes.object,
	onClose: PropTypes.func,
};

Page.defaultProps = {
	className: '',
};