import { projects } from "./shrimpjects.js";

export function getProjectData(project){
    const leftImage = document.getElementById("image-left");
    const rightImage = document.getElementById("image-right");
    const centralImage = document.getElementById("image-central");
    const projectContent = document.getElementById("project-content");
    const projectData = projects[project];
    projectContent.innerHTML = projectData.content;

    const assetPath = "assets/"

    leftImage.src = assetPath + projectData.images.left.src;
    leftImage.alt = "altleft";
    rightImage.src = assetPath + projectData.images.right.src;
    centralImage.src = assetPath + projectData.images.central.src;

    return;
}

export function clearSelectedProjectClass() {
    document.getElementById("biotama").classList.remove("selected-project");
    document.getElementById("htp").classList.remove("selected-project");
}

export function createShrimpFooter() {
    const footer = document.getElementById("shrimp-gif");
    footer.innerHTML = "<img src='./assets/dance-shrimp-dance.gif' alt='a shrimp dancing'>".repeat(10);
}

export function itsRainingShrimp() {
    const shrimpyRain =  document.getElementById("shrimply-the-rain");
    // push shrimp rain to the front. It's basically an overlay
    shrimpyRain.style.zIndex = 2;

    var increment = 0;
    var drops = "";

    // maxWidthToShrimp is set based on image size so not to overflow
    const maxWidthToShrimp = 83;
    while (increment < maxWidthToShrimp) {
        // how much you want shrimp to cover
        var randomTwoHundo = (Math.floor(Math.random() * 200));

        drops += '<img src="assets/shrimp.png" style="'
        + 'left: ' + increment
        + '%; bottom: ' + (randomTwoHundo) + '%;" />'

        increment++;
    }

    shrimpyRain.innerHTML = drops;

    // wait until after the animation plays to make the shrimp disappear 🪄
    setTimeout(() => {
        shrimpyRain.style.zIndex = -1;
        shrimpyRain.innerHTML = "";
    }, 2950);

}