import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircle } from "@fortawesome/free-solid-svg-icons/faCircle";
import { faChevronCircleLeft } from "@fortawesome/free-solid-svg-icons/faChevronCircleLeft";
import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons/faChevronCircleRight";
import { css } from "styled-components";
export function ImagesViewer({ images, showPagination }) {
    const [selectedIndex, setSelectedIndex] = React.useState(0);
    return (_jsxs("div", { className: "openk9-embeddable-image-viewer--container", css: css `
        position: relative;
      `, children: [_jsxs("div", { className: "openk9-embeddable-image-viewer--detail", css: css `
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          position: absolute;
          width: 100%;
          padding: 8px;
          box-sizing: border-box;
        `, children: [_jsx("a", { className: "openk9-embeddable-image-viewer--a", href: "javascript:void(0)", onClick: () => setSelectedIndex(Math.max(0, selectedIndex - 1)), children: _jsx(FontAwesomeIcon, { icon: faChevronCircleLeft, color: "black", size: "lg" }) }), showPagination && (_jsx("div", { className: "openk9-embeddable-image-viewer--show-pagination", css: css `
              flex-grow: 1;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              margin: 0px 4px;
            `, children: new Array(images.length).fill(0).map((_, index, array) => {
                            const isSelected = index === selectedIndex;
                            return (_jsx(React.Fragment, { children: _jsx("a", { className: "openk9-embeddable-image-viewer--show-pagination-a", href: index === selectedIndex ? undefined : "javascript:void(0)", onClick: (event) => {
                                        event.preventDefault();
                                        setSelectedIndex(index);
                                    }, ref: (element) => {
                                        if (element && isSelected) {
                                            element.scrollIntoView();
                                        }
                                    }, css: css `
                      margin: 2px;
                    `, children: _jsx(FontAwesomeIcon, { className: "openk9-embeddable-image-viewer--show-pagination-font-awesome-icon-fa-circle", icon: faCircle, color: isSelected
                                            ? "var(--openk9-embeddable-search--active-color)"
                                            : "black", size: "xs" }) }) }, index));
                        }) })), _jsx("a", { href: "javascript:void(0)", onClick: () => setSelectedIndex(Math.min(images.length - 1, selectedIndex + 1)), children: _jsx(FontAwesomeIcon, { className: "openk9-embeddable-image-viewer--show-pagination-font-awesome-icon-fa-chevron-circle", icon: faChevronCircleRight, color: "black", size: "lg" }) })] }), _jsx("div", { className: "openk9-embeddable-image-viewer--show-pagination-border", css: css `
          width: 100%;
          padding-top: 40px;
          border-radius: 4px;
          border: 1px solid var(--openk9-embeddable-search--border-color);
          display: flex;
          align-items: center;
          justify-content: center;
        `, children: images[selectedIndex] && (_jsx("img", { className: "openk9-embeddable-image-viewer--show-pagination-border-img", src: images[selectedIndex], alt: "preview", css: css `
              max-width: 100%;
              max-height: 100%;
            ` })) })] }));
}
