import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Grid, Row, Col, ProgressBar } from 'patternfly-react';
import { translate as __ } from 'foremanReact/common/I18n';
import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
import { timeInWords } from './TaskHelper';

class TaskInfo extends Component {
  isDelayed = () => {
    const startAt = new Date(this.props.startAt);
    const startedAt = new Date(this.props.startedAt);
    startAt.setMilliseconds(0);
    startedAt.setMilliseconds(0);
    return startAt.getTime() !== startedAt.getTime();
  };
  resultIcon = () => {
    if (this.props.state !== 'stopped') return 'task-status pficon-help';
    const { result } = this.props;
    let icon;
    switch (result) {
      case 'success':
        icon = 'pficon-ok';
        break;
      case 'error':
        icon = 'pficon-error-circle-o';
        break;
      case 'warning':
        icon = 'pficon-ok status-warn';
        break;
      default:
        icon = 'pficon-help';
        break;
    }
    return `task-status ${icon}`;
  };

  progressBarType = () => {
    const { result } = this.props;
    switch (result) {
      case 'error':
        return 'danger';
      case 'success':
        return 'success';
      case 'warning':
        return 'warning';
      default:
        return null;
    }
  };

  render() {
    const {
      action,
      endedAt,
      result,
      startAt,
      startBefore,
      startedAt,
      state,
      help,
      output,
      error,
      progress,
      username,
      usernamePath,
    } = this.props;

    const details = [
      [
        {
          title: 'Name',
          value: (
            <EllipsisWithTooltip>{action || __('N/A')}</EllipsisWithTooltip>
          ),
        },
        { title: 'Start at', value: timeInWords(startAt) },
      ],
      [
        {
          title: 'Result',
          value: (
            <React.Fragment>
              <i className={this.resultIcon()} />
              <span> {result}</span>
            </React.Fragment>
          ),
        },
        { title: 'Started at', value: timeInWords(startedAt) },
      ],
      [
        {
          title: 'Triggered by',
          value: (usernamePath || '').includes('href') ? (
            <a href={usernamePath.split('"')[1]}>{username}</a>
          ) : (
            username || ''
          ),
        },
        { title: 'Ended at', value: timeInWords(endedAt) },
      ],
      [
        {
          title: 'Execution type',
          value: __(this.isDelayed() ? 'Delayed' : 'Immediate'),
        },
        {
          title: 'Start before',
          value: startBefore ? timeInWords(startBefore) : '-',
        },
      ],
    ];
    return (
      <Grid>
        <br />
        {details.map((items, key) => (
          <Row key={key}>
            <Col md={2} sm={6}>
              <span className="list-group-item-heading">
                {__(items[0].title)}:
              </span>
            </Col>
            <Col md={5} sm={6}>
              <span>{items[0].value}</span>
            </Col>
            <Col md={2} sm={6}>
              <span className="list-group-item-heading">
                {__(items[1].title)}:
              </span>
            </Col>
            <Col md={3} sm={6}>
              {items[1].value}
            </Col>
          </Row>
        ))}
        <br />
        <Row>
          <Col xs={6}>
            <div className="progress-description">
              <span className="list-group-item-heading">{__('State')}: </span>
              {state}
            </div>
          </Col>
          <Col xs={3} xsOffset={3} className="progress-label-top-right">
            <span>{`${progress}% ${__('Complete')}`}</span>
          </Col>
          <Col xs={12}>
            <ProgressBar
              now={progress}
              bsStyle={this.progressBarType()}
              striped
            />
          </Col>
        </Row>
        <br />
        {help && (
          <Row>
            <Col xs={12}>
              <p>
                <span>
                  <b>{__('Troubleshooting')}</b>
                </span>
              </p>
              <p>
                {help.split('\n').map((item, i) => (
                  <React.Fragment key={i}>
                    {item}
                    <br />
                  </React.Fragment>
                ))}
              </p>
            </Col>
          </Row>
        )}
        {output && output.length > 0 && (
          <Row>
            <Col xs={12}>
              <p>
                <span>
                  <b>{__('Output:')}</b>
                </span>
              </p>
              <pre>{output}</pre>
            </Col>
          </Row>
        )}
        {error && error.length > 0 && (
          <Row>
            <Col xs={12}>
              <div>
                <span>
                  <b>{__('Errors:')}</b>
                </span>
              </div>
              <pre>{error}</pre>
            </Col>
          </Row>
        )}
      </Grid>
    );
  }
}

TaskInfo.propTypes = {
  action: PropTypes.string,
  endedAt: PropTypes.string,
  result: PropTypes.string,
  startAt: PropTypes.string,
  startBefore: PropTypes.string,
  startedAt: PropTypes.string,
  state: PropTypes.string,
  help: PropTypes.string,
  error: PropTypes.array,
  progress: PropTypes.number,
  username: PropTypes.string,
  usernamePath: PropTypes.string,
  output: PropTypes.PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.shape({}),
  ]),
};

TaskInfo.defaultProps = {
  action: '',
  endedAt: '',
  result: 'error',
  startAt: '',
  startBefore: '',
  startedAt: '',
  state: '',
  help: '',
  error: [],
  progress: 0,
  username: '',
  usernamePath: '',
  output: '',
};

export default TaskInfo;