<div class="align-toolbar">
    <MudTooltip Text="Copy" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@copyDisable" @onclick="@(async () => await EditButtonChanged(EditorState.Copy))">
            <i class="mdi mdi-content-copy icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Move" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@moveDisable" @onclick="@(async () => await EditButtonChanged(EditorState.Move))">
            <i class="mdi mdi-content-duplicate icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Tách Node" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.SplitNode))">
            <i class="mdi mdi-call-split icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Gộp Node" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.MergeNode))">
            <i class="mdi mdi-call-merge icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Horizontal Left" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.HorizontalLeft))">
            <i class="mdi mdi-format-horizontal-align-left icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Horizontal Right" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.HorizontalRight))">
            <i class="mdi mdi-format-horizontal-align-right icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Vertical Top" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.VerticalTop))">
            <i class="mdi mdi-format-vertical-align-top icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Vertical Bottom" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.VerticalBottom))">
            <i class="mdi mdi-format-vertical-align-bottom icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Horizontal Center" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.HorizontalCenter))">
            <i class="mdi mdi-format-horizontal-align-center icon-button"></i>
        </button>
    </MudTooltip>
    <MudTooltip Text="Vertical Center" role="button" Placement="Placement.Bottom" Color="Color.Info">
        <button type="button" class="btn btn-primary align-button" disabled="@alignDisable" @onclick="@(async () => await AlignButtonCick(AlignState.VerticalCenter))">
            <i class="mdi mdi-format-vertical-align-center icon-button"></i>
        </button>
    </MudTooltip>
</div>


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

    [Parameter]
    public EventCallback<AlignState> AlignStateClick { get; set; }

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

    [Parameter]
    public EditorState EditorState { get; set; }

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

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

    private bool alignDisable => MapIsActive || EditorState != EditorState.Scaner || !MultiSelectedNode;
    private bool moveDisable => MapIsActive || (EditorState != EditorState.Scaner && EditorState != EditorState.Move) || !MultiSelectedNode;
    private bool copyDisable => MapIsActive || (EditorState != EditorState.Scaner && EditorState != EditorState.Copy) || !MultiSelectedEdge;

    private async Task EditButtonChanged(EditorState state) => await EditorStateChanged.InvokeAsync(state);

    private async Task AlignButtonCick(AlignState state) => await AlignStateClick.InvokeAsync(state);
}
