const ItemID = window.location.pathname.split('/')[2]
const ItemType = document.querySelector('.row .badge').innerHTML
console.log(ItemType)

var Settings;
var ItemWishlist;
var PurchaseBtn;
var WishlistBtn;
var ItemOwned;
var InitialOwners;
var OwnerPagesFetched = 0;

var Utilities;

(async () => {
  Utilities = await import(chrome.runtime.getURL('resources/utils.js'));
  Utilities = Utilities.default

  chrome.storage.sync.get(['PolyPlus_Settings'], async function(result){
    Settings = result.PolyPlus_Settings || {}

    PurchaseBtn = document.querySelector('.btn[onclick^="buy"]')
    if (PurchaseBtn === null) {
      PurchaseBtn = document.querySelector('.btn#purchase-button')
    }
    ItemOwned = (PurchaseBtn.innerText === ' Item owned' || document.querySelector('.btn[onclick="sellItem()"]') !== null)

    if (PurchaseBtn.getAttribute('data-seller-name')) {
      PurchaseBtn.setAttribute('data-bs-toggle', 'tooltip')
      PurchaseBtn.setAttribute('data-bs-title', 'Sold by ' + PurchaseBtn.getAttribute('data-seller-name'))
      Utilities.InjectResource('registerTooltips')
    }

    if (Settings.IRLPriceWithCurrency.Enabled === true && ItemOwned === false) {
      IRLPrice()
    }

    if (Settings.ItemWishlistOn === true) {
      HandleItemWishlist()
    }

    if (Settings.TryOnItemsOn === true && (Utilities.MeshTypes.indexOf(ItemType.toLowerCase()) !== -1 || Utilities.TextureTypes.indexOf(ItemType.toLowerCase()) !== -1)) {
      TryOnItems()
    }

    if (Settings.ReplaceItemSalesOn === true) {
      const Sales = document.querySelectorAll('.col:has(h6):has(h3.small)')[2]
      if (Sales.children[1].innerText === '0') {
        InitialOwners = (await (await fetch('https://api.polytoria.com/v1/store/' + ItemID + '/owners?limit=100')).json())

        Sales.children[0].innerText = 'Owners'
        Sales.children[1].innerText = Owners.total.toLocaleString()
      }
    }

    if (document.getElementById('resellers') !== null) {
      if (Settings.HoardersList.Enabled === true) {
        console.log(parseInt(Settings.HoardersList.MinCopies))
        HoardersList(parseInt(Settings.HoardersList.MinCopies), Settings.HoardersList.AvatarsEnabled)
      }
    } else if (document.getElementById('timer') && /\d/.test(document.getElementById('timer').innerText)) {
      CheckOwner()
    }
  })
})();

chrome.storage.onChanged.addListener(function(changes, namespace) {
  if ('PolyPlus_ItemWishlist' in changes) {
    chrome.storage.sync.get(['PolyPlus_ItemWishlist'], function(result) {
      ItemWishlist = result.PolyPlus_ItemWishlist || [];

      if (Array.isArray(ItemWishlist) && ItemWishlist.includes(parseInt(ItemID))) {
        WishlistBtn.classList = 'btn btn-danger btn-sm'
        WishlistBtn.innerHTML = `
        <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Un-Wishlist Item
        `
      } else {
        if (!(ItemWishlist.length === 25)) {
          WishlistBtn.removeAttribute('disabled')
          WishlistBtn.classList = 'btn btn-warning btn-sm'
          WishlistBtn.innerHTML = `
          <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Wishlist Item
          `
        } else {
          WishlistBtn.setAttribute('disabled', true)
          WishlistBtn.classList = 'btn btn-warning btn-sm'
          WishlistBtn.innerHTML = `
          <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Wishlist Item
          `
        }
      }
    });
  }
});

async function IRLPrice() {
  const Price = PurchaseBtn.getAttribute('data-price')
  if (Price === null || Price === "0") { return }
  const Span = document.createElement('span')
  Span.classList = 'text-muted polyplus-own-tag'
  Span.style.fontSize = '0.7rem'
  Span.style.fontWeight = 'normal'
  const IRLResult = await Utilities.CalculateIRL(Price, Settings.IRLPriceWithCurrency.Currency)
  Span.innerText = "($" + IRLResult.result + " " + IRLResult.display + ")"
  PurchaseBtn.appendChild(Span)
}

