quickValuation.js

import {autocomplete, brands} from "./autocomplete-brands";
import {fieldLabelToggle, initializeCategorySelect} from "./sellItemHelpers";
import { setupMenuHandlers, prepareMenu } from "./general";

async function getValuation(itemBrand, itemCategory) {
  const brand = itemBrand.value ? itemBrand.value.trim() : "";
  const category = itemCategory.value;
  if (!brand) {
    itemBrand.setCustomValidity('Märke måste fyllas i');
    document.getElementById('valuateForm').reportValidity();
    return;
  } else {
    itemBrand.setCustomValidity('')
  }
  if (!category) {
    itemCategory.setCustomValidity('Kategori måste fyllas i');
    document.getElementById('valuateForm').reportValidity();
    return;
  } else {
    itemCategory.setCustomValidity('');
  }
  document.getElementById('itemsSoldDiv').style.display = 'none';
  document.getElementById('disclaimerDiv').style.display = 'none';
  document.getElementById('loadingValuationDiv').style.display = 'flex';
  document.getElementById('mainDivider').style.display = 'block';
  document.getElementById('buttonsDiv').style.display = 'none';
  document.getElementById('valuationInfoButton').style.display = 'none';
  try {
    const valuationRes = await callBackendApi('/api/valuation/estimate',
      { data: { item: { brand, category } }, requiresAuth: false });
    const {
      minPriceEstimate: minPrice, maxPriceEstimate: maxPrice, decline, newBrand, valuatedBrandItems, fewBrand, valuatedBrandCategoryItems,
      brandCategoryAccuracy, brandAccuracy, highPriceVarBrandCategory, brandShareSold, humanCheckExplanation,
      brandCategoryMeanMinPrice, brandCategoryMeanMaxPrice, brandCategoryMinSoldPrice, brandCategoryMaxSoldPrice,
      lowValueSegment, latestSales, valuationComment
    } = valuationRes.data || {};
    localStorage.setItem('valuation', JSON.stringify(valuationRes.data));
    document.getElementById('soldItemsDiv').style.display = 'none';
    document.getElementById('itemsSoldDiv').style.display = 'block';
    document.getElementById('itemsSoldDiv').classList.toggle('appear-animation', true);
    analytics.track("Element Viewed", { elementID: "itemsSoldDiv", brand, category });
    document.getElementById('refreshValuationButton').style.display = 'none';
    document.getElementById('loadingValuationDiv').style.display = 'none';
    document.getElementById('buttonsDiv').style.display = 'none';
    document.getElementById('brandCategoryText').innerText = `${brand}-${category.toLowerCase()}`;
    document.getElementById('itemValuationText').innerText = valuationComment || '';
    if (decline) {
      document.getElementById('valuationText').style.display = 'block';
      document.getElementById('valuationText').innerText = 'Säljer ej';
    } else if (newBrand || valuatedBrandItems === 0 || !minPrice || !maxPrice || latestSales.length < 3) {
      document.getElementById('valuationText').innerText = 'För få träffar';
      document.getElementById('valuationText').style.display = 'block';
      document.getElementById('buttonsDiv').style.display = 'flex';
    } else if (minPrice && maxPrice) {
      showLatestItemsSold(latestSales);
      document.getElementById('valuationInfoButton').style.display = 'flex';
      if (fewBrand) {
        document.getElementById('valuationText').style.display = 'none';
      }
      document.getElementById('valuationText').style.display = 'block';
      const fromPrice = round10(brandCategoryMeanMinPrice || minPrice);
      const toPrice = round10(brandCategoryMeanMaxPrice || maxPrice);
      document.getElementById('valuationText').innerText = `~${round10((fromPrice+toPrice)/2)} kr`;
      document.getElementById('buttonsDiv').style.display = 'flex';
    } else {
      document.getElementById('itemValuationText').innerText = 'Något gick fel, försök igen eller kontakta oss om felet kvarstår.';
      document.getElementById('valuationText').style.display = 'none';
      document.getElementById('buttonsDiv').style.display = 'none';
    }
  } catch (e) {
    console.log(e);
    document.getElementById('itemValuationText').innerText = 'Något gick fel, försök igen eller kontakta oss om felet kvarstår.';
    document.getElementById('valuationText').style.display = 'none';
  }
}

