import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ns from '../config/css-ns';
import WindowTopBar from '../containers/WindowTopBar';
import WindowMiddleContent from '../containers/WindowMiddleContent';
import ThumbnailNavigation from '../containers/ThumbnailNavigation';

/**
 * Represents a Window in the mirador workspace
 * @param {object} window
 */
export class Window extends Component {
  /**
   * Renders things
   */
  render() {
    const { manifest, window, layout } = this.props;
    if (!window) return <></>;

    return (
      <div id={window.id} className={ns('window')}>
        <WindowTopBar
          layout={layout}
          windowId={window.id}
          manifest={manifest}
        />
        <WindowMiddleContent
          window={window}
          manifest={manifest}
          sideBarOpen={window.sideBarOpen}
        />
        <div className={ns('companion-bottom')}>
          <ThumbnailNavigation
            window={window}
            manifest={manifest}
          />
        </div>
      </div>
    );
  }
}

Window.propTypes = {
  window: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  layout: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};

Window.defaultProps = {
  window: null,
  manifest: null,
  layout: null,
};