import { collection, getDocs, orderBy, query } from 'firebase/firestore';

import { db } from '$utils/firebaseConfig';

window.Webflow ||= [];
window.Webflow.push(async () => {
  // Select Work Item
  const workLink = document.querySelector('[data-element="work-link"]');
  const workList = workLink!.parentElement;

  // Remove element base
  workLink!.remove();

  // Clone each item
  const queryRef = collection(db, 'projects');
  const q = query(queryRef, orderBy('priority'));

  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    const item = doc.data();
    const cloneItem = workLink!.cloneNode(true) as HTMLDivElement;
    const workTitle = cloneItem!.querySelector('[data-element="title"]');
    const workDescription = cloneItem!.querySelector('[data-element="description"]');
    const workRole = cloneItem!.querySelector('[data-element="role"]');
    const workSoftwareSkill = cloneItem!.querySelector('[data-element="software-skills"]');
    const workButton = cloneItem!.querySelector('[data-element="link"]') as HTMLAnchorElement;
    const coverImage = cloneItem!.querySelector('.portfolio-image') as HTMLImageElement;

    workButton.href = `portfolio?project=${doc.id}`;
    workTitle!.innerHTML = item.title;
    workDescription!.innerHTML = item.description;
    workRole!.innerHTML = item.role;
    workSoftwareSkill!.innerHTML = item.softwareSkills;
    coverImage.src = item.slider['0'];

    // Append into the List Wrapper
    workList!.appendChild(cloneItem);
  });
});