let artifacts = []

const homeNav = document.getElementById('home-nav')
const homePageElements = Array.from(document.getElementsByClassName('home-page'))
const collectionNav = document.getElementById('collection-nav')
const collectionPageElements = Array.from(document.getElementsByClassName('collection-page'))
const artifactsContainer = document.getElementById('artifacts-container')
const addArtifactButton = document.getElementById('add-button')
const searchInput = document.getElementById('search')

homeNav.addEventListener('click', () => {
    collectionPageElements.forEach(e => e.hidden = true)
    homePageElements.forEach(e => e.hidden = false)
})

collectionNav.addEventListener('click', () => {
    homePageElements.forEach(e => e.hidden = true)
    collectionPageElements.forEach(e => e.hidden = false)
})

addArtifactButton.addEventListener('click', addArtifact)

searchInput.addEventListener('change', renderArtifacts)

async function fetchArtifacts() {
    const result = await fetch('https://vaolhgulafwfxgrqpngy.supabase.co/functions/v1/museum')
    artifacts = await result.json()
}

async function addArtifact() {
    const result = await fetch('https://vaolhgulafwfxgrqpngy.supabase.co/functions/v1/museum', {method: 'POST'})
    const artifact = await result.json()
    artifacts.push(artifact)
    renderArtifacts()
}

function renderArtifacts() {
    const searchValue = searchInput.value.toLowerCase()
    const filteredArtifacts = artifacts.filter(a => a.name.toLowerCase().includes(searchValue) || a.era.toLowerCase().includes(searchValue))

    artifactsContainer.innerHTML = ''
    for (const artifact of filteredArtifacts) {
        artifactsContainer.appendChild(createArtifact(artifact))
    }
}

function createArtifact(artifact) {
    const artifactDiv = createElementWithClass('div', 'artifact')

    const img = createElementWithClass('img', 'artifact-img')
    img.src = artifact.imageUrl
    img.alt = artifact.name
    artifactDiv.appendChild(img)

    const status = createElementWithClass('div', 'status')
    status.innerText = artifact.displayStatus
    artifactDiv.appendChild(status)

    const metadata = createElementWithClass('div', 'metadata')
    artifactDiv.appendChild(metadata)

    const header = createElementWithClass('div', 'header')
    metadata.appendChild(header)

    const headerText = document.createElement('div')
    header.appendChild(headerText)

    const title = document.createElement('h5')
    title.innerText = artifact.name
    headerText.appendChild(title)

    const era = document.createElement('p')
    era.innerText = artifact.era
    headerText.appendChild(era)

    const deleteBtn = createElementWithClass('button', 'btn')
    deleteBtn.addEventListener('click', () => {
        artifactsContainer.removeChild(artifactDiv)
    })
    header.appendChild(deleteBtn)

    const deleteImg = document.createElement('img')
    deleteImg.src = 'images/trash.svg'
    deleteImg.height = 16
    deleteImg.width = 16
    deleteImg.alt = 'delete-icon'
    deleteBtn.appendChild(deleteImg)

    const description = document.createElement('p')
    description.innerText = artifact.description
    metadata.appendChild(description)

    return artifactDiv
}

function createElementWithClass(element, className) {
    const elem = document.createElement(element)
    elem.className = className
    return elem
}

fetchArtifacts().then(() => renderArtifacts())