@page "/user/{userId:int}"
@using System.Web
@using LBPUnion.ProjectLighthouse.Administration
@using LBPUnion.ProjectLighthouse.Extensions
@using LBPUnion.ProjectLighthouse.Levels
@using LBPUnion.ProjectLighthouse.Localization.StringLists
@using LBPUnion.ProjectLighthouse.PlayerData
@using LBPUnion.ProjectLighthouse.Servers.Website.Extensions
@model LBPUnion.ProjectLighthouse.Servers.Website.Pages.UserPage

@{
    Layout = "Layouts/BaseLayout";
    Model.ShowTitleInPage = false;

    Model.Title = Model.Translate(ProfileStrings.Title, Model.ProfileUser!.Username);
    Model.Description = Model.ProfileUser!.Biography;

    bool isMobile = Request.IsMobile();
    string language = Model.GetLanguage();
    string timeZone = Model.GetTimeZone();
}

@if (Model.ProfileUser.IsBanned)
{
    <div class="ui inverted red segment">
        <h2>User is currently banned!</h2>
        @if (Model.User != null && Model.User.IsModerator)
        {
            <b>Reason:</b>
            <span>"@Model.ProfileUser.BannedReason"</span>
            <p>
                <i>Note: Only you and other moderators may view the ban reason.</i>
            </p>
        }
        else
        {
            <p>For shame...</p>
        }
    </div>
}

<div class="@(isMobile ? "" : "ui grid")">
    <div class="eight wide column">
        @await Html.PartialAsync("Partials/UserCardPartial", Model.ProfileUser, new ViewDataDictionary(ViewData)
        {
            {
                "ShowLink", false
            },
            {
                "IsMobile", Model.Request.IsMobile()
            },
            {
                "Language", Model.GetLanguage()
            },
            {
                "TimeZone", Model.GetTimeZone()
            },
        })
    </div>
    <div class="eight wide right aligned column">
        <br>
        @if (Model.ProfileUser != Model.User && Model.User != null)
        {
            if (!Model.IsProfileUserHearted)
            {
                <a class="ui pink button" href="/user/@Model.ProfileUser.UserId/heart">
                    <i class="heart icon"></i>
                    <span>Heart</span>
                </a>
            }
            else
            {
                <a class="ui pink button" href="/user/@Model.ProfileUser.UserId/unheart">
                    <i class="heart broken icon"></i>
                    <span>Unheart</span>
                </a>
            }
        }
        @if (Model.ProfileUser == Model.User || (Model.User?.IsModerator ?? false))
        {
            <a class="ui blue button" href="/user/@Model.ProfileUser.UserId/settings">
                <i class="cog icon"></i>
                <span>Settings</span>
            </a>
        }
        @if (Model.ProfileUser == Model.User)
        {
            <a href="/logout" class="ui red button">
                <i class="user slash icon"></i>
                @Model.Translate(BaseLayoutStrings.HeaderLogout)
            </a>
        }
    </div>
    @if (isMobile)
    {
        <br/>
    }
    <div class="eight wide column">
        <div class="ui blue segment">
            <h2>@Model.Translate(ProfileStrings.Biography)</h2>
            @if (string.IsNullOrWhiteSpace(Model.ProfileUser.Biography))
            {
                <p>@Model.Translate(ProfileStrings.NoBiography, Model.ProfileUser.Username)</p>
            }
            else
            {
                <p style="overflow-wrap: anywhere;">@HttpUtility.HtmlDecode(Model.ProfileUser.Biography)</p>
            }
        </div>
    </div>
    @if (isMobile)
    {
        <br/>
    }
    <div class="eight wide column">
        <div class="ui red segment">
            <h2>@Model.Translate(GeneralStrings.RecentActivity)</h2>
            <p>@Model.Translate(GeneralStrings.Soon)</p>
        </div>
    </div>
    @if (isMobile)
    {
        <br/>
    }
</div>

