import * as maths from "./maths.js";

let uInput = document.getElementById("u");
let hInput = document.getElementById("h");
let rInput = document.getElementById("r");
let rsInput = document.getElementById("rs");
let npInput = document.getElementById("np");
let outputdiv = document.getElementById("output");
let stepInput = document.getElementById("steps");
let lenOutput = document.getElementById("len");

let height = 0;
let radius = 0;
let spillRadius = 0;
let numberOfPanels = 0;

let multiplier = 1;

let step = 0.001 * multiplier;
// const offset = 3*10**-15 * multiplier;
const offset = 4 * 10 ** -5 * multiplier;

let pointsP = [];
let pointsQ = [];
let distances = [];

let panelPoints = [];

let n = 0;
let unit = "px";
let strokeWidth = 1;

// logic
function getValues() {
    pointsP = [];
    pointsQ = [];
    distances = [];
    panelPoints = [];
    height = /* /* Math.floor */(parseFloat(hInput.value) * multiplier);
    radius = /* Math.floor */(parseFloat(rInput.value) * multiplier);
    spillRadius = /* Math.floor */(parseFloat(rsInput.value) * multiplier);
    numberOfPanels = /* Math.floor */(parseFloat(npInput.value) * multiplier);
    step = radius / parseInt(stepInput.value);
    if (isNaN(spillRadius)) {
        spillRadius = /* Math.floor */(0.05 * radius);
        rsInput.value = 0.05 * radius / multiplier;
    }
    n = ((radius - spillRadius) / (step - offset)) - 1;
    console.log(`${height}, ${radius}, ${spillRadius}, ${step}, ${offset}`);
}

function getPoints() {
    for (let x = spillRadius; x < radius; x += step - offset) {
        x = maths.approx(x);
        pointsP.push({
            x: x,
            y: maths.f(x, height, radius)
        });
    }
}

function getPointsOfTangentIntersection() {
    for (let i = 0; i < n; i++) {
        console.log(`${i}, ${pointsP[i].x} ${pointsP[i].y}, ${pointsP[i + 1].x} ${pointsP[i+1].y}`);
        pointsQ.push({
            x: maths.j(pointsP[i], pointsP[i + 1], height, radius),
            y: maths.g(maths.j(pointsP[i], pointsP[i + 1], height, radius), pointsP[i + 1], height, radius)
        });
    }
}

function getDistancesBetweenIntersections() {
    for (let i = 0; i < n - 1; i++) {
        distances.push(maths.d(pointsQ[i], pointsQ[i + 1], height, radius));
    }
}

function generateCoordinates() {
    let Xi = 0;
    for (let i = 0; i < n - 2; i++) {
        Xi += distances[i];
        let Yi = (Math.PI * pointsQ[i].x) / numberOfPanels;
        panelPoints.push({
            x: Xi,
            y: Yi
        });
    }
}

function plotSVG() {
    let maxY = 0;
    let maxX = 0;
    let minX = 1000;
    panelPoints.forEach((point) => {
        if (maxY < point.y) {
            maxY = point.y;
        }
        if (minX > point.x) {
            minX = point.x;
        }
        if (maxX < point.x) {
            maxX = point.x;
        }
    })
    let pathA = "M ";
    let pathB = "M ";
	let pathTop = `M ${maths.approx(panelPoints[0].x)} ${maxY - maths.approx(panelPoints[0].y)} ${panelPoints[0].x} ${maxY - maths.approx(panelPoints[0].y)}`;
	let pathBottom = `M ${maths.approx(panelPoints[panelPoints.length - 1].x)} ${maxY - maths.approx(panelPoints[panelPoints.length - 1].y)} ${panelPoints[panelPoints.length - 1].x} ${maths.approx((panelPoints[panelPoints.length - 1].y + maxY))}`;
	let pathCentre = `M ${maths.approx(panelPoints[0].x)} ${(maxY - maths.approx(panelPoints[0].y) + maths.approx((panelPoints[0].y + maxY))) / 2} ${panelPoints[panelPoints.length - 1].x} ${(maxY - maths.approx(panelPoints[panelPoints.length - 1].y) + maths.approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}`;
    for (let i = 0; i < panelPoints.length; i++) {
        let point = panelPoints[i];
        pathA += `${maths.approx(point.x)} ${(maxY) - maths.approx(point.y)} `;
        pathB +=`${maths.approx(point.x)} ${maths.approx((point.y + maxY))} `;
    }
    outputdiv.innerHTML = `
	<svg 	width="297mm"
                height="210mm"
                xmlns="http://www.w3.org/2000/svg">
                <g id="layer1">
			<path
				d="${pathTop}"
				fill="none"
				stroke="black"
				stroke-width="${strokeWidth}"
			/>
			<path
				d="${pathBottom}"
				fill="none"
				stroke="black"
				stroke-width="${strokeWidth}"
			/>
			<path
				d="${pathCentre}"
				fill="none"
				stroke="black"
				stroke-width="${strokeWidth}"
			/>
			<path
				d="${pathA}"
				stroke="black"
				fill="none"
				stroke-width="${strokeWidth}"
			/>
			<path
				d="${pathB}"
				stroke="black"
				fill="none"
				stroke-width="${strokeWidth}"
			/>
		</g>
        </svg>
    `;
    lenOutput.innerText = `Recommended length: ${maths.approx(maxX - minX)} ${unit}`;
}


// main func
function generatePanel() {
    unit=uInput.value;
    getValues();
    getPoints();
    getPointsOfTangentIntersection();
    getDistancesBetweenIntersections();
    generateCoordinates();
    plotSVG();
}

document.getElementById("generate").addEventListener("click", () => generatePanel());