import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { ProgressBar } from '..';
import HoverMarquee from '../HoverMarquee';
import StartedIcon from '../../assets/images/StartedIcon.svg';
import ModifiedIcon from '../../assets/images/ModifiedIcon.svg';
import FinishedIcon from '../../assets/images/FinishedIcon.svg';
import ExportedIcon from '../../assets/images/ExportedIcon.svg';

const formatDate = dateString => dateString && new Date(dateString).toLocaleString(undefined);

const SessionCard = props => {
  const {
    caseId,
    startedAt,
    updatedAt,
    finishedAt,
    exportedAt,
    protocolName,
    progress,
    selected,
    onClickHandler
  } = props;
  const modifierClasses = cx('session-card', {
    'session-card--clickable': onClickHandler
  }, {
    'session-card--selected': selected
  });
  return /*#__PURE__*/React.createElement("div", {
    className: modifierClasses,
    onClick: onClickHandler
  }, /*#__PURE__*/React.createElement("div", {
    className: "main-wrapper"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "card__label"
  }, /*#__PURE__*/React.createElement(HoverMarquee, null, caseId)), /*#__PURE__*/React.createElement("h5", {
    className: "card__protocol"
  }, /*#__PURE__*/React.createElement(HoverMarquee, null, protocolName || /*#__PURE__*/React.createElement("span", {
    className: "highlight"
  }, "Unavailable protocol!")))), /*#__PURE__*/React.createElement("div", {
    className: "meta-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "meta"
  }, /*#__PURE__*/React.createElement("h6", {
    className: "meta-wrapper__attribute"
  }, /*#__PURE__*/React.createElement(HoverMarquee, null, /*#__PURE__*/React.createElement("img", {
    src: StartedIcon,
    alt: "Interview started at"
  }), startedAt ? formatDate(startedAt) : /*#__PURE__*/React.createElement("span", {
    className: "highlight"
  }, "No start date!"))), /*#__PURE__*/React.createElement("h6", {
    className: "meta-wrapper__attribute"
  }, /*#__PURE__*/React.createElement(HoverMarquee, null, /*#__PURE__*/React.createElement("img", {
    src: ModifiedIcon,
    alt: "Interview modified at"
  }), updatedAt ? formatDate(updatedAt) : /*#__PURE__*/React.createElement("span", {
    className: "highlight"
  }, "Never changed!")))), /*#__PURE__*/React.createElement("div", {
    className: "meta"
  }, /*#__PURE__*/React.createElement("div", {
    className: "progress-wrapper"
  }, /*#__PURE__*/React.createElement("img", {
    src: FinishedIcon,
    alt: "Interview finished at"
  }), progress === 100 && finishedAt ? /*#__PURE__*/React.createElement("span", null, formatDate(finishedAt)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, ' ', progress, "%"), /*#__PURE__*/React.createElement(ProgressBar, {
    percentProgress: progress,
    orientation: "horizontal"
  }))), /*#__PURE__*/React.createElement("h6", {
    className: "meta-wrapper__attribute"
  }, /*#__PURE__*/React.createElement(HoverMarquee, null, /*#__PURE__*/React.createElement("img", {
    src: ExportedIcon,
    alt: "Interview exported at"
  }), exportedAt ? formatDate(exportedAt) : /*#__PURE__*/React.createElement("span", {
    className: "highlight"
  }, "Not yet exported"))))));
};

SessionCard.defaultProps = {
  onClickHandler: undefined,
  protocolName: null,
  selected: false,
  finishedAt: null,
  exportedAt: null
};
SessionCard.propTypes = {
  caseId: PropTypes.string.isRequired,
  startedAt: PropTypes.string.isRequired,
  // Expects ISO 8601 datetime string
  updatedAt: PropTypes.string.isRequired,
  // Expects ISO 8601 datetime string
  finishedAt: PropTypes.string,
  // Expects ISO 8601 datetime string
  exportedAt: PropTypes.string,
  // Expects ISO 8601 datetime string
  protocolName: PropTypes.string,
  progress: PropTypes.number.isRequired,
  selected: PropTypes.bool,
  onClickHandler: PropTypes.func
};
export default SessionCard;