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

import PageContainerHeader from './page-container-header'
import PageContainerFooter from './page-container-footer'

export default class PageContainer extends Component {

  static propTypes = {
    // PageContainerHeader props
    title: PropTypes.string.isRequired,
    subtitle: PropTypes.string,
    onClose: PropTypes.func,
    showBackButton: PropTypes.bool,
    onBackButtonClick: PropTypes.func,
    backButtonStyles: PropTypes.object,
    backButtonString: PropTypes.string,
    // Content props
    ContentComponent: PropTypes.func,
    contentComponentProps: PropTypes.object,
    // PageContainerFooter props
    onCancel: PropTypes.func,
    cancelText: PropTypes.string,
    onSubmit: PropTypes.func,
    submitText: PropTypes.string,
    disabled: PropTypes.bool,
  };

  render () {
    const {
      title,
      subtitle,
      onClose,
      showBackButton,
      onBackButtonClick,
      backButtonStyles,
      backButtonString,
      ContentComponent,
      contentComponentProps,
      onCancel,
      cancelText,
      onSubmit,
      submitText,
      disabled,
    } = this.props

    return (
      <div className="page-container">
        <PageContainerHeader
          title={title}
          subtitle={subtitle}
          onClose={onClose}
          showBackButton={showBackButton}
          onBackButtonClick={onBackButtonClick}
          backButtonStyles={backButtonStyles}
          backButtonString={backButtonString}
        />
        <div className="page-container__content">
          <ContentComponent { ...contentComponentProps } />
        </div>
        <PageContainerFooter
          onCancel={onCancel}
          cancelText={cancelText}
          onSubmit={onSubmit}
          submitText={submitText}
          disabled={disabled}
        />
      </div>
    )
  }

}