@using Sandbox;
@using Sandbox.UI;

<style>
	ProgressBarRazor
	{
		//position: absolute;
		//padding: 4px;
		background-color: gray;
		// border-style: solid;
		border: 2px solid;
		border-radius: 10px;
		border-color: black;
		/*Align-content: center;*/
		//align-items:flex-end;
		width : 400px;
		height : 50px;

		.stacker
		{
			position : relative;
			// padding : 2px;
			justify-content: space-evenly;
			align-items: stretch;
			flex-grow: 1;
			overflow: visible;
		}

		.textSay
		{
			position : absolute;
			align-items : center;
			/*justify-content : center;*/
			// justify-content: space-evenly;
			/*left: 200px;*/
			// left:0;
			// right:0;
			flex-grow:1;
			color:white;
			//font-size: 3rem;
			//font-size-adjust: 0.5;
			overflow: visible;
			>p
			{

			}
		}

		.bar
		{
			//justify-content : center;
			//padding: 2px;
			border-radius: 10px;
			width:100%;
			height:100%;
			background-color: red;
		}
	}
</style>

<root style="width: @(Width)px;height : @(Height)px; background-color: rgba(@(BgColor), 0.75); border-color: @BgBorderColor">
	<div >
		<div class="stacker">
			<!--<div class="bar" style="width:@(Value)%;"/>-->
			<!--Bug! percent makes it not linear wtf, I gave up!-->
			<div class="bar" style="width:@(Width * (Value/100)); background-color: @(BarColor)"/>
			<!--<div class="bar" style="width:@(Value)rem;"/>-->
			@if(ShowText){
				<div class="textSay" style="color: @(TextColor); text-stroke: @(TextStroke)px @(TextStrokeColor); font-size: @(Height/1.2)px; left: @(Width/2);">
					<p></p>
					<p>@($"{Math.Round(Value)}%")</p>
					<p></p>
				</div>
			}
		</div>
	</div>
</root>

@code
{
	[Property] public float Value { get; set; } = 75f;
	[Property] public float Minimum { get; set; } = 0f;
	[Property] public float Maximum { get; set; } = 100f;
	[Property] public float Width { get; set; } = 400f;
	[Property] public float Height { get; set; } = 50f;
	[Property] public string BarColor { get; set; } = "red";
	[Property] public bool ShowText { get; set; } = true;
	[Property] public string TextColor { get; set; } = "white";
	[Property] public string TextStrokeColor { get; set; } = "black";
	[Property] public float TextStroke { get; set; } = 2f;
	[Property] public string TextSize { get; set; } = "1rem";
	[Property] public string BgColor { get; set; } = "black";
	[Property] public string BgBorderColor { get; set; } = "black";

	//string ProgressSays { get; set; } = $"100%";

	protected override int BuildHash() => System.HashCode.Combine(
	Value ,
	Minimum,
	Maximum
	);

	/*
	https://css-tricks.com/how-to-stack-elements-in-css/
	https://www.w3schools.com/cssref/css_units.php
	https://www.w3schools.com/cssref/css_units.php
	https://css-tricks.com/adding-stroke-to-web-text/
	https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text
	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction
	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-size-adjust
	https://stackoverflow.com/questions/16056591/font-scaling-based-on-size-of-container
	https://css-tricks.com/fitting-text-to-a-container/
	https://dev.to/logrocket/css-font-size-adjust-how-to-auto-adjust-your-font-size-16fo
	https://www.w3schools.com/cSS/css_border.asp
	https://www.w3schools.com/css/css_overflow.asp
	*/
}