@inject IJSRuntime JSRuntime
@inject NavigationManager Nav

<div class="control-toolbar">
    <div class="check-box">
        <div class="form-check me-2">
            <input class="form-check-input" type="checkbox" id="showname" @bind="@ShowName" @bind:after="ShowNameChanged">
            <label class="form-check-label" for="showname">
                Name
            </label>
        </div>
        <div class="form-check me-2">
            <input class="form-check-input" type="checkbox" id="showgrid" @bind="@ShowGrid" @bind:after="ShowGridChanged">
            <label class="form-check-label" for="showgrid">
                Grid
            </label>
        </div>
        <div class="form-check me-2">
            <input class="form-check-input" type="checkbox" id="showslammap" @bind="@ShowMapSlam" @bind:after="ShowSlamMapChanged">
            <label class="form-check-label" for="showslammap">
                Slam Map
            </label>
        </div>
    </div>

    <div class="control-button">
        <div class="extension">
            <MudTooltip Text="Exit" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" @onclick="@(() => Nav.NavigateTo($"/navigation-maps"))">
                    <i class="mdi mdi-keyboard-return icon"></i>
                </button>
            </MudTooltip>
            <MudMenu AnchorOrigin="Origin.BottomRight" Variant="Variant.Filled" ListClass="overflow-x-hidden">
                <ActivatorContent>
                    <button type="button" class="btn btn-primary button-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="mdi mdi-dots-vertical icon"></i>
                    </button>
                </ActivatorContent>
                <ChildContent>
                    <MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="EdgeWidth" Min="0.01" Max="0.5" Color="Color.Info" Step="0.01" ValueChanged="EdgeWidthChanged" ValueLabel="true" Variant="Variant.Filled">
                        Edge Width
                    </MudSlider>
                    <MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="EdgeDirectionWidth" Min="0.05" Max="0.8" Color="Color.Info" Step="0.01" ValueChanged="EdgeDirectionWidthChanged" ValueLabel="true" Variant="Variant.Filled">
                        Edge Direction Width
                    </MudSlider>
                    <MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="NodeRadius" Min="0.01" Max="0.25" Color="Color.Info" Step="0.01" ValueChanged="NodeRadiusChanged" ValueLabel="true" Variant="Variant.Filled">
                        Node Radius
                    </MudSlider>
                    <MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="OriginVectorWidth" Min="0.1" Max="1" Color="Color.Info" Step="0.05" ValueChanged="OriginVectorWidthChanged" ValueLabel="true" Variant="Variant.Filled">
                        Origin Width
                    </MudSlider>
                </ChildContent>
            </MudMenu>
            <MudTooltip Text="Delete" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-danger button" disabled="@(MapIsActive || (!MultiSelectedEdge && !ZoneSelected))" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.Delete))">
                    <i class="mdi mdi-trash-can-outline icon"></i>
                </button>
            </MudTooltip>
            <MudTooltip Text="Undo" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" disabled="@(MapIsActive || !NodesUndoable)" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.Undo))">
                    <i class="mdi mdi-undo-variant icon"></i>
                </button>
            </MudTooltip>
            <MudTooltip Text="Save" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" disabled="@(MapIsActive || !NodesUndoable)" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.Save))">
                    <i class="mdi mdi-content-save icon"></i>
                </button>
            </MudTooltip>
            <MudTooltip Text="Checking Map" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" disabled="@(MapIsActive)" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.CheckMap))">
                    <i class="mdi mdi mdi-alert-circle icon"></i>
                </button>
            </MudTooltip>
        </div>
        <div class="scale-map">
            <MudTooltip Text="Scale Fit" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.FitScreen))">
                    <i class="mdi mdi-fit-to-screen icon"></i>
                </button>
            </MudTooltip>
            <MudTooltip Text="Zoom In" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.ZoomIn))">
                    <i class="mdi mdi-magnify-plus-outline icon"></i>
                </button>
            </MudTooltip>
            <MudTooltip Text="Zoom Out" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <button type="button" class="btn btn-primary button" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.ZoomOut))">
                    <i class="mdi mdi-magnify-minus-outline icon"></i>
                </button>
            </MudTooltip>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public EventCallback<ControlState> ControlStateClick { get; set; }

    [Parameter]
    public EventCallback<(ControlState, bool)> EditorExtensionChanged { get; set; }

    [CascadingParameter]
    public bool MapIsActive { get; set; }

    [Parameter]
    public bool ShowGrid { get; set; }

    [Parameter]
    public bool ShowName { get; set; }

    [Parameter]
    public bool ShowMapSlam { get; set; }

    [Parameter]
    public bool NodesUndoable { get; set; }

    [Parameter]
    public bool MultiSelectedEdge { get; set; }

    [Parameter]
    public bool ZoneSelected { get; set; }

    private double EdgeWidth = 0.15;
    private double EdgeDirectionWidth = 0.3;
    private double NodeRadius = 0.1;
    private double OriginVectorWidth = 0.35;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (!firstRender) return;

        var width = await JSRuntime.InvokeAsync<string>("getCssVariable", "--edge-stroke-width");
        if (!string.IsNullOrEmpty(width))
        {
            if (double.TryParse(width.Replace("px", ""), out double edgewidth))
            {
                EdgeWidth = edgewidth;
            }
        }
        else await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-stroke-width", $"{EdgeWidth}px");

        var directionwidth = await JSRuntime.InvokeAsync<string>("getCssVariable", "--edge-direction-stroke-width");
        if (!string.IsNullOrEmpty(directionwidth))
        {
            if (double.TryParse(directionwidth.Replace("px", ""), out double edgedirectionwidth))
            {
                EdgeDirectionWidth = edgedirectionwidth;
            }
        }
        else await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-direction-stroke-width", $"{EdgeDirectionWidth}px");

        var radius = await JSRuntime.InvokeAsync<string>("getCssVariable", "--node-r");
        if (!string.IsNullOrEmpty(radius))
        {
            if (double.TryParse(radius.Replace("px", ""), out double noderadius))
            {
                NodeRadius = noderadius;
            }
        }
        else await JSRuntime.InvokeVoidAsync("setCssVariable", "--node-r", $"{NodeRadius}px");

        var originwidth = await JSRuntime.InvokeAsync<string>("getCssVariable", "--origin-vector-stroke-width");
        if (!string.IsNullOrEmpty(originwidth))
        {
            if (double.TryParse(originwidth.Replace("px", ""), out double originVectorWidth))
            {
                OriginVectorWidth = originVectorWidth;
            }
        }
        else await JSRuntime.InvokeVoidAsync("setCssVariable", "--origin-vector-stroke-width", $"{OriginVectorWidth}px");
        StateHasChanged();
    }

    private async Task ShowNameChanged() => await EditorExtensionChanged.InvokeAsync((ControlState.ShowName, ShowName));

    private async Task ShowGridChanged() => await EditorExtensionChanged.InvokeAsync((ControlState.ShowGrid, ShowGrid));

    private async Task ShowSlamMapChanged() => await EditorExtensionChanged.InvokeAsync((ControlState.ShowMapSlam, ShowMapSlam));

    private async Task EdgeWidthChanged(double value)
    {
        EdgeWidth = value;
        var width = $"{EdgeWidth}px";
        await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-stroke-width", width);
    }

    private async Task EdgeDirectionWidthChanged(double value)
    {
        EdgeDirectionWidth = value;
        var width = $"{EdgeDirectionWidth}px";
        await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-direction-stroke-width", width);
    }

    private async Task NodeRadiusChanged(double value)
    {
        NodeRadius = value;
        var width = $"{NodeRadius}px";
        await JSRuntime.InvokeVoidAsync("setCssVariable", "--node-r", width);
    }

    private async Task OriginVectorWidthChanged(double value)
    {
        OriginVectorWidth = value;
        var width = $"{OriginVectorWidth}px";
        await JSRuntime.InvokeVoidAsync("setCssVariable", "--origin-vector-stroke-width", width);
    }

}