<div class="ui grid">
    @{
        string outerDiv = isMobile ?
            "horizontal-scroll" :
            "three wide column";
        string innerDiv = isMobile ?
            "ui top attached tabular menu horizontal-scroll" :
            "ui vertical fluid tabular menu";
    }
    <div class="@outerDiv">
        <div class="@innerDiv">
            <a class="item active lh-sidebar" target="lh-comments">
                Comments
            </a>
            <a class="item lh-sidebar" target="lh-photos">
                @Model.Translate(BaseLayoutStrings.HeaderPhotos)
            </a>
                
            <a class="item lh-sidebar" target="lh-levels">
                @Model.Translate(BaseLayoutStrings.HeaderSlots)
            </a>
            <a class="item lh-sidebar" target="lh-playlists">
                Playlists
            </a>
            @if (Model.User == Model.ProfileUser)
            {
                <a class="item lh-sidebar" target="lh-hearted">
                    Hearted Levels
                </a>
                <a class="item lh-sidebar" target="lh-queued">
                    Queued Levels
                </a>
            }
        </div>
    </div>
    @{
        string divLength = isMobile ? "sixteen" : "thirteen";
    }
    <div class="@divLength wide stretched column">
        <div class="lh-content" id="lh-comments">
            @await Html.PartialAsync("Partials/CommentsPartial", new ViewDataDictionary(ViewData.WithLang(language).WithTime(timeZone))
                   { {"PageOwner", Model.ProfileUser.UserId}, })
        </div>
        <div class="lh-content" id="lh-photos">
            <div class="ui purple segment" id="photos">
                @if (Model.Photos != null && Model.Photos.Count != 0)
                {
                    <div class="ui center aligned grid">
                        @foreach (Photo photo in Model.Photos)
                        {
                            string width = isMobile ? "sixteen" : "eight";
                            bool canDelete = Model.User != null && (Model.User.IsModerator || Model.User.UserId == photo.CreatorId);
                            <div class="@width wide column">
                                @await photo.ToHtml(Html, ViewData, language, timeZone, canDelete)
                            </div>
                        }
                    </div>
                    @if (isMobile)
                    {
                        <br/>
                    }
                }
                else
                {
                    <p>This user hasn't uploaded any photos</p>
                }
            </div>
        </div>
        <div class="lh-content" id="lh-levels">
            <div class="ui green segment" id="levels">
                @if (Model.Slots?.Count == 0)
                {
                    <p>This user hasn't published any levels</p>
                }
                @foreach (Slot slot in Model.Slots ?? new List<Slot>())
                {
                    <div class="ui segment">
                        @await slot.ToHtml(Html, ViewData, Model.User, $"~/user/{Model.ProfileUser.UserId}#levels", language, timeZone, isMobile, true)
                    </div>
                }
            </div>
        </div>
        <div class="lh-content" id="lh-playlists">
            <div class="ui purple segment">
                <p>@Model.Translate(GeneralStrings.Soon)</p>
            </div>
        </div>
        @if (Model.User == Model.ProfileUser)
        {
            <div class="lh-content" id="lh-hearted">
                <div class="ui pink segment" id="hearted">
                    @if (Model.HeartedSlots?.Count == 0)
                    {
                        <p>You haven't hearted any levels</p>
                    }
                    else
                    {
                        <p>You have hearted @(Model.HeartedSlots?.Count) levels</p>
                    }
                    @foreach (Slot slot in Model.HeartedSlots ?? new List<Slot>())
                    {
                        <div class="ui segment">
                            @await slot.ToHtml(Html, ViewData, Model.User, $"~/user/{Model.ProfileUser.UserId}#hearted", language, timeZone, isMobile, true)
                        </div>
                    }
                </div>
            </div>
            <div class="lh-content" id="lh-queued">
                <div class="ui yellow segment" id="queued">
                    @if (Model.QueuedSlots?.Count == 0)
                    {
                        <p>You haven't queued any levels</p>
                    }
                    else
                    {
                        <p>There are @(Model.QueuedSlots?.Count) levels in your queue</p>
                    }
                    @foreach (Slot slot in Model.QueuedSlots ?? new List<Slot>())
                    {
                        <div class="ui segment">
                            @await slot.ToHtml(Html, ViewData, Model.User, $"~/user/{Model.ProfileUser.UserId}#queued", language, timeZone, isMobile, true)
                        </div>
                    }
                </div>
            </div>
        }
    </div>
</div>

@if (Model.User != null && Model.User.IsModerator)
{
    <div class="ui green segment">
        <h2>Moderation Options</h2>

        @if (!Model.ProfileUser.IsBanned)
        {
            <div>
                <a class="ui red button" href="/moderation/newCase?type=@((int)CaseType.UserBan)&affectedId=@Model.ProfileUser.UserId">
                    <i class="ban icon"></i>
                    <span>Ban User</span>
                </a>
            </div>
            <div class="ui fitted hidden divider"></div>
        }
        
        @if (Model.ProfileUser.CommentsEnabled)
        {
            <div>
                <a class="ui yellow button" href="/moderation/newCase?type=@((int)CaseType.UserDisableComments)&affectedId=@Model.ProfileUser.UserId">
                    <i class="lock icon"></i>
                    <span>Disable Comments</span>
                </a>
            </div>
            <div class="ui fitted hidden divider"></div>
        }
        
        <div>
            <a class="ui red button" href="/moderation/user/@Model.ProfileUser.UserId/wipePlanets">
                <i class="trash alternate icon"></i>
                <span>Wipe user's earth decorations</span>
            </a>
        </div>
        <div class="ui fitted hidden divider"></div>
        
        @if (Model.User.IsAdmin)
        {
            @await Html.PartialAsync("Partials/AdminSetGrantedSlotsFormPartial", Model.ProfileUser)
        }
    </div>
    @if (isMobile)
    {
        <br/>
    }
}

<script>
const sidebarElements = Array.from(document.querySelectorAll(".lh-sidebar"));
const contentElements = Array.from(document.querySelectorAll(".lh-content"));
let selectedId = window.location.hash;
if (selectedId.startsWith("#"))
    selectedId = selectedId.substring(1);
let selectedElement = document.getElementById(selectedId);
// id = lh-sidebar element
function setVisible(e){
    let eTarget = document.getElementById(e.target);
    if (!e || !eTarget) return;

    // make all active elements not active
    for (let active of document.getElementsByClassName("active")) {
        active.classList.remove("active");
    }
    // hide all content divs
    for (let i = 0; i < contentElements.length; i++){
        contentElements[i].style.display = "none";
    }
    // unhide content
    eTarget.style.display = "";
    
    e.classList.add("active");
}

sidebarElements.forEach(el => {
    if (el.classList.contains("active")){
        setVisible(el);
    }
    el.addEventListener('click', event => {
        if (!event.target.target) return;

        setVisible(event.target)
    })
})
// set the active content window based on url
if (selectedElement != null) {
    while (selectedElement != null && !selectedElement.classList.contains("lh-content")){
        selectedElement = selectedElement.parentElement;
    }
    
    let sidebarEle = document.querySelector("[target=" + selectedElement.id + "]")
    setVisible(sidebarEle);
}
</script>