function convertFeatureNameToSliderLabels(name) {
    let newName = name[0];
    for (let i = 1; i < name.length; i++) {
        //if upper case
        if (name[i].toUpperCase() === name[i]) {
            newName += " " + name[i];
        } else {
            newName += name[i];
        }
    }

    return newName;
}

const useMakeupEngine = async (displayManager, frameProvider, makeupEngine, loop) => {
    const interval = setInterval(() => {
        loop();
    }, 400);

    makeupEngine.onFrameRendered(() => {
        clearInterval(interval);
        makeupEngine.onFrameRendered(loop);
        loop();
    });

    const canvas = makeupEngine.GetView();
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.style.objectFit = "cover";
    const container = document.getElementById("container");
    container.prepend(canvas);

    const features = makeupEngine.GetFeatures();
    const finishes = makeupEngine.GetFinishes();

    const matte = finishes[0];
    const metallic = finishes[1];
    metallic.transparency = 1.0;
    const glossy = finishes[2];
    glossy.transparency = 0.6;
    const satin = finishes[3];

    const lipgloss = finishes[4];
    const shimmer = finishes[5];
    const glossShimmer = finishes[6];
    const glitter = finishes[7];
    const natural = finishes[8];
    const dewy = finishes[9];
    const luminous = finishes[10];

    displayManager.makeupEngine = makeupEngine;

    const lookNames = [];

    //softener
    const faceSoftener = features[28];
    faceSoftener.elements[0].color.a = 0.7;

    const find_feature = (name) => features.find((f) => f.name == name);
    const to_floating = ({ r, g, b, a }) => ({ r: r / 255.0, g: g / 255.0, b: b / 255.0, a: a / 255.0 });

    const pushToDisplay = async (name, finish, { r, g, b, a }) => {
        const feature = find_feature(name);
        const element_index = feature.elements.findIndex((x) => x && x.name && x.name.toLowerCase() === "color");
        feature.elements[element_index].color = { r: r / 255.0, g: g / 255.0, b: b / 255.0, a: a / 255.0 };
        await displayManager.push(new Array({ feature, finish }));
        const suffix = finish !== null ? " " + finish?.name : "";
        lookNames.push(convertFeatureNameToSliderLabels(feature.name) + suffix);
    };
    await pushToDisplay("FoundationFullShaded", satin, { r: 130.0, g: 66.0, b: 59.0, a: 76.5 });
    await pushToDisplay("FoundationT-ZoneShaded", satin, { r: 130.0, g: 66.0, b: 59.0, a: 76.5 });

    
    await pushToDisplay("EyelinerTop", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerBottom", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerTopBottom", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerHorizontal", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerStraight", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerRetro", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerDoubleMod", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerDoubleFlick", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerBox", satin, { r: 200, g: 200, b: 59.0, a: 200 });
    await pushToDisplay("EyelinerWinged", satin, { r: 200, g: 200, b: 59.0, a: 200 });

    await pushToDisplay("MascaraLongTopMediumBottom", null, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("MascaraMediumTopShortBottom", null, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });

    await pushToDisplay("EyeshadowOuterCorner", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("EyeshadowLidMiddle", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("EyeshadowLidInnerCorner", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("EyeshadowLowerLidOuterCorner", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("EyeshadowLowerLidInnerCorner", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });

    await pushToDisplay("EyelinerHorizontal", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("EyelinerStraight", matte, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });

    await pushToDisplay("MascaraMediumThin", null, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("MascaraMediumThick", null, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("EyebrowLine", null, { r: 237.0, g: 197.0, b: 171.0, a: 280.0 });
    await pushToDisplay("ContourHeart2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("ContourOblong2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("ContourOvalHeavy2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("ContourRectangle2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("ContourRound2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("ContourSquare2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyebrowsArchedIntense", null, { r: 99.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyebrowsArchedSoft", null, { r: 99.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyebrowsCombedIntense", null, { r: 99.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyebrowsCombedSoft", null, { r: 99.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyebrowsFlatIntense", null, { r: 99.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyebrowsFlatSoft", null, { r: 99.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("BlushOblong2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("BlushOval2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("BlushRound2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("BlushSquare2", null, { r: 199.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("BlushOval", null, { r: 251.0, g: 89.0, b: 79.0, a: 255.0 });
    await pushToDisplay("EyeshadowSmokey", matte, { r: 130.0, g: 66.0, b: 59.0, a: 255.0 });
    await pushToDisplay("BlushCheekbone", matte, { r: 114.0, g: 44.0, b: 65.0, a: 56.1 });
    await pushToDisplay("LipstickOneTone", shimmer, { r: 110.0, g: 5.0, b: 2.0, a: 190.0 });
    await pushToDisplay("LipstickOneTone", glitter, { r: 110.0, g: 5.0, b: 2.0, a: 190.0 });
    await pushToDisplay("LipstickOneTone", satin, { r: 20.0, g: 250.0, b: 79.0, a: 255.0 });
    await pushToDisplay("LipstickOneTone", glossShimmer, { r: 150.0, g: 0.0, b: 100.0, a: 200.0 });
    await pushToDisplay("EyelinerRetro", matte, { r: 0.0, g: 0.0, b: 0.0, a: 127.5 });
    await pushToDisplay("MascaraMediumTopBottom", null, { r: 0.0, g: 0.0, b: 0.0, a: 255.0 });
    await pushToDisplay("Contour", satin, { r: 130.0, g: 66.0, b: 59.0, a: 76.5 });
    await pushToDisplay("Highlighter", metallic, { r: 255.0, g: 255.0, b: 255.0, a: 25.5 }); //transparency = 0.1;

    // vamp look
    const lipstick = find_feature("LipstickOneTone");
    lipstick.elements[0].color = to_floating({ r: 110.0, g: 5.0, b: 2.0, a: 190.0 });

    const mascaraLong = find_feature("MascaraLongTop");
    mascaraLong.elements[0].color = to_floating({ r: 0.0, g: 0.0, b: 0.0, a: 255.0 });

    const blushCheekbone = find_feature("BlushCheekbone");
    blushCheekbone.elements[0].color = to_floating({ r: 114.0, g: 44.0, b: 65.0, a: 56.1 });

    const eyelinerRetro = find_feature("EyelinerRetro");
    eyelinerRetro.elements[0].color = to_floating({ r: 0.0, g: 0.0, b: 0.0, a: 127.5 });

    await displayManager.push(
        new Array(
            { feature: lipstick, finish: satin },
            { feature: blushCheekbone, finish: matte },
            { feature: eyelinerRetro, finish: matte },
            { feature: mascaraLong, finish: satin }
        )
    );
    lookNames.push("Vamp look");

    return { frameProvider, lookNames };
};

export default useMakeupEngine;
