@using Models.GlobalInstances
@inject NavigationManager Navigation
<div id="leftframe" class="left_frame">


    <div class="logo">
        <img src="/images/logo.svg" alt="Logo site">
        <span class="logo_name">CARTAID</span>
    </div>

    <div class="menu">

        <a id="button_close" class="button_close_menu">
            <span></span>
            <span></span>
            <span></span>
        </a>

        <div class="elements_wishlisht">

            <div class="add_chat" @onclick="RedirectToNewChat" >
                <div>
                    <span>Search</span>
                    <span class="plus">+</span>
                </div>
            </div>

            <div class="wishlist_names">

                @if(Wishlists!=null){

                        @foreach (var item in Wishlists)
                    {
                        <section class="cont_wishlist">
                            <div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
                            <img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
                            <img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
                        </section>
                    }

                }else{
                    <div>loading ...</div>
                }

                
            </div>

        </div>

        <div class="line"></div>
        <div class="elements">
            <div class="info_user">
                <img src="/images/avatar.jpg" alt="Avatar user">
                <span class="user_name">@GlobalUser.Id</span>
            </div>

        </div>


    </div>


</div>


<script>

    function changetyle() {
        var left_frame = document.querySelector('.sidebar-menu');
        var right_frame = document.querySelector('.right-frame');
        var computedStyles = getComputedStyle(left_frame);
        var transformValue = computedStyles.transform;
        var button_open = document.querySelector('.button_open_menu');

        if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
            left_frame.style.transform = 'translateX(-110%)';
            button_open.style.visibility = 'visible';
            right_frame.style.left = '1.25em';

        } else {
            left_frame.style.transform = 'translateX(0)';
            button_open.style.visibility = 'hidden';
            right_frame.style.left = '23.25em';
        }
    }
    document.getElementById('button_close').addEventListener('click', changetyle);

</script>

@code {

    private void RedirectToPage(string itemId) {
            var url = $"/chat/{itemId}";
            Navigation.NavigateTo(url);
        }
    private void RedirectToNewChat() {
            var url = $"/";
            Navigation.NavigateTo(url);
        }
    private void RedirectToCard(string itemId) {
            var url = $"/chat/{itemId}/cart";
            Navigation.NavigateTo(url);
        }
    private void DeleteWishlist(string itemId) {
         
    }

}