function showLatestItemsSold(latestSales) {
  document.getElementById('soldItemsDiv').style.display = 'block'
  const itemCard = document.querySelector('#soldItemsDiv .div-block-item');
  const itemList = document.getElementById('soldItemList');
  itemList.innerHTML = '';
  for (const item of latestSales) {
    const newItemCard = itemCard.cloneNode(true);
    newItemCard.id = '';
    const frontImage = item.imagesv2?.[0]?.url;
    if (!frontImage) {
      continue;
    }
    const condition = {
      'Helt ny, med prislapp kvar': 'Helt ny',
      'Helt ny, men utan prislapp': 'Nyskick',
      'Använd, men utan anmärkning': 'Fint skick',
      'Använd, tecken på slitage': 'Bra skick',
      'Använd, tydligt slitage': 'Defekter'
    }[item.condition];
    const soldDate = new Date(item.soldDate).toLocaleDateString('sv-SE',{day: 'numeric', month:'short', year: 'numeric'})
      .replace('.', '').replace(/ (\d{4})$/, ', $1');
    newItemCard.querySelector('.img-container').style.backgroundImage = `url("${frontImage}")`;
    newItemCard.querySelector('.sold-item-title').innerText = `${item.soldPrice} kr`;
    newItemCard.querySelector('.sold-item-subtext').innerText = `${condition}`;
    newItemCard.querySelector('.sold-item-date').innerText = `${soldDate}`;
    itemList.appendChild(newItemCard);
  }
}
function round10(val) {
  return Math.round((val || 0) / 10) * 10;
}