function HandleItemWishlist() {
  const DescriptionText = document.querySelector('.mcard .card-body:has(p)')
  WishlistBtn = document.createElement('button')
  chrome.storage.sync.get(['PolyPlus_ItemWishlist'], function(result){
    ItemWishlist = result.PolyPlus_ItemWishlist || [];

    if (ItemOwned === true) {
      if (ItemWishlist.includes(parseInt(ItemID))) {
        ItemWishlist.splice(ItemWishlist.indexOf(parseInt(ItemID)), 1)
        chrome.storage.sync.set({'PolyPlus_ItemWishlist': ItemWishlist, arrayOrder: true});
      }
      return
    }
    if (ItemOwned === true) {
      return
    } else if (ItemOwned === true && ItemWishlist.includes(parseInt(ItemID))) {
      ItemWishlist.splice(ItemWishlist.indexOf(parseInt(ItemID)), 1)
      return
    }

    if (ItemWishlist.includes(parseInt(ItemID))) {
      WishlistBtn.classList = 'btn btn-danger btn-sm'
      WishlistBtn.innerHTML = `
      <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Un-Wishlist Item
      `
    } else {
      WishlistBtn.classList = 'btn btn-warning btn-sm'
      WishlistBtn.innerHTML = `
      <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Wishlist Item
      `
    }

    WishlistBtn.addEventListener('click', function(){
      WishlistBtn.setAttribute('disabled', true)
      chrome.storage.sync.get(['PolyPlus_ItemWishlist'], function(result){
        ItemWishlist = result.PolyPlus_ItemWishlist || [];

        let i = ItemWishlist.indexOf(parseInt(ItemID))
        if (i !== -1) {
          ItemWishlist.splice(i, 1)
          WishlistBtn.classList = 'btn btn-warning btn-sm'
          WishlistBtn.innerHTML = `
          <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Wishlist Item
          `
        } else {
          ItemWishlist.push(parseInt(ItemID))
          WishlistBtn.classList = 'btn btn-danger btn-sm'
          WishlistBtn.innerHTML = `
          <i class="fa fa-star" style="margin-right: 2.5px;"></i>  Un-Wishlist Item
          `
        }

        chrome.storage.sync.set({'PolyPlus_ItemWishlist': ItemWishlist, arrayOrder: true}, function() {
          setTimeout(function() {
            WishlistBtn.removeAttribute('disabled')
          }, 1250)
        });
      });
    });

    DescriptionText.appendChild(document.createElement('br'))
    DescriptionText.appendChild(WishlistBtn)
  });
}

