<div class="d-flex flex-row justify-content-between w-100 overflow-x-auto px-1">
    <div class="d-flex flex-row">
        <MudIconButton Class="mx-1 my-2" Icon="@Icons.Material.Filled.ZoomIn" Variant="Variant.Outlined" OnClick="(async () => await ButtonEventClick.InvokeAsync(MonitorToolbarButtonType.ZoomIn))" />
        <MudIconButton Class="mx-1 my-2" Icon="@Icons.Material.Filled.ZoomOut" Variant="Variant.Outlined" OnClick="(async () => await ButtonEventClick.InvokeAsync(MonitorToolbarButtonType.ZoomOut))" />
        <MudIconButton Class="mx-1 my-2" Icon="@Icons.Material.Filled.FitScreen" Variant="Variant.Outlined" OnClick="(async () => await ButtonEventClick.InvokeAsync(MonitorToolbarButtonType.Fit))" />
        <MudIconButton Class="mx-1 my-2" Icon="@Icons.Material.Filled.MyLocation" Variant="Variant.Outlined" OnClick="(async () => await ButtonEventClick.InvokeAsync(MonitorToolbarButtonType.Focus))" />
        <div class="mt-1 d-flex flex-row">
            <MudCheckBox @bind-Value="Model.FocusRobot" Label="Focus" T="bool" UncheckedColor="Color.Default" Color="Color.Success" @bind-Value:after="(() => CheckedClick(MonitorToolbarCheckedType.FocusRobot, Model.FocusRobot))"></MudCheckBox>
            <MudCheckBox @bind-Value="Model.ShowPath" Label="Path" T="bool" UncheckedColor="Color.Default" Color="Color.Success" @bind-Value:after="(() => CheckedClick(MonitorToolbarCheckedType.ShowPath, Model.ShowPath))"></MudCheckBox>
            <MudCheckBox @bind-Value="Model.ShowName" Label="Name" T="bool" UncheckedColor="Color.Default" Color="Color.Success" @bind-Value:after="(() => CheckedClick(MonitorToolbarCheckedType.ShowName, Model.ShowName))"></MudCheckBox>
            <MudCheckBox @bind-Value="Model.ShowElement" Label="Element" T="bool" UncheckedColor="Color.Default" Color="Color.Success" @bind-Value:after="(() => CheckedClick(MonitorToolbarCheckedType.ShowElement, Model.ShowElement))"></MudCheckBox>
            <MudCheckBox @bind-Value="Model.ShowGrid" Label="Grid" T="bool" UncheckedColor="Color.Default" Color="Color.Success" @bind-Value:after="(() => CheckedClick(MonitorToolbarCheckedType.ShowGrid, Model.ShowGrid))"></MudCheckBox>
            <MudCheckBox @bind-Value="Model.ShowLaser" Label="Laser" T="bool" UncheckedColor="Color.Default" Color="Color.Success" @bind-Value:after="(() => CheckedClick(MonitorToolbarCheckedType.ShowLaser, Model.ShowLaser))"></MudCheckBox>
        </div>
    </div>
    <div class="d-flex flex-row">
        <MudSelect Class="ms-2" Label="Map Name" Variant="Variant.Outlined" T="MapInfoDto" Margin="Margin.Dense" Dense @bind-Value="MapSelected" Style="width: 200px" @bind-Value:after="(async () => await MapChanged.InvokeAsync(MapSelected))">
            @foreach(var map in Maps)
            {
                <MudSelectItem Value="@map">@map.Name</MudSelectItem>
            }
        </MudSelect>
        <MudSelect Class="ms-2" @bind-Value="@RobotSelected" T="RobotInfomationDto" @bind-Value:after="(async () => await RobotChanged.InvokeAsync(RobotSelected))" Margin="Margin.Dense" Dense Variant="Variant.Outlined" Label="Robot Name" Style="width: 200px">
            @foreach (var robot in Robots)
            {
                <MudSelectItem Value="@robot">@robot.Name</MudSelectItem>
            }
        </MudSelect>
        <MudIconButton Icon="@ExpandIcon" Color="Color.Success" OnClick="ExpandedClick" />
    </div>
</div>

@code {
    [Parameter]
    public MonitorToolBarModel Model { get; set; } = null!;

    [Parameter]
    public EventCallback<MonitorToolbarButtonType> ButtonEventClick { get; set; }

    [Parameter]
    public EventCallback<bool> ExpandChanged { get; set; }

    [Parameter]
    public EventCallback<MapInfoDto> MapChanged { get; set; }

    [Parameter]
    public EventCallback<RobotInfomationDto> RobotChanged { get; set; }

    [Parameter]
    public Func<MonitorToolbarCheckedType, bool, Task>? CheckedEventClick { get; set; }

    public List<MapInfoDto> Maps = [];
    private MapInfoDto? MapSelected = default!;

    private bool isExpand = true;
    private string ExpandIcon = @Icons.Material.Filled.ArrowForwardIos;

    public List<RobotInfomationDto> Robots = [];
    private RobotInfomationDto? RobotSelected = null;

    public void LoadMaps(List<MapInfoDto> maps, MapInfoDto mapSelected)
    {
        Maps = maps;
        MapSelected = mapSelected;
        StateHasChanged();
    }

    public void LoadRobots(List<RobotInfomationDto> robots)
    {
        Robots = robots;
        if(Robots.Count > 0 && (RobotSelected is null || !Robots.Any(r => r.RobotId == RobotSelected.RobotId)))
        {
            RobotSelected = Robots.First();
            _ = RobotChanged.InvokeAsync(RobotSelected);
        }
        StateHasChanged();
    }

    private async Task ExpandedClick()
    {
        if (isExpand)
        {
            ExpandIcon = @Icons.Material.Filled.ArrowBackIos;
            isExpand = false;
        }
        else
        {
            ExpandIcon = @Icons.Material.Filled.ArrowForwardIos;
            isExpand = true;
        }
        await ExpandChanged.InvokeAsync(isExpand);
        StateHasChanged();
    }

    private void CheckedClick(MonitorToolbarCheckedType type, bool value) => CheckedEventClick?.Invoke(type, value);
}
