import { Component } from "/js/components/component.js";

const ICONS = {
  custom: new Set([
    "chat-dots",
    "chat-dots-line",
    "check",
    "circle-check",
    "crop-indicator",
    "hamburger-menu",
    "reply",
    "repost",
    "verified-check",
    "verifier-check",
  ]),
  majesticons: new Set([
    "add-column",
    "add-column-line",
    "add-row",
    "add-row-line",
    "airplane",
    "airplane-flight-2",
    "airplane-flight-2-line",
    "airplane-line",
    "alert-circle",
    "alert-circle-line",
    "align-bottom",
    "align-bottom-line",
    "align-horizontal-center",
    "align-horizontal-center-line",
    "align-left",
    "align-left-line",
    "align-right",
    "align-right-line",
    "align-top",
    "align-top-line",
    "align-vertical-center",
    "align-vertical-center-line",
    "analytics",
    "analytics-delete",
    "analytics-delete-line",
    "analytics-line",
    "analytics-plus",
    "analytics-plus-line",
    "analytics-restricted",
    "analytics-restricted-line",
    "arrow-down",
    "arrow-down-circle",
    "arrow-down-circle-line",
    "arrow-down-line",
    "arrow-left",
    "arrow-left-circle",
    "arrow-left-circle-line",
    "arrow-left-line",
    "arrow-right",
    "arrow-right-circle",
    "arrow-right-circle-line",
    "arrow-right-line",
    "arrow-up",
    "arrow-up-circle",
    "arrow-up-circle-line",
    "arrow-up-line",
    "arrows-collapse-full",
    "arrows-collapse-full-line",
    "arrows-expand-full",
    "arrows-expand-full-line",
    "article",
    "article-line",
    "article-search",
    "article-search-line",
    "atom-2",
    "atom-2-line",
    "attachment",
    "attachment-line",
    "award",
    "award-line",
    "back-circle",
    "back-circle-line",
    "backward-circle",
    "backward-circle-line",
    "backward-start-circle",
    "backward-start-circle-line",
    "band-aids",
    "band-aids-line",
    "barcode-2",
    "barcode-2-line",
    "basket-2",
    "basket-2-line",
    "bath-shower",
    "bath-shower-line",
    "battery",
    "battery-full",
    "battery-full-line",
    "battery-half",
    "battery-half-line",
    "battery-line",
    "battery-low",
    "battery-low-line",
    "beach",
    "beach-line",
    "bell",
    "bell-line",
    "bitcoin-circle",
    "bitcoin-circle-line",
    "bluetooth",
    "bluetooth-line",
    "bold",
    "bold-line",
    "book",
    "book-line",
    "book-minus",
    "book-minus-line",
    "book-open",
    "book-open-line",
    "book-plus",
    "book-plus-line",
    "bookmark",
    "bookmark-line",
    "bookmark-minus",
    "bookmark-minus-line",
    "bookmark-plus",
    "bookmark-plus-line",
    "box",
    "box-line",
    "briefcase",
    "briefcase-line",
    "browser",
    "browser-cookie",
    "browser-cookie-line",
    "browser-line",
    "bug-2",
    "bug-2-line",
    "burger",
    "burger-line",
    "bus",
    "bus-line",
    "cake",
    "cake-line",
    "calculator",
    "calculator-line",
    "calendar",
    "calendar-line",
    "calendar-plus",
    "calendar-plus-line",
    "camera",
    "camera-line",
    "camera-off",
    "camera-off-line",
    "car",
    "car-line",
    "cent-circle",
    "cent-circle-line",
    "chat",
    "chat-2",
    "chat-2-line",
    "chat-2-text",
    "chat-2-text-line",
    "chat-line",
    "chat-signal",
    "chat-signal-line",
    "chat-status",
    "chat-status-line",
    "chat-text",
    "chat-text-line",
    "chats",
    "chats-2",
    "chats-2-line",
    "chats-line",
    "checkbox-list",
    "checkbox-list-detail",
    "checkbox-list-detail-line",
    "checkbox-list-line",
    "cheese",
    "cheese-line",
    "chevron-down",
    "chevron-down-circle",
    "chevron-down-circle-line",
    "chevron-down-line",
    "chevron-left",
    "chevron-left-circle",
    "chevron-left-circle-line",
    "chevron-left-line",
    "chevron-right",
    "chevron-right-circle",
    "chevron-right-circle-line",
    "chevron-right-line",
    "chevron-up",
    "chevron-up-circle",
    "chevron-up-circle-line",
    "chevron-up-line",
    "chromecast",
    "chromecast-line",
    "church",
    "church-line",
    "clipboard",
    "clipboard-check",
    "clipboard-check-line",
    "clipboard-line",
    "clipboard-minus",
    "clipboard-minus-line",
    "clipboard-plus",
    "clipboard-plus-line",
    "clock",
    "clock-line",
    "clock-plus",
    "clock-plus-line",
    "close",
    "close-line",
    "cloud",
    "cloud-line",
    "code",
    "code-block",
    "code-block-line",
    "code-line",
    "coins",
    "coins-line",
    "comet",
    "comet-line",
    "comment",
    "comment-2",
    "comment-2-line",
    "comment-2-text",
    "comment-2-text-line",
    "comment-line",
    "comment-text",
    "comment-text-line",
    "comments",
    "comments-2",
    "comments-2-line",
    "comments-line",
    "community",
    "community-line",
    "compass-2",
    "compass-2-line",
    "cookie",
    "cookie-line",
    "covid",
    "covid-exclamation",
    "covid-exclamation-line",
    "covid-line",
    "covid-off",
    "covid-off-line",
    "cpu",
    "cpu-line",
    "creditcard",
    "creditcard-hand",
    "creditcard-hand-line",
    "creditcard-line",
    "creditcard-plus",
    "creditcard-plus-line",
    "crown",
    "crown-line",
    "cup",
    "cup-line",
    "curly-braces",
    "curly-braces-line",
    "data",
    "data-line",
    "data-minus",
    "data-minus-line",
    "data-plus",
    "data-plus-line",
    "delete-bin",
    "delete-bin-line",
    "distribute-horizontal",
    "distribute-horizontal-line",
    "distribute-vertical",
    "distribute-vertical-line",
    "divide",
    "divide-line",
    "document",
    "document-award",
    "document-award-line",
    "document-line",
    "dollar-circle",
    "dollar-circle-line",
    "door-enter",
    "door-enter-line",
    "door-exit",
    "door-exit-line",
    "earth-sphere",
    "earth-sphere-line",
    "edit-pen-2",
    "edit-pen-2-line",
    "edit-pen-4",
    "edit-pen-4-line",
    "eject",
    "eject-line",
    "eraser",
    "eraser-line",
    "etherium-circle",
    "etherium-circle-line",
    "euro-circle",
    "euro-circle-line",
    "eye",
    "eye-line",
    "eye-off",
    "eye-off-line",
    "ferris-wheel",
    "ferris-wheel-line",
    "file",
    "file-line",
    "file-minus",
    "file-minus-line",
    "file-plus",
    "file-plus-line",
    "filter",
    "filter-line",
    "fish",
    "fish-line",
    "flag",
    "flag-line",
    "flask",
    "flask-line",
    "flower-2",
    "flower-2-line",
    "folder",
    "folder-check",
    "folder-check-line",
    "folder-line",
    "folder-minus",
    "folder-minus-line",
    "folder-plus",
    "folder-plus-line",
    "font-size",
    "font-size-line",
    "forward-circle",
    "forward-circle-line",
    "forward-end-circle",
    "forward-end-circle-line",
    "git-branch",
    "git-branch-line",
    "git-commit",
    "git-commit-line",
    "git-compare",
    "git-compare-line",
    "git-fork",
    "git-fork-line",
    "git-merge",
    "git-merge-line",
    "git-pull",
    "git-pull-line",
    "glas-water",
    "glas-water-line",
    "globe-earth",
    "globe-earth-2",
    "globe-earth-2-line",
    "globe-earth-line",
    "globe-grid",
    "globe-grid-line",
    "hand",
    "hand-line",
    "hand-pointer",
    "hand-pointer-2",
    "hand-pointer-2-line",
    "hand-pointer-event",
    "hand-pointer-event-line",
    "hand-pointer-line",
    "hard-drive",
    "hard-drive-line",
    "headset",
    "headset-line",
    "heart",
    "heart-line",
    "home",
    "home-analytics",
    "home-analytics-line",
    "home-line",
    "home-simple",
    "home-simple-line",
    "image",
    "image-circle",
    "image-circle-line",
    "image-circle-off",
    "image-circle-off-line",
    "image-circle-plus",
    "image-circle-plus-line",
    "image-circle-story",
    "image-circle-story-line",
    "image-frame",
    "image-frame-line",
    "image-in-picture",
    "image-in-picture-line",
    "image-line",
    "image-multiple",
    "image-multiple-line",
    "image-off",
    "image-off-line",
    "image-photography",
    "image-photography-line",
    "image-plus",
    "image-plus-line",
    "incognito",
    "incognito-line",
    "info-circle",
    "info-circle-line",
    "iphone-old-apps",
    "iphone-old-apps-line",
    "iphone-x-apps",
    "iphone-x-apps-line",
    "italic",
    "italic-line",
    "key",
    "key-line",
    "keyboard",
    "keyboard-line",
    "laptop",
    "laptop-line",
    "leaf-3-angled",
    "leaf-3-angled-line",
    "library",
    "library-line",
    "lidquid-drop-waves-2",
    "lidquid-drop-waves-2-line",
    "lifebuoy",
    "lifebuoy-line",
    "lightbulb-shine",
    "lightbulb-shine-line",
    "lightning-bolt",
    "lightning-bolt-line",
    "line-height",
    "line-height-line",
    "link",
    "link-circle",
    "link-circle-line",
    "link-line",
    "lira-circle",
    "lira-circle-line",
    "list-box",
    "list-box-line",
    "lock",
    "lock-line",
    "lock-off",
    "lock-off-line",
    "login",
    "login-half-circle",
    "login-half-circle-line",
    "login-line",
    "logout",
    "logout-half-circle",
    "logout-half-circle-line",
    "logout-line",
    "mail",
    "mail-line",
    "map-marker",
    "map-marker-area",
    "map-marker-area-line",
    "map-marker-line",
    "map-marker-path",
    "map-marker-path-line",
    "map-marker-plus",
    "map-marker-plus-line",
    "map-simple",
    "map-simple-destination",
    "map-simple-destination-line",
    "map-simple-line",
    "map-simple-marker",
    "map-simple-marker-line",
    "map-simple-off",
    "map-simple-off-line",
    "maximize",
    "maximize-line",
    "megaphone",
    "megaphone-line",
    "menu",
    "menu-expand-left",
    "menu-expand-left-line",
    "menu-expand-right",
    "menu-expand-right-line",
    "menu-line",
    "microphone",
    "microphone-line",
    "minimize",
    "minimize-line",
    "minus",
    "minus-five-circle",
    "minus-five-circle-line",
    "minus-line",
    "minus-ten-circle",
    "minus-ten-circle-line",
    "money",
    "money-hand",
    "money-hand-line",
    "money-line",
    "money-minus",
    "money-minus-line",
    "money-plus",
    "money-plus-line",
    "monitor",
    "monitor-line",
    "moon",
    "moon-line",
    "more-menu",
    "more-menu-line",
    "more-menu-vertical",
    "more-menu-vertical-line",
    "mouse",
    "mouse-line",
    "multiply",
    "multiply-line",
    "music",
    "music-line",
    "music-note",
    "music-note-line",
    "next-circle",
    "next-circle-line",
    "note-text",
    "note-text-line",
    "note-text-minus",
    "note-text-minus-line",
    "note-text-plus",
    "note-text-plus-line",
    "noteblock",
    "noteblock-line",
    "noteblock-text",
    "noteblock-text-line",
    "open",
    "open-line",
    "paper-fold",
    "paper-fold-line",
    "paper-fold-text",
    "paper-fold-text-line",
    "paper-roll-2",
    "paper-roll-2-line",
    "paragraph",
    "paragraph-line",
    "pause-circle",
    "pause-circle-line",
    "percent",
    "percent-line",
    "phone",
    "phone-dial",
    "phone-dial-line",
    "phone-hangup",
    "phone-hangup-line",
    "phone-incoming",
    "phone-incoming-line",
    "phone-line",
    "phone-outgoing",
    "phone-outgoing-line",
    "phone-retro",
    "phone-retro-line",
    "phone-ring",
    "phone-ring-line",
    "pill",
    "pill-line",
    "pin",
    "pin-line",
    "pinwheel",
    "pinwheel-line",
    "planet",
    "planet-line",
    "planet-ring-2",
    "planet-ring-2-line",
    "planet-rocket",
    "planet-rocket-line",
    "play-circle",
    "play-circle-line",
    "playlist",
    "playlist-line",
    "plus",
    "plus-five-circle",
    "plus-five-circle-line",
    "plus-line",
    "plus-minus",
    "plus-minus-2",
    "plus-minus-2-line",
    "plus-minus-line",
    "plus-ten-circle",
    "plus-ten-circle-line",
    "pound-circle",
    "pound-circle-line",
    "presentation",
    "presentation-chart",
    "presentation-chart-line",
    "presentation-line",
    "presentation-play",
    "presentation-play-line",
    "printer",
    "printer-line",
    "pulse",
    "pulse-line",
    "puzzle",
    "puzzle-line",
    "qr-code",
    "qr-code-line",
    "question-circle",
    "question-circle-line",
    "radio-list",
    "radio-list-line",
    "receipt-text",
    "receipt-text-line",
    "redo",
    "redo-line",
    "reload",
    "reload-circle",
    "reload-circle-line",
    "reload-line",
    "remove-column",
    "remove-column-line",
    "remove-format",
    "remove-format-line",
    "remove-row",
    "remove-row-line",
    "repeat-circle",
    "repeat-circle-line",
    "restricted",
    "restricted-line",
    "robot",
    "robot-line",
    "rocket-3-start",
    "rocket-3-start-line",
    "rubel-circle",
    "rubel-circle-line",
    "ruler-2",
    "ruler-2-line",
    "rupee-circle",
    "rupee-circle-line",
    "save",
    "save-line",
    "scale-light",
    "scale-light-line",
    "scan-fingerprint",
    "scan-fingerprint-line",
    "scan-user",
    "scan-user-line",
    "scanner",
    "scanner-line",
    "scooter",
    "scooter-line",
    "script-prescription",
    "script-prescription-line",
    "scroll",
    "scroll-line",
    "scroll-text",
    "scroll-text-line",
    "search",
    "search-line",
    "search-minus",
    "search-minus-line",
    "search-plus",
    "search-plus-line",
    "send",
    "send-line",
    "server",
    "server-line",
    "settings-cog",
    "settings-cog-check",
    "settings-cog-check-line",
    "settings-cog-line",
    "settings-cog-plus",
    "settings-cog-plus-line",
    "share",
    "share-circle",
    "share-circle-line",
    "share-line",
    "shield",
    "shield-line",
    "shield-off",
    "shield-off-line",
    "shield-plus",
    "shield-plus-line",
    "ship",
    "ship-line",
    "shooting-star",
    "shooting-star-line",
    "shopping-cart",
    "shopping-cart-line",
    "sim-card",
    "sim-card-line",
    "sitemap",
    "sitemap-line",
    "skull",
    "skull-line",
    "smartphone-apps",
    "smartphone-apps-line",
    "speaker",
    "speaker-line",
    "stop-circle",
    "stop-circle-line",
    "strike-through",
    "strike-through-line",
    "suitcase",
    "suitcase-2",
    "suitcase-2-line",
    "suitcase-3",
    "suitcase-3-line",
    "suitcase-line",
    "t-shirt",
    "t-shirt-line",
    "table",
    "table-heart",
    "table-heart-line",
    "table-line",
    "table-plus",
    "table-plus-line",
    "tag",
    "tag-line",
    "tag-off",
    "tag-off-line",
    "telescope",
    "telescope-line",
    "test-tube-filled",
    "test-tube-filled-line",
    "text",
    "text-align-center",
    "text-align-center-line",
    "text-align-justify",
    "text-align-justify-line",
    "text-align-left",
    "text-align-left-line",
    "text-align-right",
    "text-align-right-line",
    "text-line",
    "text-wrap",
    "text-wrap-line",
    "textbox",
    "textbox-line",
    "textbox-minus",
    "textbox-minus-line",
    "textbox-plus",
    "textbox-plus-line",
    "ticket",
    "ticket-check",
    "ticket-check-line",
    "ticket-line",
    "ticket-text",
    "ticket-text-line",
    "tickets",
    "tickets-line",
    "timer",
    "timer-line",
    "tooltip",
    "tooltip-line",
    "tooltip-text",
    "tooltip-text-line",
    "tooltips",
    "tooltips-2",
    "tooltips-2-line",
    "tooltips-line",
    "tv-old",
    "tv-old-line",
    "umbrella",
    "umbrella-line",
    "underline",
    "underline-2",
    "underline-2-line",
    "underline-line",
    "undo",
    "undo-line",
    "unlock-open",
    "unlock-open-line",
    "usb",
    "usb-line",
    "user",
    "user-box",
    "user-box-line",
    "user-line",
    "users",
    "users-line",
    "ux-circle",
    "ux-circle-line",
    "video",
    "video-line",
    "video-minus",
    "video-minus-line",
    "video-plus",
    "video-plus-line",
    "view-columns",
    "view-columns-line",
    "view-rows",
    "view-rows-line",
    "watch",
    "watch-line",
    "yen-circle",
    "yen-circle-line",
  ]),
};

