import React, { Component } from "react";
import { Link } from "react-router-dom";
import classnames from "classnames";

import { Elapsed, formatTime } from "./elapsed";
import { default as Status, StatusText } from "shared/components/status";

import styles from "./procs.less";

const renderEnviron = data => {
  return (
    <div>
      {data[0]}={data[1]}
    </div>
  );
};

class ProcListHolder extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { open: !this.props.renderName };
  }

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { vars, renderName, children } = this.props;
    const groupExpandStatus = this.state.open
      ? styles.collapsed
      : styles.expanded;

    return (
      <div className={styles.list}>
        {renderName ? (
          <div
            onClick={this.toggleOpen}
            className={`${styles.group} ${groupExpandStatus}`}
          >
            <StatusText status={vars.state} text={vars.name} />
          </div>
        ) : null}
        {vars.environ ? (
          <div
            onClick={this.toggleOpen}
            className={`${styles.group} ${groupExpandStatus}`}
          >
            <StatusText
              status={vars.state}
              text={Object.entries(vars.environ).map(renderEnviron)}
            />
          </div>
        ) : null}
        <div className={!this.state.open ? styles.hide : ""}>{children}</div>
      </div>
    );
  }
}

export class ProcList extends Component {
  render() {
    const { repo, build, rootProc, selectedProc } = this.props;
    return (
      <ProcListHolder vars={rootProc} renderName={build.procs.length > 1}>
        {this.props.rootProc.children.map(function(child) {
          return (
            <Link
              to={`/${repo.full_name}/${build.number}/${child.pid}`}
              key={`${repo.full_name}-${build.number}-${child.pid}`}
            >
              <ProcListItem
                key={child.pid}
                name={child.name}
                start={child.start_time}
                finish={child.end_time}
                state={child.state}
                selected={child.pid === selectedProc.pid}
              />
            </Link>
          );
        })}
      </ProcListHolder>
    );
  }
}

export const ProcListItem = ({ name, start, finish, state, selected }) => (
  <div className={classnames(styles.item, selected ? styles.selected : null)}>
    <h3>{name}</h3>
    {finish ? (
      <time>{formatTime(finish, start)}</time>
    ) : (
      <Elapsed start={start} />
    )}
    <div>
      <Status status={state} />
    </div>
  </div>
);
