import { _favoritedPlaces, limits } from "@/utils/storage";
import { expireCache } from "@/utils/utilities";
const placeID = window.location.pathname.split('/')[2];

export async function favoritedPlaces() {
    let placeIDs = await _favoritedPlaces.getValue();
    const titleCard = document.getElementById;

    const button = document.createElement('button');
	button.classList.add('btn', 'btn-primary', 'btn-sm');
    button.style.position = 'absolute';
    button.style.top = '0';
    button.style.right = '0';
    button.style.margin = '4px';
    button.style.fontSize = '1.3em';
	button.innerHTML = `
	<i class="fa-regular fa-star"></i>
	`;

    const update = function() {
        button.classList.value = 'btn btn-primary btn-sm';
		button.disabled = false;
		if (placeIDs.indexOf(placeID) == -1) {
			// Not Pinned
			if (placeIDs.length >= limits.favoritedPlaces) {
				button.disabled = true;
			}
			button.children[0].classList.value = 'fa-regular fa-star';
		} else {
			// Pinned
			button.children[0].classList.value = 'fa-duotone fa-star';
		}
    };

    button.addEventListener('mouseenter', function() {
		if (placeIDs.indexOf(placeID) != -1) {
			button.classList.add('btn-danger');
			button.classList.remove('btn-primary');
			button.children[0].classList.add('fa-star-half-stroke');
			button.children[0].classList.remove('fa-star');
		};
	});

	button.addEventListener('mouseleave', function() {
		if (placeIDs.indexOf(placeID) != -1) {
			button.classList.add('btn-primary');
			button.classList.remove('btn-danger');
			button.children[0].classList.add('fa-star');
			button.children[0].classList.remove('fa-star-half-stroke');
		};
	});

	update();
	document.querySelector('h1.my-0')!.parentElement!.appendChild(button);

	button.addEventListener('click', function() {
		if (placeIDs.indexOf(placeID) == -1) {
			placeIDs.push(placeID);
		} else {
			placeIDs.splice(placeIDs.indexOf(placeID), 1);
		}

		expireCache('favoritedPlaces');
        _favoritedPlaces.setValue(placeIDs);
		update();
	});

	storage.watch<Array<string>>('sync:favoritedPlaces', (value, previous) => {
        placeIDs = value!;
    });
}