import React from 'react';
import classNames from 'classnames';

const statusColorMap = {
  null: 'text-grey-light',
  error: 'text-red-light',
  queued: 'text-orange-light',
  running: 'text-blue-light',
  success: 'text-green-light'
};

const statusTextMap = {
  null: 'This task has never been scheduled',
  error: 'Last execution of this task failed',
  queued: 'This task is currently queued',
  running: 'This task is running',
  success: 'Last execution of this task succeeded'
};

export default function({ status, message, inline, size }) {
  if (status === undefined) return null;
  const svgClassNames = classNames({
    'w-6': size !== 'small',
    'h-6': size !== 'small',
    'w-4': size === 'small',
    'h-4': size === 'small',
    'fill-current': true,
    [statusColorMap[status]]: true
  });

  return (
    <div
      className={classNames({ inline })}
      title={message || statusTextMap[status]}
    >
      <svg className={svgClassNames} viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" />
      </svg>
    </div>
  );
}

@@ -227,16 +227,50 @@
 n-light'
+,%0A  interrupted: 'text-grey-light'
 %0A%7D;%0A%0Acon
@@ -511,16 +511,68 @@
 cceeded'
+,%0A  interrupted: 'Interrupted during last execution'
 %0A%7D;%0A%0Aexp
@@ -997,16 +997,47 @@
 %5Bstatus%5D
+ %7C%7C %60Unknown status: $%7Bstatus%7D%60
 %7D%0A    %3E%0A

make status grey for interrupted tasks and add tooltip