/*
    Парус 8 - Панели мониторинга - Циклограмма
    Компонент: Линии колонки таблицы
*/

//---------------------
//Подключение библиотек
//---------------------

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента

//-----------
//Тело модуля
//-----------

//Линии колонок таблицы
const P8PCyclogramColumnsLines = ({ columns, shift, y1, y2 }) => {
    //Инициализируем старт текущей колонки
    let prevColumnEnd = 0;
    return (
        <g>
            {columns.map((column, index) => {
                //Аккумулируем окончание последней колонки с учетом сдвига
                prevColumnEnd = index !== 0 ? prevColumnEnd + (columns[index - 1].end - columns[index - 1].start) * shift : 0;
                return <line x1={prevColumnEnd} y1={y1} x2={prevColumnEnd} y2={y2} stroke="#e0e0e0" key={index} />;
            })}
            <line
                x1={prevColumnEnd + (columns[columns.length - 1].end - columns[columns.length - 1].start) * shift}
                y1={y1}
                x2={prevColumnEnd + (columns[columns.length - 1].end - columns[columns.length - 1].start) * shift}
                y2={y2}
                stroke="#e0e0e0"
            />
        </g>
    );
};

//Контроль свойств - Линии колонок таблицы
P8PCyclogramColumnsLines.propTypes = {
    columns: PropTypes.array.isRequired,
    shift: PropTypes.number.isRequired,
    y1: PropTypes.number.isRequired,
    y2: PropTypes.number.isRequired
};

//----------------
//Интерфейс модуля
//----------------

export { P8PCyclogramColumnsLines };