function TryOnItems() {
  const Avatar = {
    "useCharacter": true,
    "items": [],
    "shirt": "https://c0.ptacdn.com/assets/uWrrnFGwgNN5W171vqYTWY7E639rKiXK.png",
    "pants": "https://c0.ptacdn.com/assets/HD6TFdXD8CaflRNmd84VCNyNsmTB0SH3.png",
    "headColor": "#e0e0e0",
    "torsoColor": "#e0e0e0",
    "leftArmColor": "#e0e0e0",
    "rightArmColor": "#e0e0e0",
    "leftLegColor": "#e0e0e0",
    "rightLegColor": "#e0e0e0"
  }
  
  let AssetType = document.querySelector('.px-4.px-lg-0.text-muted.text-uppercase.mb-3 .badge').innerHTML
  
  const ItemThumbnail = document.getElementsByClassName('store-thumbnail')[0]
  //const IFrame = document.getElementsByClassName('store-thumbnail-3d')[0]
  const TryIFrame = document.createElement('iframe')
  TryIFrame.style = 'width: 100%; height: auto; aspect-ratio: 1; border-radius: 20px;'
  
  const TryOnBtn = document.createElement('button')
  TryOnBtn.classList = 'btn btn-warning'
  TryOnBtn.style = 'position: absolute; bottom: 60px; right: 10px;'
  if (document.getElementsByClassName('3dviewtoggler')[0] === undefined) {
    TryOnBtn.style.bottom = '15px'
  }
  //TryOnBtn.setAttribute('data-bs-toggle', 'tooltip')
  //TryOnBtn.setAttribute('data-bs-title', 'Try this item on your avatar')
  TryOnBtn.innerHTML = '<i class="fa-duotone fa-vial"></i>'
  TryOnBtn.addEventListener('click', function (){
    fetch("https://api.polytoria.com/v1/users/" + JSON.parse(window.localStorage.getItem('p+account_info')).ID + "/avatar")
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        data.assets.forEach(item => {
          switch (item.type) {
            case 'hat':
              Avatar.items[Avatar.items.length] = item.path || ''
              break
            case 'face':
              Avatar.face = item.path || ''
              break
            case 'tool':
              Avatar.tool = item.path || ''
              break
            case 'shirt':
              Avatar.shirt = item.path || ''
              break
            case 'pants':
              Avatar.pants = item.path || ''
              break
          }
        });

      Avatar.headColor = "#" + data.colors.head
      Avatar.torsoColor = "#" + data.colors.torso
      Avatar.leftArmColor = "#" + data.colors.leftArm
      Avatar.rightArmColor = "#" + data.colors.rightArm
      Avatar.leftLegColor = "#" + data.colors.leftLeg
      Avatar.rightLegColor = "#" + data.colors.rightLeg

      if (Utilities.MeshTypes.indexOf(AssetType.toLowerCase()) !== -1) {
        fetch("https://api.polytoria.com/v1/assets/serve-mesh/:id".replace(':id', window.location.pathname.split('/')[2]))
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => {
            if (ItemType === 'tool') {
              Avatar.tool = data.url
            } else {
              Avatar.items.push(data.url)
            }

            console.log(Avatar)
            TryIFrame.src = 'https://polytoria.com/ptstatic/itemview/#' + btoa(encodeURIComponent(JSON.stringify(Avatar)))
          })
          .catch(error => {
            console.error('Fetch error:', error);
          });
      } else if (Utilities.TextureTypes.indexOf(AssetType.toLowerCase()) !== -1) {
        fetch("https://api.polytoria.com/v1/assets/serve/:id/Asset".replace(':id', window.location.pathname.split('/')[2]))
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => {
            switch (AssetType) {
              case 'Shirt':
                console.log('IS SHIRT')
                Avatar.shirt = data.url
                break
              case 'Pants':
                console.log('IS PANTS')
                Avatar.pants = data.url
                break
              case 'Face':
                console.log('IS FACE')
                Avatar.face = data.url
                break
            }

            TryIFrame.src = 'https://polytoria.com/ptstatic/itemview/#' + btoa(encodeURIComponent(JSON.stringify(Avatar)))
          })
          .catch(error => {
            console.error('Fetch error:', error);
          });
      }
    })
    .catch(error => {
      console.error('Fetch error:', error);
    });

    TryOnModal.showModal()
  });
  
  let TryOnModal = document.createElement('dialog')
  TryOnModal.classList = 'polyplus-modal'
  TryOnModal.setAttribute('style', 'width: 450px; border: 1px solid #484848; background-color: #181818; border-radius: 20px; overflow: hidden;')
  TryOnModal.innerHTML = `
  <div class="row text-muted mb-2" style="font-size: 0.8rem;">
    <div class="col">
      <h5 class="mb-0" style="color: #fff;">Preview</h5>
      Try this avatar on your avatar before purchasing it!
    </div>
    <div class="col-md-2">
      <button class="btn btn-info w-100 mx-auto" onclick="this.parentElement.parentElement.parentElement.close();">X</button>
    </div>
  </div>
  <div class="modal-body"></div>
  `
  
  document.body.prepend(TryOnModal)
  ItemThumbnail.parentElement.appendChild(TryOnBtn)
  TryOnModal.children[1].prepend(TryIFrame)

  //Utilities.InjectResource('registerTooltips')
}

