<div class="edit-toolbar">
    <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="btnradio" id="btnview" autocomplete="off" checked="@(State == EditorState.View)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btnview" aria-label="View" @onclick="@(() => EditorButtonChanged(EditorState.View))">
            <MudTooltip Text="View" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-eye-outline icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btnscan" autocomplete="off" checked="@(State == EditorState.Scaner)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btnscan" @onclick="@(() => EditorButtonChanged(EditorState.Scaner))">
            <MudTooltip Text="Scan" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-cursor-default-outline icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btnedit" autocomplete="off" checked="@(State == EditorState.NavigationEdit)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btnedit" @onclick="@(() => EditorButtonChanged(EditorState.NavigationEdit))">
            <MudTooltip Text="Edit Path" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-vector-point-edit icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btncreatedge" autocomplete="off" checked="@(State == EditorState.CreateStraighEdge)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btncreatedge" @onclick="@(() => EditorButtonChanged(EditorState.CreateStraighEdge))">
            <MudTooltip Text="Create Straight Edge" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-vector-line icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btncreatecurveedge" autocomplete="off" checked="@(State == EditorState.CreateCurveEdge)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btncreatecurveedge" @onclick="@(() => EditorButtonChanged(EditorState.CreateCurveEdge))">
            <MudTooltip Text="Create Curve Edge" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-vector-radius icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btncreatecurve2edge" autocomplete="off" checked="@(State == EditorState.CreateDoubleCurveEdge)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btncreatecurve2edge" @onclick="@(() => EditorButtonChanged(EditorState.CreateDoubleCurveEdge))">
            <MudTooltip Text="Create Bezier Edge" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-vector-bezier icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btncreatezone" autocomplete="off" checked="@(State == EditorState.CreateZone)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btncreatezone" @onclick="@(() => EditorButtonChanged(EditorState.CreateZone))">
            <MudTooltip Text="Create Zone" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-vector-square-plus icon-button"></i>
            </MudTooltip>
        </label>

        <input type="radio" class="btn-check" name="btnradio" id="btneditzone" autocomplete="off" checked="@(State == EditorState.SettingZone)" disabled="@(MapIsActive)">
        <label class="btn btn-outline-primary p-0 align-content-center" for="btneditzone" @onclick="@(() => EditorButtonChanged(EditorState.SettingZone))">
            <MudTooltip Text="Edit Zone" role="button" Placement="Placement.Bottom" Color="Color.Info">
                <i class="mdi mdi-vector-square icon-button"></i>
            </MudTooltip>
        </label>
    </div>
    <div class="zone-select">
        <MudSelect T="ZoneType" Variant="Variant.Outlined" Margin="Margin.Dense" @bind-Value="@Type" @bind-Value:after="ZoneTypeButtonChanged" Disabled="@MapIsActive" Label="Zone Type" Style="width: 175px">
            <MudSelectItem Value="@(ZoneType.Operating)">Operating</MudSelectItem>
            <MudSelectItem Value="@(ZoneType.OperatingHazard)">OperatingHazard</MudSelectItem>
            <MudSelectItem Value="@(ZoneType.Restricted)">Restricted</MudSelectItem>
            <MudSelectItem Value="@(ZoneType.LoadTransfer)">LoadTransfer</MudSelectItem>
            <MudSelectItem Value="@(ZoneType.Confined)">Confined</MudSelectItem>
            <MudSelectItem Value="@(ZoneType.Forbidden)">Forbidden</MudSelectItem>
        </MudSelect>
    </div>
</div>

@code {
    [Parameter]
    public EventCallback<EditorState> EditorStateChanged { get; set; }

    [Parameter]
    public EventCallback<ZoneType> EditorZoneTypeChanged { get; set; }

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

    private EditorState State = EditorState.View;
    private ZoneType Type = ZoneType.Operating;

    private async Task EditorButtonChanged(EditorState state)
    {
        if (state != State)
        {
            State = state;
            await EditorStateChanged.InvokeAsync(state);
        }
    }

    private async Task ZoneTypeButtonChanged()
    {
        await EditorZoneTypeChanged.InvokeAsync(Type);
    }

    public void SetEditorState(EditorState state)
    {
        if (State != state)
        {
            State = state;
            StateHasChanged();
        }
    }
}
