"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TileContainer = void 0;
const clsx_1 = __importDefault(require("clsx"));
const React = __importStar(require("react"));
const react_intersection_observer_1 = require("react-intersection-observer");
const tileMenuControl_1 = require("tileMenuControl");
const style = __importStar(require("./tileBuilder.module.scss"));
const SizesPopupMenuWidth = 75;
const VizualizationPopupMenuWidth = 150;
exports.TileContainer = React.memo((tileProperties) => {
    const [focus, setFocus] = React.useState(false);
    const { ref, inView } = (0, react_intersection_observer_1.useInView)({
        threshold: 0,
    });
    const { id, key, props, state, children, className, availableSize, selectSize, actionexplandedhandler, actionsexpanded, render, editable, isTileConfigurable, onTileDelete, onTileEdit, onTileMove, availableVisualization, onSelectVisualization, disabled, ...gridItemProps } = tileProperties;
    const isEditShown = props.config && isTileConfigurable;
    const builderActionRef = React.createRef();
    const handleFocus = React.useCallback(() => { setFocus(true); }, []);
    const handleBlur = React.useCallback((e) => {
        if (builderActionRef.current && !builderActionRef.current.contains(e.relatedTarget)) {
            setFocus(false);
        }
    }, [builderActionRef]);
    return <div ref={ref} {...gridItemProps} className={(0, clsx_1.default)(className, { expanded: actionsexpanded }, { focused: focus })} tabIndex={editable ? 1 : undefined} onFocus={handleFocus} onBlur={handleBlur} aria-roledescription={editable ? 'editable tile' : 'tile'}>
        {inView && editable && <BuilderActionItem ref={builderActionRef} index={id} availableSize={availableSize} onSelectSize={selectSize} onTileEdit={isEditShown && onTileEdit} onTileDelete={onTileDelete} availableVisualization={availableVisualization} onSelectVisualization={onSelectVisualization} disabled={disabled}/>}
        {inView && <div key='tile-container' className={(0, clsx_1.default)(style['tile-container'])}>
            {render(props, state, editable)}
            {children}
        </div>}
        <span key={'extra-padding-right'} className={(0, clsx_1.default)(style['extra-padding-right'])}></span>
        <span key={'extra-padding-bottom'} className={(0, clsx_1.default)(style['extra-padding-bottom'])}></span>
    </div>;
});
const BuilderActionItem = React.forwardRef((props, ref) => {
    const { index, availableSize, onTileDelete, onTileEdit, onSelectSize, onSelectVisualization, availableVisualization, disabled } = props;
    const { sizesList, sizesMap } = React.useMemo(() => {
        const sizesMap = new Map();
        const sizesList = availableSize
            ? availableSize.map((x) => {
                const value = `${x.w}:${x.h}`;
                sizesMap.set(value, x);
                return {
                    value,
                    displayName: `${x.w} x ${x.h}`,
                    title: `${x.w} x ${x.h}`
                };
            })
            : [];
        return { sizesList, sizesMap };
    }, [availableSize]);
    const vizListProps = React.useMemo(() => availableVisualization
        ? availableVisualization.map(({ value, displayName }) => ({
            value,
            displayName,
            title: displayName
        }))
        : [], [availableVisualization]);
    const handleSelectSize = React.useCallback((sizeValue) => {
        if (onSelectSize) {
            onSelectSize(sizesMap.get(sizeValue), index);
        }
    }, [index, onSelectSize, sizesMap]);
    const handleSelectVizualization = React.useCallback((viz) => {
        if (onSelectVisualization) {
            onSelectVisualization(viz, index);
        }
    }, [index, onSelectVisualization]);
    const menuItems = React.useMemo(() => {
        const items = [];
        if (onTileEdit) {
            items.push({
                type: 'button',
                key: 'edit',
                icon: 'settings',
                onClick: () => onTileEdit(index),
                title: 'Configure',
                disabled: disabled
            });
        }
        if (onTileDelete) {
            items.push({
                type: 'button',
                key: 'delete',
                icon: 'chromeClose',
                onClick: () => onTileDelete(index),
                title: 'Delete',
                disabled: disabled
            });
        }
        if (sizesList && sizesList.length) {
            items.unshift({
                id: `availableSize${index}`,
                key: `availableSize${index}`,
                type: 'inlinePopup',
                icon: 'resizeMouseMediumMirrored',
                title: 'AvailableSize',
                panelList: sizesList,
                onItemSelect: handleSelectSize,
                panelWidth: SizesPopupMenuWidth,
                disabled: disabled
            });
        }
        if (availableVisualization && availableVisualization.length) {
            items.unshift({
                id: `changeViz${index}`,
                key: `changeViz${index}`,
                type: 'inlinePopup',
                icon: 'design',
                title: 'ChangeVisualization',
                panelList: vizListProps,
                onItemSelect: handleSelectVizualization,
                panelWidth: VizualizationPopupMenuWidth,
                disabled: disabled
            });
        }
        return items;
    }, [onTileEdit, onTileDelete, sizesList, availableVisualization, disabled, index, handleSelectSize, vizListProps, handleSelectVizualization]);
    return <tileMenuControl_1.TileMenuControl ref={ref} className={(0, clsx_1.default)(style['action-bar'])} items={menuItems}/>;
});
//# sourceMappingURL=tileContainer.jsx.map