/** @jsx h */
import { Component, h, render } from 'preact';
import Tabs from './Tabs.jsx';
import Tab from './Tab.jsx';
import SystemComponentsView from './SystemComponentsView.jsx';
import SummaryView from './SummaryView.jsx';
import ProblemDescriptionView from './ProblemDescriptionView.jsx';
import SolutionDescriptionView from './SolutionDescriptionView.jsx';
import GetHelpView from './GetHelpView.jsx';
import DetailsView from './DetailsView.jsx';

class PageMain extends Component {
  constructor() {
    super();
    this.state = { systemComponentsViewCollapsed: false };
    this.Preact = {
      Component: Component,
      h: h,
      render: render
    };
    this.Components = {
      Tabs: Tabs,
      Tab: Tab
    };
    this._extraTabs = [];

    if (window.localStorage) {
      this.state.systemComponentsViewCollapsed =
        window.localStorage.getItem('_passenger_error_page_system_components_collapsed')
        === 'true';
    }
  }

  render() {
    return (
      <div>
        <div className="page-title-container container">
          <h1 className="page-title">Error starting web application</h1>
        </div>

        <div className="page-system-components-container">
          <div className="collapse-button">
            {this._renderCollapseButton()}
          </div>
          <div class="container">
            <SystemComponentsView spec={this.props.spec} collapsed={this.state.systemComponentsViewCollapsed} />
          </div>
        </div>

        <div className="page-main container">
          <Tabs className="page-main-tabs" defaultActiveKey="problem-description" ref={ (x) => { this.tabs = x } }>
            <Tab eventKey="problem-description" title="What happened?">
              <p />
              <ProblemDescriptionView spec={this.props.spec} />
            </Tab>
            <Tab eventKey="solution-description" title="How do I solve this?">
              <p />
              <SolutionDescriptionView spec={this.props.spec} />
            </Tab>
            {this._renderExtraTabs()}
            <Tab eventKey="get-help" title="Get help">
              <p />
              <GetHelpView spec={this.props.spec} />
            </Tab>
            <Tab eventKey="details" title="Detailed diagnostics">
              <p />
              <DetailsView spec={this.props.spec} />
            </Tab>
          </Tabs>
        </div>
        <footer>
            <div>This website is powered by <a href="https://www.phusionpassenger.com"><b>Phusion Passenger</b></a>&reg;, the smart application server built by <b>Phusion</b>&reg;.</div>
        </footer>
      </div>
    );
  }

  addExtraTab(key, title, component) {
    this._extraTabs.push({
      key: key,
      title: title,
      component: component
    });
  }

  setActiveTab(key) {
    this.tabs.setActiveKey(key);
  }


  _renderCollapseButton() {
    if (this.state.systemComponentsViewCollapsed) {
      return (
        <a href="javascript:void(0)" onClick={this._handleExpandSystemComponentsView.bind(this)}>Expand</a>
      );
    } else {
      return (
        <a href="javascript:void(0)" onClick={this._handleCollapseSystemComponentsView.bind(this)}>Collapse</a>
      );
    }
  }

  _renderExtraTabs() {
    return this._extraTabs.map(function(spec) {
      return (
        <Tab eventKey={spec.key} title={spec.title}>
          {spec.component}
        </Tab>
      );
    });
  }

  _handleExpandSystemComponentsView() {
    this.setState({ systemComponentsViewCollapsed: false });
    if (window.localStorage) {
      try {
        window.localStorage.setItem('_passenger_error_page_system_components_collapsed', 'false');
      } catch (e) {
        // Do nothing
      }
    }
  }

  _handleCollapseSystemComponentsView() {
    this.setState({ systemComponentsViewCollapsed: true });
    if (window.localStorage) {
      try {
        window.localStorage.setItem('_passenger_error_page_system_components_collapsed', 'true');
      } catch (e) {
        // Do nothing
      }
    }
  }
}

export default PageMain;