import React from 'react'
import PropTypes from 'prop-types'

import './Incident.css'
import Stage from './Stage'
import ms from 'ms'

const OUTAGE_TYPES = {
  major_outage: 'Major Outage',
  outage: 'Outage',
  partial_outage: 'Partial Outage',
  degraded_service: 'Degraded Service',
}

const Incident = ({ incident }) => {
  const { content, end_date: end, start_date: start, title, type, stages } = incident
  const ago = ms(Date.now() - start * 1000)
  const agoEnd = end ? ms(Date.now - end * 1000) : null

  const stageNodes = stages.map(
    (stage) => <Stage key={stage.title} stage={stage}/>
  ).reverse() // show newest first

  return (
    <div className="incident">
      <h2>{OUTAGE_TYPES[type] || type}: {title}</h2>
      <p>{content}</p>
      <footer>
        Started {ago} ago
        {end ? `, ended ${agoEnd} ago` : null}
      </footer>
      {stageNodes.length
        ? (
          <div className="stages">
            {stageNodes}
          </div>
        )
        : null
      }
    </div>
  )
}

Incident.propTypes = {
  incident: PropTypes.shape({
    content: PropTypes.string,
    end_date: PropTypes.number,
    start_date: PropTypes.number,
    title: PropTypes.string,
    type: PropTypes.string,
    stages: PropTypes.array,
  }),
}

export default Incident