import React from "react";
import formatDistanceToNow from "date-fns/formatDistanceToNow";
import parseISO from "date-fns/parseISO";
import { Link } from "react-router-dom";
import Carousel from "react-multi-carousel/lib/Carousel";
import "react-multi-carousel/lib/styles.css";
const LeftArrow = ({ onClick }) => (React.createElement("i", { className: "fas fa-chevron-left", onClick: () => onClick() }));
const RightArrow = ({ onClick }) => (React.createElement("i", { className: "fas fa-chevron-right", onClick: () => onClick() }));
export const ActivitySlider = ({ className, data, showDots, slideHeader, responsive, infinite, keyBoardControl, containerClass, itemClass, }) => {
    return (React.createElement("div", { className: "activity-slider" + " " + className },
        React.createElement("h3", null, slideHeader),
        React.createElement(Carousel, { infinite: infinite, keyBoardControl: keyBoardControl, containerClass: containerClass, itemClass: itemClass, showDots: showDots, responsive: responsive, customLeftArrow: React.createElement(LeftArrow, null), customRightArrow: React.createElement(RightArrow, null) }, data.map(({ node }) => (React.createElement("div", { className: "activity-slider-node", key: node.id },
            React.createElement("div", { className: "ds-modality" },
                React.createElement("div", { className: "hexagon-wrapper" }, node.latestSnapshot.summary?.primaryModality
                    ? (React.createElement(React.Fragment, null,
                        React.createElement("div", { className: "hexagon " +
                                node.latestSnapshot.summary?.primaryModality
                                    .toLowerCase() }),
                        React.createElement("div", { className: "label" }, node.latestSnapshot.summary?.primaryModality)))
                    : (React.createElement(React.Fragment, null,
                        React.createElement("div", { className: "hexagon no-modality" }),
                        React.createElement("div", { className: "label" }, "N/A"))))),
            React.createElement("div", { className: "ds-name" },
                React.createElement("h4", null,
                    React.createElement(Link, { to: "datasets/" +
                            node.id +
                            "/versions/" +
                            node.latestSnapshot.tag }, node.latestSnapshot.description.Name))),
            node.publishDate
                ? (React.createElement("div", { className: "ds-pub-date" },
                    formatDistanceToNow(parseISO(node.publishDate)),
                    " ago"))
                : null,
            node.analytics
                ? (React.createElement("div", { className: "ds-pub-views" },
                    node.analytics.views.toLocaleString(),
                    " views"))
                : null))))));
};
