<div style="height:400px;"></div>
<TelerikButton Icon="window" OnClick=@(()=> WindowVisible = true)>Open Modal</TelerikButton>
<div style="height:400px;"></div>

<TelerikWindow Class="demo-window" Width="500px" Height="300px" Centered="true" @bind-Visible=@WindowVisible Modal="true">
    <WindowTitle>
        <strong>Modal Window</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <p>Click the close button to dismiss this modal dialog.</p>
    </WindowContent>
</TelerikWindow>

@code { public bool WindowVisible { get; set; } }

<style type="text/css">
    .demo-window {
        z-index: 44444;
    }
</style>

  .k-animation-container {
        z-index: 15000 !important;
    }

<style>
    .k-animation-container {
        z-index: 15000;
    }
</style>


<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="300px" OnUpdate="@UpdateHandler">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Roles) Title="Position">
            <Template>
                @{
                    var item = context as SampleData;

                    @if (item.Roles.Any())
                    {
                        foreach (var role in item.Roles)
                        {
                            <span>@role</span>
                        }
                    }
                }
            </Template>
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikMultiSelect @bind-Value="@selectedValues" Data="@CurrentlyEditedEmployee.Roles"></TelerikMultiSelect>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    List<SampleData> MyData { get; set; }
    List<string> Roles { get; set; }
    SampleData CurrentlyEditedEmployee { get; set; }

    private List<string> selectedValues { get; set; }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operations here through your service
        await MyService.Update(item);

        // update the local view-model data with the service data
        await GetGridData();
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public List<string> Roles { get; set; } = new List<string>() { "Test" };
    }

    async Task GetGridData()
    {
        MyData = await MyService.Read();
        Roles = await MyService.GetRoles();
    }

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

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();
        private static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        Name = "Name " + i.ToString()
                    });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task<List<string>> GetRoles()
        {
            return await Task.FromResult(Roles);
        }

        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
    }
}

<TelerikWindow Left="@TheLeft" Top="@TheTop" Draggable="true"
               LeftChanged="@LeftChangedHandler" TopChanged="@TopChangedHandler"
               Visible="true" Width="400px" Height="300px">
    <WindowTitle>Drag me!</WindowTitle>
    <WindowContent>When using Left and Top, make sure to update them in the view-model.</WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize"></WindowAction>
        <WindowAction Name="Maximize"></WindowAction>
    </WindowActions>
</TelerikWindow>

@code{
    string TheLeft { get; set; } = "50px";
    string TheTop { get; set; } = "50px";

    async Task LeftChangedHandler(string currLeft)
    {
        float leftValue = float.Parse(currLeft.Replace("px", ""));
        Console.WriteLine("left " + leftValue);
        //left boundary
        if (leftValue < 0)
        {
            currLeft = "0px";
        }
        //right boundary - replace hardcoded values with current values from the viewport size
        //and take into account the dimensions of your window. This sample hardcodes values for brevity and clarity
        //you may find useful packages like this to get the viewport size https://www.nuget.org/packages/BlazorPro.BlazorSize/
        if (leftValue > 1000)
        {
            currLeft = "1000px";
        }


        TheLeft = currLeft;

        await DelayedRender();
    }

    async Task TopChangedHandler(string currTop)
    {
        float topValue = float.Parse(currTop.Replace("px", ""));
        Console.WriteLine("top: " + topValue);

        //top boundary
        if (topValue < 0)
        {
            currTop = "0px";
        }
        //bottom boundary - replace hardcoded values with current values from the viewport size
        //and take into account the dimensions of your window
        if (topValue > 600)
        {
            currTop = "600px";
        }

        TheTop = currTop;

        await DelayedRender();
    }

    async Task DelayedRender()
    {
        await Task.Run(async () =>
        {
            await Task.Delay(30);
            await InvokeAsync(StateHasChanged);
        });
    }
}

<TelerikWindow Visible="@IsWindowVisible" Modal="true" Centered="true">
    <WindowTitle>WindowTitle</WindowTitle>
    <WindowContent>
        lorem ipsum
    </WindowContent>
    <WindowActions>
        <WindowAction Name="MyCustomAction" Icon="close" OnClick="@HandleCancel" />
    </WindowActions>
</TelerikWindow>

@code{
    bool IsWindowVisible { get; set; } = true;

    async Task HandleCancel()
    {
        Console.WriteLine("my custom click happened");
        IsWindowVisible = false;//hide the window with your own code if you also want to do that
    }
}

@result

<TelerikButton OnClick="@ToggleWindow">Toggle the Window</TelerikButton>

<TelerikWindow Visible="@isVisible" VisibleChanged="@VisibleChangedHandler">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="MyCustomClose" Icon="@IconName.Close" OnClick="@MyCustomCloseHandler" />
    </WindowActions>
</TelerikWindow>

@code {
    bool isVisible { get; set; }
    string result { get; set; }

    void VisibleChangedHandler(bool currVisible)
    {
        // if you don't do this, the window won't close because of the user action
        // so if you don't update the view-model here, the window will not close when Esc is pressed

        //isVisible = currVisible;

        result = $"the window is now visible: {isVisible}";

        Console.WriteLine($"Closing because of Esc key");
    }

    void MyCustomCloseHandler()
    {
        //will fire on click only
        isVisible = false;
        //since the built-in window UI didn't invoke this change, the event will not fire
    }

    public void ToggleWindow()
    {
        isVisible = !isVisible;

        result = $"the window is now visible: {isVisible}";
    }
}

<TelerikWindow Class="@( isMinimized ? "minimize-window" : "maximize-window" )"
               Width="500px"
               Height="@Height"
               Top="40%"
               Left="45%"
               Visible="true">
    <WindowTitle>
        <strong>Status</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="MyCustomMinimize" OnClick="@CustomMinimize" Icon="@IconName.WindowMinimize"></WindowAction>
        @if (isMinimized)
        {
            <WindowAction Name="MyCustomMaximize" OnClick="@CustomMaximize" Icon="@IconName.Window"></WindowAction>
        }
        <WindowAction Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <form class="k-form">
            <fieldset class="k-form-fieldset">
                <legend class="k-form-legend">User Details</legend>

                <label class="k-form-field">
                    <span>First Name</span>
                    <input class="k-textbox" placeholder="Your Name" />
                </label>
                <label class="k-form-field">
                    <span>Last Name</span>
                    <input class="k-textbox" placeholder="Your Last Name" />
                </label>
            </fieldset>
        </form>
    </WindowContent>
</TelerikWindow>

@code {
    public bool isMinimized { get; set; }

    public string Height { get; set; } = "350px";

    private void CustomMinimize()
    {
        isMinimized = true;
        Height = "auto";
    }

    private void CustomMaximize()
    {
        isMinimized = false;
        Height = "350px";
    }

}

<style>
    .minimize-window .k-content {
        display: none;
        padding: 0px !important;
    }

    .maximize-window .k-content {
        display: block;
        padding: 16px 16px;
    }
</style>