async function quickValuationMain() {
  setupMenuHandlers();
  const menuChatButton = document.getElementById('menuChatButton');
  if (menuChatButton) {
    menuChatButton.style.display = 'none';
  }
  const sessionUser = JSON.parse(localStorage.getItem('sessionUser'));
  if (sessionUser) {
    prepareMenu(sessionUser);
  }

  Webflow.push(function () {
    $('form').submit(function () {
      return false;
    });
  });
  autocomplete(document.getElementById("itemBrand"), brands);
  const itemBrand = document.getElementById("itemBrand");
  const itemCategory = document.getElementById('itemCategory');
  const brandClearButton = document.getElementById('brandClearButton');
  itemBrand.addEventListener('blur', () => {
    setTimeout(function () {
      if (itemBrand.value?.trim()?.length && itemCategory.value?.trim()?.length) {
        getValuation(itemBrand, itemCategory);
      }
    }, 50);
  });
  itemBrand.oninput = function () {
    if (itemBrand.value?.trim()?.length) {
      toggleRefreshButton();
      brandClearButton.style.display = 'block';
      collapse(document.getElementById('brandQuickSelectDiv'));
    } else {
      brandClearButton.style.display = 'none';
      unfold(document.getElementById('brandQuickSelectDiv'));
    }
  };
  initializeCategorySelect('Skriv kategori här', () => { });
  itemBrand.addEventListener('input', fieldLabelToggle('itemBrandLabel'));
  brandClearButton.addEventListener('click', () => {
    itemBrand.value = '';
    document.getElementById('itemsSoldDiv').style.display = 'none';
    document.getElementById('mainDivider').style.display = 'none';
    document.getElementById('buttonsDiv').style.display = 'none';
    document.getElementById('disclaimerDiv').style.display = 'block';
    document.getElementById('itemBrand').dispatchEvent(new Event('input'));
    brandClearButton.style.display = 'none';
  });

  const categoryClearButton = document.getElementById('categoryClearButton');
  itemCategory.addEventListener('change', () => {
    if (itemCategory.value?.trim()?.length) {
      collapse(document.getElementById('categoryQuickSelectDiv'));
      categoryClearButton.style.display = 'block';
      if (itemBrand.value?.trim()?.length) {
        getValuation(itemBrand, itemCategory);
      }
    } else {
      unfold(document.getElementById('categoryQuickSelectDiv'));
    }
  })
  categoryClearButton.addEventListener('click', () => {
    itemCategory.value = '';
    document.getElementById('itemsSoldDiv').style.display = 'none';
    document.getElementById('mainDivider').style.display = 'none';
    document.getElementById('buttonsDiv').style.display = 'none';
    document.getElementById('disclaimerDiv').style.display = 'block';
    unfold(document.getElementById('categoryQuickSelectDiv'));
    $('#itemCategory').trigger('change');
    categoryClearButton.style.display = 'none';
  });
  for (const element of document.querySelectorAll('#brandQuickSelectDiv .quickselectitem')) {
    element.addEventListener('click', (event) => {
      itemBrand.value = event.target.innerText;
      itemBrand.dispatchEvent(new Event('input'));
      analytics.track("Click", { elementID: "quickSelectItemBrand", value: event.target.innerText });
      if (itemBrand.value?.trim()?.length && itemCategory.value?.trim()?.length) {
        getValuation(itemBrand, itemCategory);
      }
      collapse(document.getElementById('brandQuickSelectDiv'));
    });
  }
  for (const element of document.querySelectorAll('#categoryQuickSelectDiv .quickselectitem')) {
    element.addEventListener('click', (event) => {
      itemCategory.value = event.target.classList.contains('quickselectitem') ? event.target.innerText.trim() : event.currentTarget.innerText.trim();
      console.log(event.target.innerText)
      console.log(event.currentTarget.innerText)
      analytics.track("Click", { elementID: "quickSelectItemCategory", value: event.target.innerText });
      if (itemCategory.value?.length) {
        itemCategory.dispatchEvent(new Event('change'));
        collapse(document.getElementById('categoryQuickSelectDiv'));
      }
    });
  }
  document.getElementById('sellItemButton').addEventListener('click', () => {
    localStorage.removeItem('newItem');
    localStorage.setItem('newItem', JSON.stringify({ brand: itemBrand.value, category: itemCategory.value }));
    window.location.href = '/sell-item';
  })
  document.getElementById('expertValuationButton').addEventListener('click', () => {
    localStorage.removeItem('newItem');
    localStorage.setItem('newItem', JSON.stringify({ brand: itemBrand.value, category: itemCategory.value }));
    window.location.href = '/expert-valuation';
  })
  document.getElementById('refreshValuationButton').addEventListener('click', () => {
    getValuation(itemBrand, itemCategory);
  })
  document.getElementById('valuationInfoButton').addEventListener('click', (e) => {
    document.getElementById('darkOverlay').style.display = 'block';
    document.getElementById('valuationInfoBox').style.display = 'block';
  });
  document.getElementById('darkOverlay').addEventListener('click', closeInfoBox);
  document.getElementById('closeValuationInfoBox').addEventListener('click', closeInfoBox);
}

function toggleRefreshButton() {
    setTimeout(function () {
      const itemBrand = document.getElementById('itemBrand');
      const itemCategory = document.getElementById('itemCategory');
      const loadingValuationDiv = document.getElementById('itemCategory');
      if (itemBrand.value?.trim()?.length && itemCategory.value?.trim()?.length && loadingValuationDiv.style.display !== 'block') {
        document.getElementById('refreshValuationButton').style.display = 'block';
      } else {
        document.getElementById('refreshValuationButton').style.display = 'none';
      }
    }, 50);
}

function closeInfoBox() {
  document.getElementById('darkOverlay').style.display = 'none';
  document.getElementById('valuationInfoBox').style.display = 'none';
}

// Function to toggle collapse animation
function collapse(element) {
  element.classList.toggle('collapsed', true);
  element.classList.toggle('unfolded', false);
}

// Function to toggle unfold animation
function unfold(element) {
  element.classList.toggle('unfolded', true);
  element.classList.toggle('collapsed', false);
}

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('This page was restored from the bfcache.');
    if (menu.style.display !== 'none') { menu.style.display = 'none' }
  }
});

quickValuationMain();