@page "/"
@using Blazorise.Components;
@using Elektrifikatsiya.Models;
@using System.Net
@inject IVersionProvider VersionProvider

<Div>
	<Row Padding="Padding.Is3">
		<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
			<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
				<Bar Breakpoint="Breakpoint.Desktop"
					 Background="Background.White"
					 ThemeContrast="ThemeContrast.None"
					 Shadow="Shadow.Remove"
					 Border="Border.Is1.RoundedTop">
					<BarBrand>
						Plugs
					</BarBrand>
				</Bar>
				<ListView TItem="Device"
						  Data="@plugs"
						  TextField="@((_)=>(""))"
						  ValueField="@((_)=>(""))"
						  Mode="ListGroupMode.Static"
						  Style="border-radius: 0px 0px">
					<ItemTemplate >
						<ListGroupItem>
							<Row>
								<Column ColumnSize="ColumnSize.Is8">
									<Row>
										<Column ColumnSize="ColumnSize.Is7">
											<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
										</Column>
									</Row>
									<Row>
										<Column>
											<Small>User: @context.Item.User</Small>
											<br />
											<Small>Room: @context.Item.Room</Small>
										</Column>
										<Column ColumnSize="ColumnSize.Is5">
											<Paragraph Margin="Margin.Is1.OnY">@context.Item.PowerUsage W</Paragraph>
										</Column>
									</Row>
								</Column>
								<Column ColumnSize="ColumnSize.Is4">
									<Button Clicked="@ChangeButtonColor" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Primary"Primary Outline>
										<!--TODO: This button should change color-->
										<BarIcon IconName="IconName.Bolt" />
									</Button>
								</Column>
							</Row>
						</ListGroupItem>
					</ItemTemplate>
				</ListView>
			</Column>
			<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
				<Bar Breakpoint="Breakpoint.Desktop"
					 Background="Background.White"
					 ThemeContrast="ThemeContrast.None"
					 Shadow="Shadow.Remove"
					 Border="Border.Is1.Rounded.RoundedTop">
					<BarBrand>
						Logs
					</BarBrand>
				</Bar>
				<ListView TItem="Event"
						  Data="@events"
						  TextField="@((_)=>(""))"
						  ValueField="@((_)=>(""))"
						  Mode="ListGroupMode.Static"
						  Style="border-radius: 0px 0px">
					<ItemTemplate>
						<Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
							<Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading>
							<Small>@context.Item.Date</Small>
						</Div>
						<Paragraph Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
					</ItemTemplate>
				</ListView>
			</Column>
		</Div>
	</Row>
	<Row Padding="Padding.Is3">
		<Column>
			<Button Color="Color.Primary" Style="border-radius: 0px" Clicked="@(async () => await HandleRedraw())">Aktualisieren</Button>
			<LineChart Height="Height.Is100" Width="Width.Is100" @ref="lineChart" TItem="double" />
		</Column>
	</Row>
</Div>


@code {
	//TODO: insert new event here if plug produces one
	List<Event> events = new List<Event>() { new Event("Placeholder", "Event", DateTime.Now), new Event("Placeholder", "Event", DateTime.Now), new Event("Placeholder", "Event", DateTime.Now) };
	//TODO: insert new Device here if user adds one
	List<Device> plugs = new List<Device>() { new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "Josne", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), };
	//code for graph
	LineChart<double> lineChart;

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			await HandleRedraw();
		}
	}

	async Task HandleRedraw()
	{
		await lineChart.Clear();

		await lineChart.AddLabelsDatasetsAndUpdate(Labels, GetLineChartDataset());
	}

	//TODO: insert dataset of current and last voltage usages
	LineChartDataset<double> GetLineChartDataset()
	{
		return new LineChartDataset<double>
			{
				Label = "# of random number in thousands",
				Data = RandomizeData(),
				BackgroundColor = backgroundColors,
				BorderColor = borderColors,
				Fill = true,
				PointRadius = 3,
				CubicInterpolationMode = "monotone",
			};
	}

	string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
	List<string> backgroundColors = new List<string> { ChartColor.FromRgba(255, 99, 132, 0.2f), ChartColor.FromRgba(54, 162, 235, 0.2f), ChartColor.FromRgba(255, 206, 86, 0.2f), ChartColor.FromRgba(75, 192, 192, 0.2f), ChartColor.FromRgba(153, 102, 255, 0.2f), ChartColor.FromRgba(255, 159, 64, 0.2f) };
	List<string> borderColors = new List<string> { ChartColor.FromRgba(255, 99, 132, 1f), ChartColor.FromRgba(54, 162, 235, 1f), ChartColor.FromRgba(255, 206, 86, 1f), ChartColor.FromRgba(75, 192, 192, 1f), ChartColor.FromRgba(153, 102, 255, 1f), ChartColor.FromRgba(255, 159, 64, 1f) };

	List<double> RandomizeData()
	{
		var r = new Random(DateTime.Now.Millisecond);

		return new List<double> {
		r.Next( 3, 50 ) * r.NextDouble(),
		r.Next( 3, 50 ) * r.NextDouble(),
		r.Next( 3, 50 ) * r.NextDouble(),
		r.Next( 3, 50 ) * r.NextDouble(),
		r.Next( 3, 50 ) * r.NextDouble(),
		r.Next( 3, 50 ) * r.NextDouble() };
	}

	//private Background buttonColor = Background.Primary;

	private void ChangeButtonColor()
	{
		//device.on = !device.on; 
	}


}

