import React from 'react';
import Css from './time-passed.module.css';
import { RedmineTypes } from '../redmine-types';

export type Params = {
  fromIssue?: {
    issue: RedmineTypes.ExtendedIssue;
    keyName: string;
  };
  fromValue?: string;
};

export type Props = {
  params: Params;
};

export const TimePassed = (props: Props): JSX.Element => {
  if (!props.params.fromIssue && !props.params.fromValue) {
    return <></>;
  }
  let timePassedClassName = ''; // TODO
  if (props.params.fromIssue) {
    const { issue, keyName } = props.params.fromIssue;
    timePassedClassName = `${Css.timepassedDot} ${getClassName(
      issue[keyName],
    )}`;
  } else if (props.params.fromValue) {
    timePassedClassName = `${Css.timepassedDot} ${getClassName(
      props.params.fromValue,
    )}`;
  }
  return <span className={timePassedClassName}></span>;
};

function getClassName(value: string): string {
  switch (value) {
    case 'hot':
      return Css.hot;
    case 'warm':
      return Css.warm;
    case 'comfort':
      return Css.comfort;
    case 'breezy':
      return Css.breezy;
    case 'cold':
      return Css.cold;
    default:
      return '';
  }
}
