import React, { useCallback, useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import { ImageDetailsViewCarousel } from './components/ImageDetailsViewCarousel';
import { ImageDetailsViewSidebar } from './components/ImageDetailsViewSidebar';
import { useStyles } from './styles';
export var ImageDetailsView = function (_a) {
    var _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, currentAttributeValueUri = _a.currentAttributeValueUri, setCurrentAttributeValueUri = _a.setCurrentAttributeValueUri, handleSetAsDefault = _a.handleSetAsDefault, attributeType = _a.attributeType;
    var _c = useState(0), attributeValueIndex = _c[0], setAttributeValueIndex = _c[1];
    useEffect(function () {
        if (!currentAttributeValueUri) {
            onChangeAttributeValueIndex(0);
        }
        else {
            onChangeAttributeValueIndex(attributeValues.findIndex(function (value) { return value.uri === currentAttributeValueUri; }));
        }
    }, [currentAttributeValueUri, attributeValues]);
    var onChangeAttributeValueIndex = useCallback(function (index) {
        var _a;
        setAttributeValueIndex(index);
        setCurrentAttributeValueUri((_a = attributeValues[index]) === null || _a === void 0 ? void 0 : _a.uri);
    }, [attributeValues]);
    var styles = useStyles();
    return (React.createElement(Box, { className: styles.root },
        React.createElement(ImageDetailsViewCarousel, { attributeValueIndex: attributeValueIndex, setAttributeValueIndex: onChangeAttributeValueIndex, attributeValues: attributeValues, className: styles.main }),
        React.createElement(ImageDetailsViewSidebar, { handleSetAsDefault: handleSetAsDefault, attributeValue: attributeValues[attributeValueIndex], className: styles.details, attributeType: attributeType })));
};
