<div class="product_image_area">
    <div class="container">
        <div class="row s_product_inner">
            <div class="col-lg-6">
                <div class="s_product_img">
                    <div id="carouselExampleIndicators"
                         class="carousel slide"
                         data-ride="carousel">
                        <ol class="carousel-indicators">
                            @for (int i = 0; i < this.Model.ProductImages.Count(); i++)
                            {
                                <li data-target="#carouselExampleIndicators" data-slide-to="@i" class="@(i == 0 ? "active" : null)">
                                    <img class="smallImageProductDetails" src="@this.Model.ProductImages.ElementAt(i).ImageUrl" alt="@i" />
                                </li>
                            }
                        </ol>
                        <div class="carousel-inner">
                            @for (int i = 0; i < this.Model.ProductImages.Count(); i++)
                            {
                                <div class="carousel-item @(i == 0 ? "active" : null)">
                                    <img class="d-block imageDetails" src="@this.Model.ProductImages.ElementAt(i).ImageUrl" alt="@i" />
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 offset-lg-1">
                <div class="s_product_text">
                    <h3>@this.Model.Name</h3>
                    <h2>@this.Model.Price</h2>
                    <ul class="list">
                        <li>
                            <a class="active">
                                <span>Category</span> : @this.Model.ProductCategory.Title
                            </a>
                        </li>
                        <li>
                            <a class="active"> <span>Availibility</span> : @this.Model.AvailableQuantity in stock</a>
                        </li>
                    </ul>
                    <p>@this.Model.ShortContent</p>
                    <div class="product_count">
                        <label for="qty">Quantity:</label>
                        <input type="number" @bind="this.wantedQuantity" max="@this.Model.AvailableQuantity" min="1" />
                    </div>
                    <div class="card_area">
                        <a class="main_btn" @onclick="(() => this.AddProductToBasket(this.Model.Id, this.wantedQuantity))">
                            Add to Cart
                        </a>
                        <a class="icon_btn" href="#">
                            <i class="lnr lnr lnr-diamond"></i>
                        </a>
                        <a class="icon_btn" @onclick="(() => this.AddProductToFavorite(this.Model.Id))">
                            <i class="lnr lnr lnr-heart"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public ProductViewModel Model { get; set; }

    private int wantedQuantity = 1;

    private async Task AddProductToBasket(string id, int quantity)
    {
        this.ShoppingCartState.AddProduct(id, quantity);

        var oldValue = await this.SessionStorage.GetItemAsync<Dictionary<string, int>>("CodeShop");
        if (oldValue.Any(x => x.Key == id))
        {
            oldValue[id] += quantity;
        }
        else
        {
            oldValue.Add(id, quantity);
        }

        await this.SessionStorage.SetItemAsync("CodeShop", oldValue);
    }

    private async Task AddProductToFavorite(string id)
    {
        this.FavoriteProductsState.AddProduct(id);
        var oldValues = await this.LocalStorage.GetItemAsync<List<string>>("CodeShopFavProducts");
        if (!oldValues.Any(x => x == id))
        {
            oldValues.Add(id);
        }

        await this.LocalStorage.SetItemAsync("CodeShopFavProducts", oldValues);
    }
}