async function HoardersList(min, avatars) {
  let Page = 0
  let Tabs = document.getElementById('store-tabs')

  const Tab = document.createElement('li')
  Tab.classList = 'nav-item'
  Tab.innerHTML = `
  <a class="nav-link">
    <i class="fas fa-calculator me-1"></i>
    <span class="d-none d-sm-inline"><span class="pilltitle">Hoarders</span>
  </a>
  `
  Tabs.appendChild(Tab)

  const TabContent = document.createElement('div')
  TabContent.classList = 'd-none'
  TabContent.innerHTML = `
  <small class="d-block text-center text-muted" style="font-size: 0.8rem;">
    loading... (this may take a few seconds)
  </small>
  <lottie-player id="avatar-loading" src="https://c0.ptacdn.com/static/images/lottie/poly-brick-loading.2b51aa85.json" background="transparent" speed="1" style="width: 20%;height: auto;margin: -16px auto 50px;margin-top: 0px;" loop="" autoplay=""></lottie-player>
  `
  document.getElementById('owners').parentElement.appendChild(TabContent)

  // Add tab logic
  Array.from(Tabs.children).forEach(tab => {
    tab.addEventListener('click', function() {
      if (tab === Tab) {
        Array.from(Tabs.children).forEach(tab => {tab.children[0].classList.remove('active')})
        Array.from(document.getElementById('owners').parentElement.children).forEach(tab => {tab.classList.add('d-none')})
        tab.children[0].classList.add('active')
        TabContent.classList.remove('d-none')
      }
    })
  })

  let Fetched = false
  Tab.addEventListener('click', async function(){
    if (Fetched === true) { return }
    Fetched = true

    const Owners = []
    if (InitialOwners === undefined) {
      InitialOwners = (await (await fetch('https://api.polytoria.com/v1/store/' + ItemID + '/owners?limit=100')).json())
    }
    Owners.push(...InitialOwners.inventories)

    // Get owners (up to 300, if needed)
    if (InitialOwners.pages > 3) {
      InitialOwners.pages = 3
    }
    if (InitialOwners.pages > 1 && OwnerPagesFetched < InitialOwners.pages) {
      for (let i = 1; i < InitialOwners.pages; i++) {
        const PageResult = (await (await fetch('https://api.polytoria.com/v1/store/' + ItemID + '/owners?limit=100&page=' + (i+1))).json()).inventories
        console.log(PageResult)
        Owners.push(...PageResult)
      }
    }
    const Formatted = {}
    
    // Count copies & store serials of owners
    for (let owner of Owners) {
      if (Formatted[owner.user.id] !== undefined) {
        Formatted[owner.user.id].copies++
        Formatted[owner.user.id].serials.push(owner.serial)
      } else {
        Formatted[owner.user.id] = {
          user: owner.user,
          copies: 1,
          serials: [owner.serial]
        }
      }
    }

    let Hoarders = await new Promise(async (resolve, reject) => {
      const Sorted = Object.values(Formatted).filter((x, index) => x.copies >= min).sort((a, b) => b.copies - a.copies)
      if (avatars === true) {
        for (let hoarder of Sorted) {
          const Avatar = (await (await fetch('https://api.polytoria.com/v1/users/' + hoarder.user.id)).json()).thumbnail.icon;
          hoarder.user.avatar = Avatar;
        }
      }
      resolve(Sorted)
    })
    let AmountOfHoarders = Hoarders.length

    // Break hoarders into groups of 4
    let Groups = []
    while (Hoarders.length > 0) {
      Groups.push(Hoarders.splice(0, 4))
    }

    TabContent.innerHTML = `
    <div id="p+hoarders-container">
      ${ (Groups[Page] !== undefined) ? Groups[Page].map((x) => `
      <div class="card mb-3">
        <div class="card-body">
          <div class="row">
            ${ (avatars === true) ? `
            <div class="col-auto">
              <img src="${x.user.avatar}" alt="${x.user.username}" width="72" class="rounded-circle border border-2 border-secondary bg-dark">
            </div>
            ` : '' }
            <div class="col d-flex align-items-center">
              <div>
                <h6 class="mb-1">
                  <a class="text-reset" href="/users/${x.user.id}">${x.user.username}</a>
                </h6>
                <small class="text-muted">${x.copies} Copies <i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-title="#${x.serials.sort((a, b) => a - b).join(', #')}"></i></small>
              </div>
            </div>
            <div class="col-auto d-flex align-items-center">
              <!--
              <div>
                <h5 style="margin: 0px;margin-right: 10px;">${ ((x.copies/InitialOwners.total)*100).toFixed(2) }%</h5>
              </div>
              -->
              <a class="btn btn-warning" type="button" href="/trade/new/${x.user.id}">
                <i class="fad fa-exchange-alt me-1"></i>
                <span class="d-none d-sm-inline">Trade</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      `).join('')
      : `
      <div class="card mb-3">
        <div class="card-body text-center py-5 text-muted">
          <h1 class="display-3"><i class="fa-solid fa-rectangle-history-circle-user"></i></h1>
          <h5> No hoarders </h5>
          <p class="mb-0">This item is fresh and doesn't have any hoarders yet! Come back later!</p>
        </div>
      </div>
      `}
    </div>
    <nav aria-label="Hoarders">
      <ul class="pagination justify-content-center">
        <li style="margin-top: auto; margin-bottom: auto;">
          <select class="form-select form-select-sm" style="height: 37px !important;" id="p+hoarders-min-copies">
            <option value="2">Min. 2+ Copies</option>
            <option value="3">Min. 3+ Copies</option>
            <option value="5">Min. 5+ Copies</option>
            <option value="10">Min. 10+ Copies</option>
            <option value="15">Min. 15+ Copies</option>
            <option value="35">Min. 35+ Copies</option>
          </select>
        </li>
        <li class="page-item disabled">
          <a class="page-link" href="#!" id="p+hoarders-first-pg">«</a>
        </li>
        <li class="page-item disabled">
          <a class="page-link" href="#!" tabindex="-1" id="p+hoarders-prev-pg">‹</a>
        </li>
        <li class="page-item active">
          <a class="page-link">
            <span class="visually-hidden">Page</span>
            <span id="p+hoarders-current-pg">1</span>
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#!" id="p+hoarders-next-pg">›</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#!" id="p+hoarders-last-pg">»</a>
        </li>
      </ul>
    </nav>
    `
    Utilities.InjectResource('registerTooltips')

    const Container = document.getElementById('p+hoarders-container')

    // Pagination is annoying
    const First = document.getElementById('p+hoarders-first-pg')
    const Prev = document.getElementById('p+hoarders-prev-pg')
    const Current = document.getElementById('p+hoarders-current-pg')
    const Next = document.getElementById('p+hoarders-next-pg')
    const Last = document.getElementById('p+hoarders-last-pg')

    const MinCopies = document.getElementById('p+hoarders-min-copies')
    MinCopies.selectedIndex = Array.from(MinCopies.children).indexOf(MinCopies.querySelector(`option[value="${min}"]`))

    if (Page > 0) {
      Prev.parentElement.classList.remove('disabled')
      First.parentElement.classList.remove('disabled')
    } else {
      Prev.parentElement.classList.add('disabled')
      First.parentElement.classList.add('disabled')
    }
    if (Page < Groups.length-1) {
      Next.parentElement.classList.remove('disabled')
      Last.parentElement.classList.remove('disabled')
    } else {
      Next.parentElement.classList.add('disabled')
      Last.parentElement.classList.add('disabled')
    }

    First.addEventListener('click', function() {
      if (Page > 0) {
        Page = 0
        UpdateHoardersList()
      }
    })

    Prev.addEventListener('click', function() {
      if (Page > 0) {
        Page--
        UpdateHoardersList()
      }
    })

    Next.addEventListener('click', function() {
      if (Page < Groups.length-1) {
        Page++
        UpdateHoardersList()
      }
    })

    Last.addEventListener('click', function() {
      if (Page < Groups.length-1) {
        Page = Groups.length-1
        UpdateHoardersList()
      }
    })

    MinCopies.addEventListener('change', function(){
      Page = 0
      min = parseInt(MinCopies.options[MinCopies.selectedIndex].value)
      Hoarders = Object.values(Formatted).filter((x, index) => x.copies >= min).sort((a, b) => b.copies - a.copies)
      AmountOfHoarders = Hoarders.length
      Groups = []
      while (Hoarders.length > 0) {
        Groups.push(Hoarders.splice(0, 4))
      }
      UpdateHoardersList()
    })

    const UpdateHoardersList = function() {
      console.log(Hoarders, AmountOfHoarders, Groups)
      Current.innerText = Page+1
      
      if (Groups[Page] !== undefined) {
        Container.innerHTML = Groups[Page].map((x) => `
        <div class="card mb-3">
          <div class="card-body">
            <div class="row">
              ${ (avatars === true) ? `
              <div class="col-auto">
                <img src="${x.user.avatar}" alt="${x.user.username}" width="72" class="rounded-circle border border-2 border-secondary bg-dark">
              </div>
              ` : '' }
              <div class="col d-flex align-items-center">
                <div>
                  <h6 class="mb-1">
                    <a class="text-reset" href="/users/${x.user.id}">${x.user.username}</a>
                  </h6>
                  <small class="text-muted">${x.copies} Copies <i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-title="#${x.serials.sort((a, b) => a - b).join(', #')}"></i></small>
                </div>
              </div>
              <div class="col-auto d-flex align-items-center">
                <a class="btn btn-warning" type="button" href="/trade/new/${x.user.id}">
                  <i class="fad fa-exchange-alt me-1"></i>
                  <span class="d-none d-sm-inline">Trade</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        `).join('')

        Utilities.InjectResource('registerTooltips')
      } else {
        Container.innerHTML = `
        <div class="card mb-3">
          <div class="card-body text-center py-5 text-muted">
            <h1 class="display-3"><i class="fa-solid fa-rectangle-history-circle-user"></i></h1>
            <h5> No hoarders </h5>
            <p class="mb-0">This item is fresh and doesn't have any hoarders yet! Come back later!</p>
          </div>
        </div>
        `

        MinCopies.disabled = true
      }

      if (Page > 0) {
        Prev.parentElement.classList.remove('disabled')
        First.parentElement.classList.remove('disabled')
      } else {
        Prev.parentElement.classList.add('disabled')
        First.parentElement.classList.add('disabled')
      }
      if (Page < Groups.length-1) {
        Next.parentElement.classList.remove('disabled')
        Last.parentElement.classList.remove('disabled')
      } else {
        Next.parentElement.classList.add('disabled')
        Last.parentElement.classList.add('disabled')
      }
    }
  })
}

