import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Icons from "../icons";
import ScreenView from "../screen-view";
import TextBase from "../text";
import React from "react";
import Slider from "react-slick";
import { Cube } from "../cube";
import { ItemWrapper, PointWrapper, Road, RoadButton, RoadButtons, RoadInner, RoadLine, RoadWrapper, } from "./styled";
const Item = ({ title, desc, simpleView }) => {
    return (_jsxs(ItemWrapper, { simpleView: simpleView, children: [title && _jsx("p", { className: "ui-item__title", children: title }), desc && _jsx("p", { className: "ui-item__text", children: desc })] }));
};
const Point = ({ time, goals, simpleView }) => {
    return (_jsxs(PointWrapper, { children: [_jsx(TextBase.T1, { className: "ui-point__title", children: time }), _jsx(Cube, { time: time }), goals.map((goal, i) => (_jsx(Item, { title: goal.title, desc: goal.desc, simpleView: simpleView }, i)))] }));
};
const sliderSettings = {
    infinite: false,
    dots: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
};
const Roadmap = ({ points, isButtonsOff, isSliderOff, isSimpleItems, }) => {
    const [isShowFutureStep, setShowFutureStep] = React.useState(false);
    return (_jsxs(RoadWrapper, { children: [_jsx(RoadLine, {}), !isButtonsOff && (_jsx(ScreenView.Large, { children: _jsxs(RoadButtons, { children: [_jsx(RoadButton, { onClick: () => setShowFutureStep(false), active: isShowFutureStep, left: true, children: _jsx(Icons.ArrowDown, {}) }), _jsx(RoadButton, { onClick: () => setShowFutureStep(true), active: !isShowFutureStep, right: true, children: _jsx(Icons.ArrowDown, {}) })] }) })), _jsx(Road, { children: isSliderOff ? (_jsx(RoadInner, { showFutureStep: isShowFutureStep, simpleView: isSimpleItems, children: points.map((point, i) => (_jsx(Point, { simpleView: isSimpleItems, ...point }, i))) })) : (_jsxs(_Fragment, { children: [_jsx(ScreenView.Large, { children: _jsx(RoadInner, { showFutureStep: isShowFutureStep, children: points.map((point, i) => (_jsx(Point, { simpleView: isSimpleItems, ...point }, i))) }) }), _jsx(ScreenView.NotLarge, { children: _jsx(Slider, { ...sliderSettings, children: points.map((point, i) => (_jsx(Point, { simpleView: isSimpleItems, ...point }, i))) }) })] })) })] }));
};
export default Roadmap;
//# sourceMappingURL=index.js.map