Icon: Icon Right

// Import an array of icontypes from some config file
// Import each of the icons we plan to use

import {
  mdiAlert,
  mdiAlertOutline,
  mdiAlertBoxOutline,
  mdiAlertCircleOutline,
  mdiArrowExpand,
  mdiArrowLeft,
  mdiArrowRight,
  mdiCheck,
  mdiChevronDown,
  mdiChevronLeft,
  mdiChevronRight,
  mdiChevronUp,
  mdiClose,
  mdiDeleteForeverOutline,
  mdiFilterOutline,
  mdiInformationVariant,
  mdiMinus,
  mdiPageFirst,
  mdiPageLast,
  mdiPlus,
  mdiPlay,
  mdiPhoneOutline,
  mdiWifi,
  mdiSofaSingleOutline,
  mdiParking,
  mdiDumbbell,
  mdiStore,
  mdiSoccer,
  mdiTennis,
  mdiGrill,
  mdiWashingMachine,
  mdiCoffeeOutline,
  mdiGlassMugVariant,
  mdiGrillOutline,
  mdiPaletteOutline,
  mdiMusicNote,
  mdiMicrosoftXboxController
} from '@mdi/js'

const mdiIcons = {
  mdiAlert,
  mdiAlertOutline,
  mdiAlertBoxOutline,
  mdiAlertCircleOutline,
  mdiArrowExpand,
  mdiArrowLeft,
  mdiArrowRight,
  mdiCheck,
  mdiChevronDown,
  mdiChevronLeft,
  mdiChevronRight,
  mdiChevronUp,
  mdiClose,
  mdiDeleteForeverOutline,
  mdiFilterOutline,
  mdiInformationVariant,
  mdiMinus,
  mdiPageFirst,
  mdiPageLast,
  mdiPlus,
  mdiPlay,
  mdiPhoneOutline,
  mdiWifi,
  mdiSofaSingleOutline,
  mdiParking,
  mdiDumbbell,
  mdiStore,
  mdiSoccer,
  mdiTennis,
  mdiGrill,
  mdiWashingMachine,
  mdiCoffeeOutline,
  mdiGlassMugVariant,
  mdiGrillOutline,
  mdiPaletteOutline,
  mdiMusicNote,
  mdiMicrosoftXboxController, 
}

export const uolIcon = () => {

  const iconContainers = document.querySelectorAll('.uol-icon')

  iconContainers.forEach( (iconContainer) => {

    // check if the icon type is mdi or "status type" and return if not either
    if (!iconContainer.className.match(/uol-icon--mdi|uol-icon--status-/)) {
      return
    } else {

      // Get the icon that "matches" the class modifier
      let mdiIconString
      iconContainer.classList.forEach( (className) =>{
        if(className.startsWith('uol-icon--mdi')) {
          mdiIconString = className.replace('uol-icon--','')
        } else if (className.startsWith('uol-icon--status-')) {
          let statusType = className.replace('uol-icon--status-','')
          switch (statusType) {
            case 'info':
              mdiIconString = 'mdiInformationVariant'
              break;
            case 'success':
              mdiIconString = 'mdiCheck'
              break;
            case 'error':
              mdiIconString = 'mdiAlertCircleOutline'
              break;
            case 'warning':
              mdiIconString = 'mdiAlertOutline'
              break;
            default:
              mdiIconString = null
          }
        }
      })

      if (mdiIconString) {
        // Assing MDI icon to path
        const iconPath = mdiIcons[mdiIconString]

        // if matching MDI path exists
        if (iconPath) {

          // wrap the inner text
          iconContainer.innerHTML = `<span class="uol-icon__label">${iconContainer.innerHTML}</span>`

          // Create and prepend SVG
          let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
          svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
          svg.setAttribute('viewBox', '0 0 24 24')
          svg.setAttribute('focusable', 'false')
          svg.setAttribute('aria-hidden', 'true')
          svg.setAttribute('height', '1rem')
          svg.setAttribute('width', '1rem')
          svg.innerHTML = `
            <path fill="#000000" fill-rule="nonzero" d="${iconPath}"/>
          `
          iconContainer.prepend(svg)
        }
      }
    }
  })
}