Vue.component('icon', {
  template: `
    <div class="single-icon">    
      <span 
        v-bind:class="this.class"
        v-on:click="copyToClipboard(utf8)" 
        class="actual-icon"
        ref="icon"></span>
      <span 
      class="copy-icon-popup" 
      v-bind:class="{ 'success': isCopied}" 
      ref="element">Copied!</span>
      <p 
        class="icon-name"
        v-on:click="copyToClipboard(span)"
        ref="span">{{ this.name }}</p>
    </div>
    `,
  props: ['name'],
  data() {
    return {
      utf8: '',
      isCopied: false
    }
  },
  computed: {
    class: function () {
      return "brz9-icon-" + this.name;
    },
    span: function () {
      return '<span class="brz9-icon-' + this.name + '"></span>';
    }
  },
  methods: {
    copyToClipboard(text) {
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      this.copyDone();
    },
    copyDone() {
      this.isCopied = true;
      this.$refs.element.addEventListener('animationend', () => {
        this.isCopied = false;
      });
    }
  },
  mounted() {
    query = '.' + this.class
    let span = document.querySelector(query)
    let style = window.getComputedStyle(span, ':before')
    let content = style.getPropertyValue('content')
    console.log(content)
    this.utf8 = content.replace('"', '').replace('"', '')
  }
})

