if (window.location.pathname.split('/')[3] === 'inventory') {
	const UserID = window.location.pathname.split('/')[2];
	if (UserID === JSON.parse(window.localStorage.getItem('p+account_info')).ID) {
		let Nav = document.getElementsByClassName('nav-pills')[0];
		let WishlistNav = document.createElement('li');
		WishlistNav.classList.add('nav-item');
		WishlistNav.innerHTML = `
        <a href="/users/${UserID}/inventory/wishlist/" class="nav-link">
            <i class="fa-regular fa-sparkles me-1"></i>
            <span class="pilltitle">Item Wishlist</span>
        </a>
        `;
		Nav.appendChild(WishlistNav);

		if (window.location.pathname.split('/')[4] === 'wishlist') {
			const ItemGrid = document.getElementsByClassName('itemgrid')[0];
			const ItemCardContents = `
            <a href="/store/:ItemID" class="text-reset">
                <div class="card mb-2">
                    :LimitedTag
                    <div class="card-body">
                        <img src=":ItemThumbnail" class="img-fluid rounded">
                    </div>
                </div>
                <h6 class="text-truncate mb-0">
                    :ItemName
                </h6>
            </a>
            <small class="text-muted d-block mb-1">
                by <a href="/users/:CreatorID" class="text-muted">:CreatorName</a>
            </small>
            <button class="polyplus-itemwish-removebtn btn btn-danger btn-sm" style="width: 100%;">X</button>
            `;

			Array.from(ItemGrid.children).forEach((element) => {
				element.remove();
			});
			Array.from(Nav.children).forEach((element) => {
				element = element.children[0];
				if (!(element === WishlistNav)) {
					if (element.classList.contains('active')) {
						element.classList.remove('active');
					}
				}
			});
			WishlistNav.children[0].classList.add('active');
			const Search = document.createElement('div');
			Search.classList = 'row';
			Search.innerHTML = `
            <div class="col-auto">
                <select class="form-select" id="polyplus-itemwish-type" style="width: 150px;">
                    <option value="any">Any</option>
                    <option value="hat">Hat</option>
                    <option value="face">Faces</option>
                    <option value="tool">Tools</option>
                    <option value="shirt">Shirt</option>
                    <option value="pants">Pants</option>
                </select>
            </div>
            <div class="col">
                <input id="polyplus-itemwish-searchbar" type="text" class="form-control bg-dark" placeholder="Search...">
            </div>
            <div class="col-auto">
                <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="polyplus-itemwish-isLimited">
                <label class="form-check-label" for="polyplus-itemwish-isLimited">
                    Is Limited?
                    <span class="text-muted" style="font-size: 0.65rem; display: block;">Items that are limited</span>
                </label>
                </div>
            </div>
            <div class="col-auto">
                <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="polyplus-itemwish-isAvailable">
                <label class="form-check-label" for="polyplus-itemwish-isAvailable">
                    Is Available?
                    <span class="text-muted" style="font-size: 0.65rem; display: block; width: 170px;">Items that are equal to or less than the budget (excluding limiteds)</span>
                </label>
                </div>
            </div>
            `;
			ItemGrid.parentElement.prepend(document.createElement('br'), ItemGrid.parentElement.children[0]);
			ItemGrid.parentElement.prepend(Search, ItemGrid.parentElement.children[0]);

			let Type = document.getElementById('polyplus-itemwish-type');
			let SearchBar = document.getElementById('polyplus-itemwish-searchbar');
			let IsLimited = document.getElementById('polyplus-itemwish-isLimited');
			let IsAvailable = document.getElementById('polyplus-itemwish-isAvailable');

			Type.addEventListener('change', function () {
				Update(Type.options[Type.selectedIndex].value, SearchBar.value, IsLimited.checked, IsAvailable.checked);
			});

			SearchBar.addEventListener('change', function () {
				Update(Type.options[Type.selectedIndex].value, SearchBar.value, IsLimited.checked, IsAvailable.checked);
			});

			IsLimited.addEventListener('change', function () {
				Update(Type.options[Type.selectedIndex].value, SearchBar.value, IsLimited.checked, IsAvailable.checked);
			});

			IsAvailable.addEventListener('change', function () {
				Update(Type.options[Type.selectedIndex].value, SearchBar.value, IsLimited.checked, IsAvailable.checked);
			});

			chrome.storage.sync.get(['PolyPlus_ItemWishlist'], function (result) {
				let Wishlist = result.PolyPlus_ItemWishlist || [];
				console.log('wishlist: ', Wishlist);
				Wishlist.forEach((element) => {
					let NewItemCard = document.createElement('div');
					NewItemCard.classList = 'px-0';
					fetch('https://api.polytoria.com/v1/store/:id'.replace(':id', element))
						.then((response) => response.json())
						.then((data) => {
							NewItemCard.innerHTML = ItemCardContents.replace(':ItemID', data.id)
								.replace(':ItemThumbnail', data.thumbnail)
								.replace(':ItemName', data.name)
								.replace(':CreatorID', data.creator.id)
								.replace(':CreatorName', data.creator.name);
							if (data.isLimited === true) {
								NewItemCard.innerHTML = NewItemCard.innerHTML.replace(':LimitedTag', '<div class="ribbon ribbon-limited ribbon-top-right"><span>Limited</span></div>');
							} else {
								NewItemCard.innerHTML = NewItemCard.innerHTML.replace(':LimitedTag', '');
							}
							NewItemCard.setAttribute('data-id', data.id);
							NewItemCard.setAttribute('data-name', data.name);
							NewItemCard.setAttribute('data-type', data.type);
							NewItemCard.setAttribute('data-creator', data.creator.name);
							NewItemCard.setAttribute('data-limited', data.isLimited);
							if (data.isLimited === false) {
								NewItemCard.setAttribute('data-price', data.price);
							}

							ItemGrid.appendChild(NewItemCard);

							NewItemCard.getElementsByClassName('polyplus-itemwish-removebtn')[0].addEventListener('click', function () {
								let Index = Wishlist.indexOf(parseInt(NewItemCard.getAttribute('data-id')));
								if (Index === -1) {
									NewItemCard.remove();
									return;
								} else {
									Wishlist.splice(Index, 1);
									console.log(Wishlist);
									NewItemCard.remove();
								}
								chrome.storage.sync.set({PolyPlus_ItemWishlist: Wishlist, arrayOrder: true}, function () {
									console.log('ItemWishlist successfully saved: ' + ItemWishlist);
								});
							});
						})
						.catch((error) => {
							console.error('Error:', error);
						});
				});
			});
		}
	}
}

function Update(type, query, isLimited, isAvailable) {
	let ItemGrid = document.getElementsByClassName('itemgrid')[0];
	let BrickBalance = parseInt(JSON.parse(window.localStorage.getItem('p+account_info')).Bricks);
	query = query.toLowerCase();
	let Results = Array.from(ItemGrid.children);
	for (let i = 0; i < Results.length; i++) {
		let Show = true;

		console.log('type: ', type);
		if (!(type === 'any')) {
			console.log("isn't any");
			if (!(Results[i].getAttribute('data-type') === type)) {
				Show = false;
			}
		}

		if (!Results[i].getAttribute('data-name').toLowerCase().startsWith(query)) {
			Show = false;
		}

		if (isLimited === true) {
			if (!(Results[i].getAttribute('data-limited') === 'true')) {
				Show = false;
			}
		}

		if (isAvailable === true) {
			if (!(parseInt(Results[i].getAttribute('data-price')) <= BrickBalance)) {
				Show = false;
			}
		}

		if (Show === true) {
			Results[i].style.display = 'block';
		} else {
			Results[i].style.display = 'none';
		}
	}
}