const ICON_TO_SET = new Map();
for (const [iconset, icons] of Object.entries(ICONS)) {
  for (const icon of icons) {
    ICON_TO_SET.set(icon, iconset);
  }
}

class PluginIcon extends Component {
  static observedAttributes = ["icon"];
  static cache = new Map();

  cache = PluginIcon.cache;

  attributeChangedCallback() {
    this.render();
  }

  fetchIcon(iconset, icon) {
    const key = `${iconset}/${icon}`;
    if (this.cache.has(key)) {
      return this.cache.get(key);
    }
    const url = `/img/icons/${iconset}/${icon}.svg`;
    const promise =
      typeof globalThis.fetch === "function"
        ? globalThis.fetch(url).then((response) => {
            if (!response.ok) {
              throw new Error(
                `Failed to load icon "${key}": ${response.status}`,
              );
            }
            return response.text();
          })
        : Promise.reject(new Error("fetch-unavailable"));
    promise.catch(() => {});
    this.cache.set(key, promise);
    return promise;
  }

  async render() {
    const icon = this.getAttribute("icon");
    if (!icon) {
      this.innerHTML = "";
      return;
    }
    const iconset = ICON_TO_SET.get(icon);
    if (!iconset) {
      console.warn(`Unknown icon "${icon}"`);
      this.innerHTML = "";
      return;
    }
    try {
      const svg = await this.fetchIcon(iconset, icon);
      if (this.getAttribute("icon") !== icon) return;
      this.innerHTML = svg;
    } catch (error) {
      if (this.getAttribute("icon") !== icon) return;
      if (error.message !== "fetch-unavailable") {
        console.warn(error.message);
      }
      this.innerHTML = "";
    }
  }
}

PluginIcon.register();
