import { ProgressBarTextOption } from '../Types';

export interface IProgressBarWithTextProps{
    value?: number | undefined | null
    valuePercentage?: number | undefined | null
    valueMax?: number | null
    textShowOption?: ProgressBarTextOption | null
}

export default function ProgressBarWithText(props: IProgressBarWithTextProps) {
    // if (props.textShowOption == null || props.textShowOption == ProgressBarTextOption.None){
	// 	return ShowProgressBar(props.value, props.valueMax); 
	// }
	// return (
	// 	<div className={'progress-container' + (HasValue(props.value) ? '' : ' has-text-black')} data-text={GetValue(props.value, props.valueMax, props.textShowOption)}>{ShowProgressBar(props.value, props.valueMax)}</div>
	// )
	const valueMax = props.valueMax ?? 100;
    // if (props.textShowOption == null || props.textShowOption == ProgressBarTextOption.None){
		
	// }
	return (
		<div className="progress w-100" role="progressbar" aria-label="Example with label" aria-valuenow={HasValue(props.value) ? props.value : valueMax} aria-valuemin={0} aria-valuemax={valueMax}>
			{/* <div className="progress-bar" style={{width: `${GetPercentage(props.value, valueMax)}%`}}>{GetValue(props.value, props.valueMax, props.textShowOption ?? ProgressBarTextOption.None)}</div> */}
			<div className={'progress-bar' + ((props.value == null ? ' progress-bar-striped bg-secondary' : ''))} style={{width: `${props.valuePercentage ?? 100}%`}}>{GetValue(props.value, props.valueMax, props.textShowOption ?? ProgressBarTextOption.None)}</div>
		</div>
	)
	// return (
	// 	<div className={'progress-container' + (HasValue(props.value) ? '' : ' has-text-black')} data-text={GetValue(props.value, props.valueMax, props.textShowOption)}>{ShowProgressBar(props.value, props.valueMax)}</div>
	// )
}

function HasValue(value: number | undefined | null){
	return value != undefined && value != null;
}

function GetValue(value: number | undefined | null, valueMax: number | undefined | null, textShowOption: ProgressBarTextOption | null){
	valueMax ??= 100;
	const noValue = '——//——';
	switch (textShowOption) {
		case ProgressBarTextOption.Percentage:
			// return ((HasValue(value) ? value : 0) / valueMax) + '%';
			return HasValue(value) ? (value  / valueMax * 100) +  '%' : noValue;
		case ProgressBarTextOption.Fraction:
			return HasValue(value) ? (value ?? valueMax) +  '/' + valueMax : noValue;
		// case None:
			
		// 	break;
	
		default:
			return '';
			// break;
	}
}