import * as Cart from './modules/cart.js';
import { numberToEuroFormat } from './utils.js';
import { Product } from './elements/product.js';

async function displayProducts() {
    document.querySelector('#list-products-in-bag').innerHTML = '';
    let products = await Cart.getItems();
    if (products.length > 0) {
        products.forEach(function (product) {
            let elementProduct = Product(product);

            let productRow = document.createElement("tr");
            productRow.innerHTML = elementProduct;

            document.querySelector('#list-products-in-bag').append(productRow);
        });

        let quantity = await Cart.getQuantity();
        document.querySelectorAll('.js-product-counter').forEach(element => {
            element.innerText = quantity;

            if (quantity > 0) element.style.display = "block";
            else element.style.display = "none";
        });

        let totalPrice = await Cart.getTotalPrice();
        document.querySelectorAll(".js-total-price").forEach(element => {
            element.innerText = numberToEuroFormat(totalPrice);
        });

        let link = await Cart.getLink();
        document.querySelectorAll('.js-cart-link').forEach(element => element.value = link);

        if (navigator.share) document.querySelectorAll(".btn-share").forEach(button => {
            button.addEventListener("click", async function () {
                try {
                    const shareData = {
                        title: "Share cart list",
                        text: 'share cart list',
                        url: link,
                    };
                    await navigator.share(shareData);
                }
                catch (error) {
                    console.error(error);
                }
            });
        });
        else {
            document.querySelectorAll(".btn-share").forEach(button => { button.style.display = "none"; });

            console.warn('Native Web Sharing not supported');
        }

        let copyCartLink = document.querySelector('#btn-copy-cart-link');

        let copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
        </svg>`;

        let copiedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
        </svg>`;

        if (copyCartLink != undefined) copyCartLink.addEventListener("click", () => {
            let cartLink = document.querySelector('.cart-link');
            if (cartLink && cartLink.select) {
                navigator.clipboard.writeText(cartLink.value).then(() => {
                    copyCartLink.innerHTML = copiedIcon;
                    setTimeout(() => { copyCartLink.innerHTML = copyIcon; }, 3000);
                }).catch(function (error) {
                    console.error(error);
                });
            }
        });

        //document.querySelectorAll('.cart-link').forEach(cartLink => cartLink.style.display = "block");
        //document.querySelectorAll(".btn-share").forEach(btnShare => btnShare.style.display = "block");

        //document.querySelector('#shopping-cart').querySelector('.modal-footer').style.display = "block";
        //document.querySelector('#total-price').parentElement.parentElement.parentElement.style.display = "block";
        document.querySelector('#no-products').style.display = "none";
        document.querySelector('#cart-error').style.display = "none";
        document.querySelector('#modal-buttons').style.display = "flex";
    } else {
        document.querySelectorAll('.cart-link').forEach(cartLink => cartLink.style.display = "none");
        document.querySelectorAll(".btn-share").forEach(btnShare => btnShare.style.display = "none");

        //document.querySelector('#list-products-in-bag').parentElement.parentElement.parentElement.parentElement.parentElement.querySelector('.modal-footer').style.display = "none";
        //document.querySelector('#total-price').parentElement.parentElement.parentElement.style.display = "none";
        document.querySelector('#no-products').style.display = "block";
        document.querySelector('#cart-error').style.display = "none";
        document.querySelector('#modal-buttons').style.display = "none";

        document.querySelector('#selected-products').style.display = "none";
    }
}