function CheckOwner() {
  const ImageCard = document.querySelector('.card-body:has(.store-thumbnail)')

  const CheckOwnerDiv = document.createElement('div')
  CheckOwnerDiv.classList = 'mt-3 d-none'
  CheckOwnerDiv.innerHTML = `
  <div class="input-group mb-2">
    <input type="text" class="form-control bg-dark" placeholder="Username..">
    <button class="btn btn-success">Check</button>
  </div>

  <b class="text-muted" style="font-size: 0.85rem;"><i class="fa-duotone fa-square-question mr-1"></i> ...</b>
  `

  ImageCard.appendChild(CheckOwnerDiv)

  const ToggleButton = document.createElement('button')
  ToggleButton.classList = 'btn btn-dark'
  ToggleButton.style = 'position: absolute; bottom: 15px; left: 10px;'
  //ToggleButton.setAttribute('data-bs-toggle', 'tooltip')
  //ToggleButton.setAttribute('data-bs-title', 'Quickly check if someone owns this item')
  ToggleButton.innerHTML = '<i class="fa-duotone fa-bags-shopping"></i>'
  
  ImageCard.children[0].prepend(ToggleButton)

  const UsernameInput = CheckOwnerDiv.getElementsByTagName('input')[0]
  const CheckButton = CheckOwnerDiv.getElementsByTagName('button')[0]
  const ResultText = CheckOwnerDiv.getElementsByTagName('b')[0]

  ToggleButton.addEventListener('click', function(){
    if (CheckOwnerDiv.classList.contains('d-none')) {
      ResultText.classList = ''
      ResultText.innerHTML = '<i class="fa-duotone fa-square-question mr-1"></i> ...'
      CheckOwnerDiv.classList.remove('d-none')
    } else {
      CheckOwnerDiv.classList.add('d-none')
    }
  })

  UsernameInput.addEventListener('update', function(){
    ResultText.classList = ''
    ResultText.innerHTML = '<i class="fa-duotone fa-square-question mr-1"></i> ...'
  })

  CheckButton.addEventListener('click', async function(){
    const Username = UsernameInput.value
    if (Username.trim() === "") {
      ResultText.classList = ''
      ResultText.innerHTML = '<i class="fa-duotone fa-square-question mr-1"></i> ...'
      return
    }

    const UserID = (await (await fetch('https://api.polytoria.com/v1/users/find?username=' + Username)).json()).id
    
    if (UserID !== undefined) {
      const Owns = (await (await fetch('https://api.polytoria.com/v1/store/' + ItemID + '/owner?userID=' + UserID)).json())
    
      if (Owns.owned === true) {
        ResultText.classList = 'text-success'
        ResultText.innerHTML = '<i class="fa-duotone fa-circle-check mr-1"></i> ' + Username + ' owns #' + Owns.inventory.serial + ' of ' + document.getElementsByTagName('h1')[0].innerText + '".'
      } else {
        ResultText.classList = 'text-danger'
        ResultText.innerHTML = '<i class="fa-duotone fa-circle-check mr-1"></i> ' + Username + ' does not own "' + document.getElementsByTagName('h1')[0].innerText + '".'
      }
    } else {
      ResultText.classList = 'text-warning'
      ResultText.innerHTML = '<i class="fa-duotone fa-circle-exclamation mr-1"></i> No user found under the username "' + Username + '".'
    }
  })
}