import React from 'react';
import classnames from 'classnames';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { getImageAttributeOvPreviewUrl } from '@reltio/mdm-sdk';
import { Image, ImageSizesStyles } from '../../../Image';
import { SmallIconButton } from '../../../SmallIconButton';
import { Thumbnails } from '../Thumbnails';
import { useStyles } from './styles';
export var ImageDetailsViewCarousel = function (_a) {
    var className = _a.className, attributeValues = _a.attributeValues, attributeValueIndex = _a.attributeValueIndex, setAttributeValueIndex = _a.setAttributeValueIndex;
    var styles = useStyles();
    var attributeValue = attributeValues[attributeValueIndex];
    var mainImageSrc = getImageAttributeOvPreviewUrl(attributeValue);
    var onPrevImageButtonClick = function () {
        setAttributeValueIndex(attributeValueIndex - 1);
    };
    var onNextImageButtonClick = function () {
        setAttributeValueIndex(attributeValueIndex + 1);
    };
    return (React.createElement("div", { className: classnames(styles.root, className) },
        React.createElement("div", { className: styles.main },
            attributeValueIndex > 0 && (React.createElement(SmallIconButton, { "data-reltio-id": "prev-image-button", icon: NavigateBeforeIcon, className: classnames(styles.arrowButton, styles.arrowButtonPrev), onClick: onPrevImageButtonClick, size: "XL" })),
            React.createElement(Image, { "data-reltio-id": "main-image", containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
            attributeValueIndex !== attributeValues.length - 1 && (React.createElement(SmallIconButton, { "data-reltio-id": "next-image-button", icon: NavigateNextIcon, className: classnames(styles.arrowButton, styles.arrowButtonNext), onClick: onNextImageButtonClick, size: "XL" }))),
        React.createElement(Thumbnails, { attributeValues: attributeValues, attributeValueIndex: attributeValueIndex, setAttributeValueIndex: setAttributeValueIndex })));
};
