import React from "react"
import Loader from "../loader/loader"
import PropTypes from "prop-types"
import { Map, List } from "immutable"

import { OverlayTrigger, Tooltip } from "react-bootstrap"

const Modules = (props) => {
  if (props.isLoading) {
    return <Loader />
  }

  return (
    <div>
      <h2>Modules</h2>
      {props.modules && props.modules.keySeq().map((value, key) => (
        <ModulesByVideoType
          key={key}
          videoType={value}
          data={props.modules.get(value)}
        />
      ))}
    </div>
  );
}
Modules.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  modules: PropTypes.instanceOf(Map),
};
export default Modules;

const capitalize = (string) =>
  string.charAt(0).toUpperCase() + string.slice(1);

const ModulesByVideoType = (props) => (
  <div className="col-md-6 col-xs-12">
    <div className="panel panel-default">
      <div className="panel-heading">
        <h3 className="panel-title">
          {capitalize(props.videoType)} {/* Movie or Show */}
        </h3>
      </div>
      <div className="panel-body">
        {props.data.keySeq().map((value, key) => (
          <ModuleByType
            key={key}
            type={value}
            data={props.data.get(value)}
          />
        ))}
      </div>
    </div>
  </div>
);
ModulesByVideoType.propTypes = {
  videoType: PropTypes.string.isRequired,
  data: PropTypes.instanceOf(Map),
};

const ModuleByType = (props) => (
  <div className="col-md-3 col-xs-6">
    <h4>{props.type}  {/* Detailer / Explorer / ... */}</h4>
    <table className="table">
      <tbody>
        {props.data.map(function(value, key) {
          return (
            <Module
              key={key}
              type={key}
              data={value}
            />
          );
        })}
      </tbody>
    </table>
  </div>
);
ModuleByType.propTypes = {
  type: PropTypes.string.isRequired,
  data: PropTypes.instanceOf(List),
};

const Module = (props) => {
  let iconClass, prettyStatus, labelClass;
  const name = props.data.get("name");

  switch(props.data.get("status")) {
    case "ok":
      iconClass = "fa fa-check-circle"
      labelClass = "label label-success"
      prettyStatus = "OK"
      break;
    case "fail":
      iconClass = "fa fa-times-circle"
      labelClass = "label label-danger"
      prettyStatus = "Fail"
      break;
    case "not_implemented":
      iconClass = "fa fa-question-circle"
      labelClass = "label label-default"
      prettyStatus = "Not implemented"
      break;
    default:
      iconClass = "fa fa-question-circle"
      labelClass = "label label-warning"
      prettyStatus = "Unknown"
  }

  const tooltip = (
    <Tooltip id={`tooltip-status-${name}`}>
      <p><span className={labelClass}>Status: {prettyStatus}</span></p>
      <p>Error: {props.data.get("error")}</p>
    </Tooltip>
  );

  return (
    <tr>
      <th>{name}</th>
      <td>
        <OverlayTrigger placement="right" overlay={tooltip}>
          <span className={labelClass}>
            <i className={iconClass}></i> {prettyStatus}
          </span>
        </OverlayTrigger>
      </td>
    </tr>
  );
}
Module.propTypes = {
  data: PropTypes.instanceOf(Map),
};