/* массив точек пути будет иметь следующий вид:
  [
    {x: координата, y: координата},
    {x: координата, y: координата},
    ...
  ]
*/
// создаем массив точек, расположенных буквой "Г"
function createPathG() {
    const svg = d3.select("svg")
    const width = svg.attr("width")
    const height = svg.attr("height")

    let data = [];
    const padding = 100;
    //начальное положение рисунка
    let posX = padding;
    let posY = height - padding;
    const h = 5;
    // координаты y - уменьшаются, x - постоянны
    while (posY > padding) {
        data.push({ x: posX, y: posY });
        posY -= h;
    }
    // координаты y - постоянны, x - увеличиваются
    while (posX < width - padding) {
        data.push({ x: posX, y: posY });
        posX += h;
    }
    return data
}

// создаем массив точек, расположенных по кругу
function createPathCircle() {
    const svg = d3.select("svg")
    const width = svg.attr("width")
    const height = svg.attr("height")
    let data = [];
    // используем параметрическую форму описания круга
    // центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
    for (let t = 0; t <= Math.PI * 2; t += 0.1) {
        data.push(
            {
                x: width / 2 + width / 3 * Math.sin(t),
                y: height / 2 + height / 3 * Math.cos(t)
            }
        );
    }
    return data
}
function createPathSpiral() {
    const svg = d3.select("svg")
    const width = svg.attr("width")
    const height = svg.attr("height")
    let data = [];
    // используем параметрическую форму описания круга
    // центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
    for (let t = 0; t <= Math.PI * 6; t += 0.1) {
        data.push(
            {
                x: width / 2 + width / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
                y: height / 2 + height / 3 * (1 - (t / (Math.PI * 6))) * Math.cos(t)
            }
        );
    }
    return data
}
const drawPath = (typePath) => {
    // создаем массив точек
    const dataPoints = [createPathG, createPathCircle, createPathSpiral][Number(typePath)]()

    const line = d3.line()
        .x((d) => d.x)
        .y((d) => d.y);
    const svg = d3.select("svg")
    // создаем путь на основе массива точек	  
    const path = svg.append('path')
        .attr('d', line(dataPoints))
        .attr('stroke', 'black')
        .attr('fill', 'none');

    return path;
}

function translateAlong(path, params) {
    const length = path.getTotalLength();

    return function () {
        return function (t) {
            const { x, y } = path.getPointAtLength(t * length);
            return `
            translate(${x},${y})
            scale(${params.sx[0] +(params.sx[1] - params.sx[0])*t},
            ${params.sy[0] +(params.sy[1] - params.sy[0])*t})
            rotate(${params.r[0] +(params.r[1] - params.r[0])*t})
            `;
        }
    }
}