document.addEventListener('DOMContentLoaded', async () => {

    displayProducts();

    document.body.addEventListener('click', async function (event) {
        if (event.target.matches('.btn-remove-product')) {
            let button = event.target;

            let productId = button.getAttribute('data-id');

            await Cart.removeItem(productId);

            button.parentElement.parentElement.remove();

            displayProducts();

            /* productId = document.querySelector('meta[name="product-id"]').getAttribute('content');
            if (productId != undefined) {
                let objProduct = objProducts.find(obj => obj.id == productId);
                if (objProduct == undefined) {
                    $('#btn-add-to-bag').show();
                    $('#btn-show-bag').hide();
                    if (objProducts.length > 0) $('#btn-check-out').parent().hide();
                    else $('#btn-check-out').parent().show();
                }
                else {
                    $('#btn-add-to-bag').hide();
                    $('#btn-show-bag').show();
                    $('#btn-check-out').parent().hide();
                    $('#count-items-in-bag').html(objProduct.quantity + `<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`);
                }
            } */
        }
    });

    /* document.querySelectorAll('.select-quantity').forEach(async input => {

        let quantity = input.value;
        let productId = input.getAttribute('data-id');

        Cart.updateItem(productId, { quantity: quantity });

        let product = Cart.getItem(productId);

        let elementPrice = `
        <span>${numberToEuroFormat(product.calc_preis)}</span>`;
        if (product.calc_preis != product.preis) elementPrice += `
        <br>
        <button style="font-size: 14px; padding: 0;" class="btn btn-link text-muted text-decoration-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
            <svg style="fill: currentColor; width: 15px; margin-right: 2px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M349.66 173.65l-11.31-11.31c-3.12-3.12-8.19-3.12-11.31 0l-164.7 164.69c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l164.69-164.69c3.13-3.12 3.13-8.18.01-11.31zM240 192c0-26.47-21.53-48-48-48s-48 21.53-48 48 21.53 48 48 48 48-21.53 48-48zm-64 0c0-8.83 7.19-16 16-16s16 7.17 16 16-7.19 16-16 16-16-7.17-16-16zm144 80c-26.47 0-48 21.53-48 48s21.53 48 48 48 48-21.53 48-48-21.53-48-48-48zm0 64c-8.81 0-16-7.17-16-16s7.19-16 16-16 16 7.17 16 16-7.19 16-16 16zm192-80c0-35.5-19.4-68.2-49.6-85.5 9.1-33.6-.3-70.4-25.4-95.5s-61.9-34.5-95.5-25.4C324.2 19.4 291.5 0 256 0s-68.2 19.4-85.5 49.6c-33.6-9.1-70.4.3-95.5 25.4s-34.5 61.9-25.4 95.5C19.4 187.8 0 220.5 0 256s19.4 68.2 49.6 85.5c-9.1 33.6.3 70.4 25.4 95.5 26.5 26.5 63.4 34.1 95.5 25.4 17.4 30.2 50 49.6 85.5 49.6s68.1-19.4 85.5-49.6c32.7 8.9 69.4.7 95.5-25.4 25.1-25.1 34.5-61.9 25.4-95.5 30.2-17.3 49.6-50 49.6-85.5zm-91.1 68.3c5.3 11.8 29.5 54.1-6.5 90.1-28.9 28.9-57.5 21.3-90.1 6.5C319.7 433 307 480 256 480c-52.1 0-64.7-49.5-68.3-59.1-32.6 14.8-61.3 22.2-90.1-6.5-36.8-36.7-10.9-80.5-6.5-90.1C79 319.7 32 307 32 256c0-52.1 49.5-64.7 59.1-68.3-5.3-11.8-29.5-54.1 6.5-90.1 36.8-36.9 80.8-10.7 90.1-6.5C192.3 79 205 32 256 32c52.1 0 64.7 49.5 68.3 59.1 11.8-5.3 54.1-29.5 90.1 6.5 36.8 36.7 10.9 80.5 6.5 90.1C433 192.3 480 205 480 256c0 52.1-49.5 64.7-59.1 68.3z"/></svg>
            Mengenrabat
        </button>
        <span class="badge text-bg-dark">${(((product.calc_preis - product.preis) * 100) / product.preis).toFixed(2)} %</span>
        `;
        input.parentElement.parentElement.querySelector('.product-price').innerHTML = elementPrice;

        quantity = await Cart.getQuantity();
        document.querySelectorAll('.js-product-counter').forEach(counter => {
            counter.innerText = quantity;
            if (quantity > 0) counter.style.display = "block";
            else counter.style.display = "none";
        });

        document.querySelector('#total-price').innerText = numberToEuroFormat(Cart.getTotalPrice());

        productId = document.querySelector('meta[name="product-id"]').getAttribute('content');
        if (productId != undefined) {
            let objProduct = objProducts.find(obj => obj.id == productId);
            if (objProduct == undefined) {
                $('#btn-add-to-bag').show();
                $('#btn-show-bag').hide();
                if (objProducts.length > 0) $('#btn-check-out').parent().hide();
                else $('#btn-check-out').parent().show();
            }
            else {
                $('#btn-add-to-bag').hide();
                $('#btn-show-bag').show();
                $('#btn-check-out').parent().hide();
                $('#count-items-in-bag').html(objProduct.quantity + `<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`);
            }
        }
}   ); * /

    /* let sharedCode = getSharedCode();
    if (sharedCode) {
        if (Cart.getItems().length > 0) $('#modal-confirm-product-replacement').modal('show');
        else $('#modal-confirm-addition-of-products').modal('show');
 
        $('.btn-confirm-product-link').click(function () {
            objProducts = JSON.parse(sharedCode);
            window.location.replace($('meta[name="checkout"]').attr('content'));
        });
    } */

    /* if (localStorage.getItem("dismiss-message") == 1) $('.alert-dismissible').remove();
    else $('.alert-dismissible').show();
    $('#btn-close-message').click(function () { localStorage.setItem("dismiss-message", 1); }); */
});