"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageDetailsViewCarousel = void 0;
var react_1 = __importDefault(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var NavigateBefore_1 = __importDefault(require("@mui/icons-material/NavigateBefore"));
var NavigateNext_1 = __importDefault(require("@mui/icons-material/NavigateNext"));
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var Image_1 = require("../../../Image");
var SmallIconButton_1 = require("../../../SmallIconButton");
var Thumbnails_1 = require("../Thumbnails");
var styles_1 = require("./styles");
var ImageDetailsViewCarousel = function (_a) {
    var className = _a.className, attributeValues = _a.attributeValues, attributeValueIndex = _a.attributeValueIndex, setAttributeValueIndex = _a.setAttributeValueIndex;
    var styles = (0, styles_1.useStyles)();
    var attributeValue = attributeValues[attributeValueIndex];
    var mainImageSrc = (0, mdm_sdk_1.getImageAttributeOvPreviewUrl)(attributeValue);
    var onPrevImageButtonClick = function () {
        setAttributeValueIndex(attributeValueIndex - 1);
    };
    var onNextImageButtonClick = function () {
        setAttributeValueIndex(attributeValueIndex + 1);
    };
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
        react_1.default.createElement("div", { className: styles.main },
            attributeValueIndex > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "prev-image-button", icon: NavigateBefore_1.default, className: (0, classnames_1.default)(styles.arrowButton, styles.arrowButtonPrev), onClick: onPrevImageButtonClick, size: "XL" })),
            react_1.default.createElement(Image_1.Image, { "data-reltio-id": "main-image", containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && Image_1.ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
            attributeValueIndex !== attributeValues.length - 1 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "next-image-button", icon: NavigateNext_1.default, className: (0, classnames_1.default)(styles.arrowButton, styles.arrowButtonNext), onClick: onNextImageButtonClick, size: "XL" }))),
        react_1.default.createElement(Thumbnails_1.Thumbnails, { attributeValues: attributeValues, attributeValueIndex: attributeValueIndex, setAttributeValueIndex: setAttributeValueIndex })));
};
exports.ImageDetailsViewCarousel = ImageDetailsViewCarousel;
