function changeImportBasedOnURLParam() {
  const urlParams = new URLSearchParams(window.location.search);
  const variableStyle = urlParams.get('variableStyle');

  if (variableStyle) {
    const stylesheet = document.getElementById('stylesheet');
    if (stylesheet) {
      stylesheet.href = `${variableStyle}.css`;
    }
  }
}

changeImportBasedOnURLParam();

window.showDrawer = true;
window.iconPath = '';
// import { html, render } from 'lit';
// import '../dist/src/nile-badge/index.js';
import '../dist/src/index.js';
// Import nile-glyph from @aquera/nile-glyph
// import '../../nile-glyph/dist/src/nile-glyph/index.js';
// import '../dist/src/nile-input/index.js';

// find html element by id
const demo = document.getElementById('close');
demo?.addEventListener('click', () => {
  console.log('clicked', window.showDrawer);
  window.showDrawer = false;
});

// for testing calendar
document.addEventListener('DOMContentLoaded', () => {
  const myComponent = document.querySelector('nile-calendar');
  if (myComponent) {
    // Accessing the allowedDates property after the component has been rendered
    myComponent.allowedDates = {
      startDate: '2024-03-24',
      endDate: '2024-03-29',
    };
  } else {
    console.error('Error: my-component not found in the DOM.');
  }
});

/*
 * Added service worker to handle expensive flow of fetching huge amount of data from the filenames text file created through build script
 */
const w = new Worker('fetchTextFromFileWorker.js');
const getMessage = msg => {
  const icons = splitStringBy(msg.data, ',');
  /*For rendering the available icons*/
  //   renderNewIcons(icons);
};

function splitStringBy(str, separator) {
  return str.split(separator);
}

// rendering icons from filenames text file
function renderNewIcons(icons) {
  const iconsDiv = document.getElementById('new-icons');
  iconsDiv.innerHTML = '';
  icons?.forEach(icon => {
    iconsDiv.innerHTML = ` ${iconsDiv.innerHTML}
      <div title='${icon}' alt='${icon}'>
        <nile-icon method="stroke" name=${icon.toLowerCase()} > </nile-icon>
        <small>${icon}</small>
      </div>`;
  });
  w.removeEventListener('message', getMessage);
}

w.addEventListener('message', getMessage);
