<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
</html>
/** @jsx h */
import { Component, h } from 'preact';
import SystemComponentView from './SystemComponentView.jsx';
import './SystemComponentsView.css';

class SystemComponentsView extends Component {
  render() {
    if (this.props.collapsed) {
      return this.renderCollapsed();
    } else {
      return this.renderExpanded();
    }
  }

  renderCollapsed() {
    return (
      <div className="system-components collapsed">
        ...
      </div>
    );
  }

  renderExpanded() {
    return (
      <div className="system-components row">
        <div className="col-sm-3">
          <SystemComponentView
            type="APP_SERVER"
            status="WORKING">
              {this.props.spec.short_program_name}
              {' '}
              <br class="hidden-xs" />
              application server
          </SystemComponentView>
        </div>

        <div className="col-sm-1">
          {this.buildDivider()}
        </div>

        <div className="col-sm-4">
          <SystemComponentView
            type="PREPARATION_WORK"
            status={this.getPreparationWorkStatus()}>
              Preparation work
              {' '}
              <br class="hidden-xs" />
              before executing the app
          </SystemComponentView>
        </div>

        <div className="col-sm-1">
          {this.buildDivider()}
        </div>

        <div className="col-sm-3">
          <SystemComponentView
            type="APP"
            status={this.getWebAppStatus()}>
              Web
              {' '}
              <br class="hidden-xs" />
              application
          </SystemComponentView>
        </div>
      </div>
    );
  }

  /**
   * Returns the general system status. Only two results are possible:
   * 'preparation-error': preparation error, app not reached
   * 'app-error': preparation done, app error
   */
  getGeneralSystemStatus() {
    const journey = this.props.spec.journey;
    if (journey.steps.SUBPROCESS_APP_LOAD_OR_EXEC
     && journey.steps.SUBPROCESS_APP_LOAD_OR_EXEC.state === 'STEP_ERRORED')
    {
      return 'app-error';
    }
    if (journey.steps.SUBPROCESS_LISTEN
     && journey.steps.SUBPROCESS_LISTEN.state === 'STEP_ERRORED')
    {
      return 'app-error';
    }
    return 'preparation-error';
  }

  getPreparationWorkStatus() {
    if (this.getGeneralSystemStatus() === 'app-error') {
      return 'DONE';
    } else {
      return 'ERROR';
    }
  }

  getWebAppStatus() {
    if (this.getGeneralSystemStatus() === 'app-error') {
      return 'ERROR';
    } else {
      return 'NOT_REACHED';
    }
  }

  buildDivider() {
    return (
      <div className="divider">
        <span className="glyphicon glyphicon-menu-right hidden-xs" aria-hidden="true"></span>
        <div className="visible-xs"></div>
      </div>
    )
  }
}

export default SystemComponentsView;
