@using Insight.Web.Models.Account;

<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" MiniWidth="400px" Width="@_variableWidth" Style="max-width:auto;">
    @if (_content == Content.Contacts)
    {
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">
                <MudLink OnClick="() => _content = Content.Contacts" Underline="Underline.None" Typo="Typo.h6" Color="Color.Dark">
                    Chat
                </MudLink>
            </MudText>
        </MudDrawerHeader>

        <MudStack Justify="Justify.Center" Class="px-6">
            <MudList Clickable="true" Style="max-height: calc(100vh - 220px); overflow-y: scroll;">
                @foreach (var user in ChatService.Users.Keys.Where(p => p.Uid != SessionHandler.State.Uid).OrderByDescending(p => p.Online))
                {
                    <MudListItem OnClick="@(async () => await GetSessionAsync(user))">
                        <div class="d-flex flex-row mt-n1 mb-n1">
                            <div class="mr-4">
                                <MudBadge Class="my-2" Overlap Visible="true" Color="@(user.Online ? Color.Success : Color.Error)">
                                     @* Content="3" *@
                                     <MudAvatar Color="Color.Primary" Style="height:50px; width:50px;">
                                         @user.Username?.ToUpper().FirstOrDefault()
                                     </MudAvatar>
                                 </MudBadge>
                             </div>
                             <div>
                                 <MudText Typo="Typo.body1" Style="font-weight: normal;">
                                     @user.Username
                                 </MudText>
                                 <MudText Typo="Typo.body1" Style="font-size: x-small!important;">
                                     @user.Uid
                                 </MudText>
                             </div>
                         </div>
                     </MudListItem>
                }
            </MudList>
        </MudStack>
    }
    else if (_content == Content.Chat && _currentSession is not null)
    {
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">
                <MudLink OnClick="() => _content = Content.Contacts" Underline="Underline.None" Typo="Typo.h6">
                    Chat
                </MudLink>
                (@_currentSession.Members.FirstOrDefault(p => p.Uid != SessionHandler.State.Uid)?.Username)
                <br>
                <MudText Typo="Typo.body1" Style="font-size: x-small!important;">
                    @_currentSession?.Id.ToString()
                </MudText>
            </MudText>
        </MudDrawerHeader>

        <MudStack Justify="Justify.Center" Class="px-6">
            <MudList Clickable="false" Style="height: calc(100vh - 260px); overflow-y: scroll;" id="chatContainer">
                @foreach (var message in _currentSession.Messages.OrderBy(p => p.CreatedDate))
                {
                    if (message.SenderId == SessionHandler.State.Uid)
                    {
                        <MudListItem Dense="true">
                            <div class="d-flex my-4" style="flex-direction:row-reverse;">
                                <div class="ml-4">
                                    <MudAvatar Color="Color.Secondary" Style="height:50px; width:50px;">
                                        @SessionHandler.State.Username?.ToUpper().FirstOrDefault()
                                    </MudAvatar>
                                </div>
                                <div>
                                    <MudText Align="Align.End" Typo="Typo.body1" Style="font-weight: bold;">
                                        You
                                    </MudText>
                                    <MudText Align="Align.End" Typo="Typo.body1" Style="font-size: x-small!important;">
                                        @message.CreatedDate.ToString("dd MMM yyyy - hh:mm tt")
                                    </MudText>
                                    <MudText Align="Align.End" Typo="Typo.body2" Style="padding: 15px; background-color: var(--mud-palette-background-grey); border-radius: 5px; margin-top:5px">
                                        @message.Message
                                    </MudText>
                                </div>
                            </div>
                        </MudListItem>
                    }
                    else
                    {
                        var sender = ChatService.Users.Keys.FirstOrDefault(p => p.Uid == message.SenderId);

                        <MudListItem Dense="true">
                            <div class="d-flex my-4" style="flex-direction:row;">
                                <div class="mr-4">
                                    <MudBadge Class="my-2" Overlap Visible="true" Color="@(sender.Online ? Color.Success : Color.Error)">
                                         <MudAvatar Color="Color.Primary" Style="height:50px; width:50px;">
                                             @sender?.Username?.ToUpper().FirstOrDefault()
                                         </MudAvatar>
                                     </MudBadge>
                                </div>
                                <div>
                                    <MudText Align="Align.Start" Typo="Typo.body1" Style="font-weight: bold;">
                                        @sender?.Username
                                    </MudText>
                                    <MudText Align="Align.Start" Typo="Typo.body1" Style="font-size: x-small!important;">
                                        @message.CreatedDate.ToString("dd MMM yyyy - hh:mm tt")
                                    </MudText>
                                    <MudText Align="Align.Start" Typo="Typo.body2" Style="padding: 15px; background-color: var(--mud-palette-background-grey); border-radius: 5px; margin-top:5px;">
                                        @message.Message
                                    </MudText>
                                </div>
                            </div>
                        </MudListItem>
                    }
                }
            </MudList>

            <MudPaper Elevation="25" Class="d-flex flex-row mx-4" Style="">
                <MudTextField T="string" @bind-Value="_currentMessage" For="@(()=> _currentMessage)" AutoFocus Immediate Lines="4" TextUpdateSuppression="false" Placeholder="Enter your message..." DisableUnderLine="true" Class="mt-n2 mx-4" OnKeyDown="OnKeyDown" />
                 <MudButton OnClick="SendAsync" Color="Color.Secondary" ButtonType="ButtonType.Button">
                     Send
                 </MudButton>
             </MudPaper>
        </MudStack>
    }
</MudDrawer>

<audio id="chat_user_online" src="/media/chat_user_online.mp3" />
<audio id="chat_message" src="/media/chat_message.mp3" />

@code{
    private bool _visible;
    private string _variableWidth => _content switch
    {
        Content.Chat => "600px",
        _ => "400px"
    };

    public void Toggle()
    {
        _visible = !_visible;
        StateHasChanged();
    }

    async void OnKeyDown(KeyboardEventArgs args)
    {
        if (args.ShiftKey && args.Key == "Enter")
        {
            await Task.Delay(100);
            await SendAsync();
        }
    }
}