---
import Icon from '@components/ui/icons/icon.astro';
---

<button
  type="button"
  class="focus-visible:ring-secondary group inline-flex items-center rounded-lg p-2.5 text-neutral-600 ring-neutral-500 transition duration-300 outline-none hover:bg-neutral-100 focus:outline-none focus-visible:ring-1 focus-visible:outline-none dark:text-neutral-400 dark:ring-neutral-200 dark:hover:bg-neutral-700"
  data-bookmark-button="bookmark-button"
>
  <Icon name="bookmark" />
</button>

<script>
  class Bookmark {
    private static readonly BOOKMARKS_KEY = 'bookmarks';
    private bookmarkButton: Element | null;

    constructor(private dataAttrValue: string) {
      this.bookmarkButton = document.querySelector(`[data-bookmark-button="${dataAttrValue}"]`);
    }

    private getStoredBookmarks(): string[] {
      const item = localStorage.getItem(Bookmark.BOOKMARKS_KEY);
      return item ? JSON.parse(item) : [];
    }

    init(): void {
      if (this.bookmarkButton && this.isStored()) {
        this.markAsStored();
      }

      this.bookmarkButton?.addEventListener('click', () => this.toggleBookmark());
    }

    isStored(): boolean {
      return this.getStoredBookmarks().includes(window.location.pathname);
    }

    markAsStored(): void {
      if (this.bookmarkButton) {
        this.bookmarkButton.classList.add('bookmarked');
        const svgElement = this.bookmarkButton.querySelector('svg');
        if (svgElement) {
          svgElement.setAttribute('class', 'h-6 w-6 fill-red-500 dark:fill-red-500');
        }
        const pathElement = svgElement?.querySelector('path');
        if (pathElement) {
          pathElement.setAttribute('class', 'fill-current text-red-500 dark:text-red-500');
        }
      }
    }

    unmarkAsStored(): void {
      if (this.bookmarkButton) {
        this.bookmarkButton.classList.remove('bookmarked');
        const svgElement = this.bookmarkButton.querySelector('svg');
        if (svgElement) {
          svgElement.setAttribute('class', 'h-6 w-6 fill-none');
        }
        const pathElement = svgElement?.querySelector('path');
        if (pathElement) {
          pathElement.setAttribute(
            'class',
            'fill-current text-neutral-500 group-hover:text-red-400 dark:text-neutral-500 group-hover:dark:text-red-400'
          );
        }
      }
    }

    toggleBookmark(): void {
      const storedBookmarks = this.getStoredBookmarks();
      const index = storedBookmarks.indexOf(window.location.pathname);
      if (index !== -1) {
        storedBookmarks.splice(index, 1);
        this.unmarkAsStored();
      } else {
        storedBookmarks.push(window.location.pathname);
        this.markAsStored();
      }
      localStorage.setItem(Bookmark.BOOKMARKS_KEY, JSON.stringify(storedBookmarks));
    }
  }

  new Bookmark('bookmark-button').init();
</script>