@inherits ViewBase

@code {
    private Guid CurrentEditPlaylistId;
    private string CurrentEditPlaylistName;

    private FnzBoostrapModal EditPlaylistDialog;
    private FnzBoostrapModal DeletePlaylistDialog;

    private string EditListNameClass => string.IsNullOrWhiteSpace(CurrentEditPlaylistName) ? "is-invalid form-control" : "form-control";
}

<div class="container mt-3">

    @foreach (var item in PlaylistHelper.PlayListLoadSave.KeepNoEmpty())
    {
        if (item.Value != null)
        {
            <PlaylistTableItem Playlist="@item" EditPlaylist="ShowPlaylistEdit" DeletePlaylist="ShowPlaylistDelete"></PlaylistTableItem>
        }
        else
        {
            <table class="table w-100">
                <tbody>
                    <tr>
                        <td>
                            No playlist created
                        </td>
                    </tr>
                </tbody>
            </table>
        }
    }

</div>

@code {
    void ShowPlaylistEdit(Guid playlistId)
    {
        CurrentEditPlaylistId = playlistId;
        CurrentEditPlaylistName = PlaylistHelper.PlayListLoadSave[CurrentEditPlaylistId];
        EditPlaylistDialog.Show();
    }

    void ShowPlaylistDelete(Guid playlistId)
    {
        CurrentEditPlaylistId = playlistId;
        CurrentEditPlaylistName = PlaylistHelper.PlayListLoadSave[CurrentEditPlaylistId];
        DeletePlaylistDialog.Show();
    }

    void EditPlaylistNameChanged(ChangeEventArgs e)
    {
        CurrentEditPlaylistName = e.Value.ToString().Trim();
        StateHasChanged();
    }

    void UpdatePlaylist()
    {
        if (string.IsNullOrWhiteSpace(CurrentEditPlaylistName) == false)
        {
            PlaylistHelper.UpdatePlaylistName(CurrentEditPlaylistId, CurrentEditPlaylistName);
            StateHasChanged();
            EditPlaylistDialog.Hide();
        }
    }

    void DeletePlaylist()
    {
        PlaylistHelper.Deleteplaylist(CurrentEditPlaylistId);
        StateHasChanged();
        DeletePlaylistDialog.Hide();
    }
}

<FnzBoostrapModal @ref="DeletePlaylistDialog">
    <Title>Delete playlist</Title>
    <Body>
        @CurrentEditPlaylistName
    </Body>
    <Footer>
        <button type="button" class="btn btn-danger" @onclick="DeletePlaylist">
            Delete
        </button>
    </Footer>
</FnzBoostrapModal>

<FnzBoostrapModal @ref="EditPlaylistDialog" CssClass="modal-sm">
    <Title>Modify playlist</Title>
    <Body>
        <div class="form-floating row w-100">
            <InputText class="@EditListNameClass" placeholder="Playlist Name" @oninput="EditPlaylistNameChanged" Value="@CurrentEditPlaylistName" ValueExpression="()=>CurrentEditPlaylistName"></InputText>
            @if (string.IsNullOrEmpty(CurrentEditPlaylistName))
            {
                <label class="text-warning">Please enter playlist name</label>
            }
            else
            {
                <label>Playlist Name</label>
            }
        </div>
    </Body>
    <Footer>
        <button type="button" class="btn btn-primary" @onclick="UpdatePlaylist">
            Save
        </button>
    </Footer>
</FnzBoostrapModal>