let vm = new Vue({
  data() {
    return {
      os: [
        "gnu",
        "debian",
        "yunohost",
        "void",
        "archlinux",
        "gentoo",
        "redhat",
        "fedora",
        "manjaro",
        "linuxmint",
        "freebsd",
        "apple",
        "windows"
      ],
      streaming: [
        "bandcamp",
        "spotify",
        "applemusic",
        "soundcloud",
        "tidal"
      ],
      payment: [
        "cart",
        "price-tag",
        "price-tags",
        "barcode",
        "qrcode",
        "ticket",
        "credit-card",
        "visa",
        "mastercard",
        "applepay",
        "paypal",
        "stripe",
        "bitcoin",
        "dash",
        "monero",
        "ethereum",
        "ltc",
        "woocommerce",
        "liberapay",
        "patreon",
        "tipeee",
        "flattr"
      ],
      navigation: [
        "arrow-down",
        "arrow-down-left",
        "arrow-down-right",
        "arrow-left",
        "arrow-right",
        "arrow-up",
        "arrow-up-left",
        "arrow-up-right",
        "chevron-circle-down",
        "chevron-circle-left",
        "chevron-circle-right",
        "chevron-circle-up",
        "chevron-down",
        "chevron-left",
        "chevron-right",
        "chevron-up",
        "circle-down",
        "circle-left",
        "circle-right",
        "circle-up",
        "zoom-in",
        "zoom-out",
        "undo",
        "redo",
        "undo-arrow",
        "redo-arrow",
        "forward-arrow",
        "reply-arrow",
        "envelope",
        "envelope-open",
        "bubble",
        "bubbles",
        "bubbles2",
        "shrink",
        "shrink2",
        "enlarge",
        "enlarge2",
        "share",
        "share-out",
        "search",
        "plus",
        "minus",
        "cross",
        "checkmark",
        "checkmark-outline",
        "link",
        "embed",
        "embed-slash"
      ],
      form: [
        "radio-checked",
        "radio-checked-alt",
        "radio-unchecked",
        "checkbox-checked",
        "checkbox-unchecked"
      ],
      network: [
        "tree",
        "cloud",
        "cloud-check",
        "cloud-download",
        "cloud-upload",
        "upload",
        "download",
        "switch",
        "sphere",
        "earth",
        "power",
        "power-cord",
        "wifi"
      ],
      alert: [
        "warning",
        "info",
        "question",
        "cancel-circle",
        "blocked",
        "notification",
        "floppy-disk",
        "trophy",
        "newspaper",
        "pacman",
        "music",
        "leaf",
        "gift",
        "flag",
        "bug",
        "bell",
        "bin",
        "bin-alt",
        "book",
        "books",
        "bookmark",
        "bookmarks",
        "attachment",
        "address-book",
        "accessibility"
      ],
      time: [
        "calendar",
        "clock",
        "clock2",
        "alarm"
      ],
      login: [
        "user",
        "users",
        "enter",
        "exit",
        "equalizer",
        "equalizer2",
        "cog"
      ],
      afknav: [
        "compass",
        "compass2",
        "location",
        "location2",
        "map",
        "map2",
        "home",
        "office",
        "lab",
        "binoculars"
      ],
      fediverse: [
        "mastodon",
        "diaspora",
        "peertube",
        "pixelfed",
        "rss",
        "rss-square"
      ],
      socials: [
        "instagram",
        "threads",
        "twitter",
        "x",
        "wordpress",
        "nextcloud",
        "dropbox",
        "vk",
        "tripadvisor",
        "facebook",
        "tiktok",
        "twitch",
        "kick",
        "vimeo",
        "youtube",
        "reddit",
        "blogger",
        "medium",
        "linkedin",
        "fiverr",
        "stackoverflow",
        "quora",
        "pinterest",
        "tumblr",
        "unsplash",
        "pexels",
        "behance",
        "deviantart",
        "dribbble",
        "notion",
        "pocket",
        "feedly",
        "steam"
      ],
      privacy: [
        "gpg",
        "tor",
        "signal",
        "ublockorigin",
        "riot"
      ],
      spyware: [
        "telegram",
        "discord",
        "whatsapp",
        "skype",
        "slack",
        "messenger"
      ],
      edit: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "ligature",
        "sigma",
        "omega",
        "text-height",
        "text-width",
        "font-size",
        "paragraph-center",
        "paragraph-justify",
        "paragraph-left",
        "paragraph-right",
        "stats-bars",
        "stats-dots",
        "pie-chart",
        "scissors",
        "crop",
        "quill",
        "pen",
        "pencil",
        "pencil2",
        "quotes-left",
        "quotes-right",
        "copy",
        "paste",
        "paint-format",
        "eyedropper",
        "droplet",
        "list-numbered",
        "list-check",
        "list-bullet",
        "filter",
        "sort-alpha-asc",
        "sort-alpha-desc",
        "sort-numberic-desc",
        "sort-numeric-asc",
        "table",
        "table2"
      ],
      ratings: [
        "star-empty",
        "star-full",
        "star-half",
        "heart",
        "heart-broken"
      ],
      keyboard: [
        "tab",
        "shift",
        "ctrl",
        "opt",
        "command"
      ],
      media: [
        "play",
        "pause",
        "stop",
        "previous",
        "next",
        "backward",
        "forward",
        "first",
        "last",
        "play-circle",
        "pause-circle",
        "stop-circle",
        "previous-circle",
        "next-circle",
        "backward-circle",
        "forward-circle",
        "volume-decrease",
        "volume-increase",
        "volume-mute",
        "volume-mute2",
        "volume-low",
        "volume-medium",
        "volume-high",
        "loop",
        "loop2",
        "shuffle",
        "infinite",
        "play-yt",
        "eject",
        "airplayaudio",
        "airplayvideo"
      ],
      files: [
        "folder",
        "folder-open",
        "folder-download",
        "folder-upload",
        "folder-plus",
        "folder-minus",
        "image",
        "images",
        "file-empty",
        "file-music",
        "file-picture",
        "file-play",
        "file-text2",
        "file-video",
        "file-zip",
        "files-empty",
        "box-add",
        "box-remove",
        "film"
      ],
      devices: [
        "display",
        "tablet",
        "mobile",
        "tv",
        "video-camera",
        "camera",
        "headphones",
        "mic",
        "printer",
        "keyboard",
        "phone",
        "phone-hang-up",
        "raspberrypi",
        "arduino",
        "terminal"
      ],
      screen: [
        "sun",
        "brightness-contrast",
        "contrast",
        "eye",
        "eye-blocked",
        "eye-minus",
        "eye-plus"
      ],
      programing: [
        "c",
        "go",
        "python",
        "ruby",
        "rust",
        "php",
        "vue-dot-js",
        "react",
        "angular",
        "svelte",
        "npm",
        "html5",
        "css3",
        "javascript",
        "typescript",
        "postgresql",
        "docker",
        "git",
        "gitea",
        "github",
        "gitlab",
        "openai",
        "jupyter",
        "fastapi",
        "blender",
        "adobe",
        "inkscape",
        "affinitydesigner",
        "affinityphoto",
        "affinitypublisher"
      ],
      spinners: [
        "spinner",
        "spinner2",
        "spinner3"
      ],
      license: [
        "cc",
        "cc-zero",
        "cc-sa",
        "cc-nd",
        "cc-nc",
        "cc-remix",
        "cc-by",
        "cc-share",
        "amicale",
        "gpl",
        "lgpl",
        "agpl",
        "wtfpl",
        "ofl",
        "mit",
        "bsd"
      ]
    }
  }
}).$mount('#root')