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 '';
	}
}