@using MP.MONO.UI.Components
@using MP.MONO.Core.DTO
@using MP.MONO.UI.Data

@inject CurrentDataService MMDataService

@if (@dataLoaded && currProd != null)
{
    <ul class="list-group">
        <li class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between" title="order">
                <div><i class="fa-solid fa-cart-arrow-down fa-2x"></i></div>
                <div>
                    <h5><b>@currProd.Order</b></h5>
                </div>
            </div>
            <div class="d-flex w-100 align-items-center" title="done/ordered">
                <div class="flex-fill pe-1">
                    <div class="w-100">
                        <div class="progress" style="height: 0.5rem;">
                            <div class="progress-bar" role="progressbar" style="@percProgress(currProd.CurrQty, currProd.OrderQty)" aria-valuenow="@currProd.CurrQty" aria-valuemin="0" aria-valuemax="@currProd.OrderQty"></div>
                        </div>
                    </div>
                </div>
                <div class="ps-1 small">
                    <b>@currProd.CurrQty</b>/@currProd.OrderQty
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex w-100 justify-content-between" title="Article">
                <div>
                    <i class="fa-solid fa-receipt fa-2x"></i>
                </div>
                <div>
                    <h5><b>@currProd.ItemCode</b></h5>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex w-100 justify-content-between" title="Current Cycle Time">
                <div><i class="fa-solid fa-stopwatch fa-2x"></i></div>
                <div class="h2" title="">
                    <b>@($"{currProd.CycleTime.Hours:00}:{currProd.CycleTime.Minutes:00}:{currProd.CycleTime.Seconds:00}")</b>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex w-100 justify-content-between small" title="Program">
                <div><i class="fa-solid fa-terminal"></i></div>
                <div>@currProd.ProgName</div>
            </div>
            @if (!string.IsNullOrEmpty(currProd.Message))
            {
                <div class="d-flex w-100 justify-content-end">
                    <small><i>@currProd.Message</i></small>
                </div>
            }
        </li>
    </ul>

}
else
{
    <ul>
        <li>Current Production</li>
        <li>Work Order detail</li>
        <li>Production Events</li>
    </ul>
    <LoadingDataSmall></LoadingDataSmall>
}
@code {
    protected bool dataLoaded = false;
    private ProductionDTO? currProd { get; set; } = null;

    protected override async Task OnInitializedAsync()
    {
        await ReloadData();
    }

    protected string percProgress(int num, int den)
    {
        string answ = "width: 0%;";
        den = den != 0 ? den : 1;
        double ratio = ((double)num) / den;
        answ = $"width: {ratio:P0};";
        return answ;
    }

    protected async Task ReloadData()
    {
        await Task.Delay(10);
        currProd = await MMDataService.MachineProd();
        await Task.Delay(500);
        dataLoaded = true;
    }

}