@using System.Text.RegularExpressions
@using System.ComponentModel.DataAnnotations
@using MarketData.MarketDataModel
@using eNavigator.Interfaces
@using eNavigator.Models
@using eNavigator.Routes
@using eNavigator.Components.Shared
@using Microsoft.AspNetCore.Components.Web.Virtualization
@inject IMarketDataServiceClient marketDataServiceClient
@inject IStateContainer stateContainer
@inject ISnackbar snackbarService
@attribute [Route(PageRoute.BollingerBands)]

<div>
<div style="align-items: center; vertical-align: middle">
    <BusyIndicator IsBusy="@IsBusy" Message="@BusyMessage"></BusyIndicator>
</div>

<MudGrid>
    <MudItem xs="2">
        <MudItem Class="overflow-y-hidden" Style="height: 70px">
            <MudSelect Variant="Variant.Outlined" Label="Symbols" T="SelectableSymbol" @bind-value="@SelectedSymbol" @bind-value:after="@OnSymbolChanged">   
              <Virtualize Context="context" Items="@AvailableSymbols">
                <MudSelectItem T="SelectableSymbol" Value="@context">@context.Name</MudSelectItem>
              </Virtualize>         
            </MudSelect>
        </MudItem>   

        <MudItem Class="overflow-y-hidden" Style="height: 70px">
            <MudSelect Variant="Variant.Outlined" Label="DayCount" T="int" @bind-value="@SelectedDayCount" @bind-value:after="@OnDayCountChanged">   
              <Virtualize Context="dayCount" Items="@AvailableDayCounts" OverscanCount="15">
                <MudSelectItem T="int" Value="@dayCount">@dayCount</MudSelectItem>
              </Virtualize>         
            </MudSelect>
        </MudItem>

        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@RefreshClicked">Refresh</MudButton>
    </MudItem>
    <MudItem xs="1">
    </MudItem>
    <MudItem xs="9" >
    <MudPaper>
        <MudText Typo="Typo.h6">@Heading</MudText>
        <MudChart ChartType="ChartType.Line" ChartOptions="@ChartingOptions" ChartSeries="@ChartSeriesCollection" XAxisLabels="@XAxisLabels">
        <CustomGraphics>
              <style>
                  .mud-chart-line { overflow: visible; }
                  .mud-charts-gridlines-xaxis-lines > path { stroke: none; }
              </style>
          </CustomGraphics>        
        </MudChart>

    </MudPaper>
    </MudItem>
</MudGrid>
</div>