document.addEventListener("DOMContentLoaded", function () {
    const width = 600;
    const height = 600;
    const svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height);

    // let pict1 = drawSmile(svg);
    // pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);

    // let pict = drawSmile(svg);
    // pict.attr("transform", "translate(200, 200)");

    setting.applyButton.addEventListener("click", () => {
        draw(setting);
    })
    setting.clearButton.addEventListener("click", () => {
        svg.selectAll('*').remove()
    })

    updateAnimationControllsDisplay();
    enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
    animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);


    startAnimButton.addEventListener("click", () => {
        animRouter(setting)
    })

})

const updateAnimationControllsDisplay = () => {
    let isChecked = enableAnimCheckbox.checked;
    let isPathAnim = animAlongPathCheckbox.checked;
    // console.log(isChecked);
    document.querySelectorAll(".anim-related").forEach((elem) => { elem.hidden = !isChecked });
    document.querySelectorAll(".anim-related-inverse").forEach((elem) => { elem.hidden = isChecked });
    document.querySelectorAll(".path-anim-related").forEach((elem) => { elem.hidden = !(isPathAnim && isChecked) });
    document.querySelectorAll(".path-anim-related-inverse").forEach((elem) => { elem.hidden = (isPathAnim && isChecked) });
}


const draw = (dataForm) => {
    const svg = d3.select("svg")
    let pict = drawSmile(svg);
    pict.attr("transform", `
        translate(${dataForm.cx.value},
        ${dataForm.cy.value})
        scale(${dataForm.sx.value},
        ${dataForm.sy.value})
        rotate(${dataForm.r.value})`);

}

const animRouter = (dataForm) => {
    if (dataForm.animAlongPathCheckbox.checked) {
        let path = drawPath(Number(dataForm.pathSelect.value));
        const svg = d3.select("svg")
        let pict = drawSmile(svg);
        const parameters = {
            sx:[Number(dataForm.sx.value),Number(dataForm.sx_finish.value)],
            sy:[Number(dataForm.sy.value),Number(dataForm.sy_finish.value)],
            r:[Number(dataForm.r.value),Number(dataForm.r_finish.value)],
        };
        pict.transition()
            .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
            .duration(Number(duration.value))
            .attrTween('transform', translateAlong(path.node(),parameters));
    }
    else {
        runAnimation(dataForm)
    }
}

const runAnimation = (dataForm) => {
    const svg = d3.select("svg")
    let pict = drawSmile(svg);
    pict.attr("transform", `
        translate(${dataForm.cx.value},
        ${dataForm.cy.value})
        scale(${dataForm.sx.value},
        ${dataForm.sy.value})
        rotate(${dataForm.r.value})`)
        .transition()
        .duration(Number(duration.value))
        .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
        .attr("transform", `
        translate(${dataForm.cx_finish.value},
        ${dataForm.cy_finish.value})
        scale(${dataForm.sx_finish.value},
        ${dataForm.sy_finish.value})
        rotate(${dataForm.r_finish.value})`);
}