"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineMarker = LineMarker;
const core_1 = require("@popperjs/core");
const react_1 = __importStar(require("react"));
const annotation_tooltip_1 = require("./annotation_tooltip");
const constants_1 = require("../../../../../common/constants");
const dom_element_1 = require("../../../../../state/actions/dom_element");
const common_1 = require("../../../../../utils/common");
const MARKER_TRANSFORMS = {
    [common_1.Position.Right]: 'translate(0%, -50%)',
    [common_1.Position.Left]: 'translate(-100%, -50%)',
    [common_1.Position.Top]: 'translate(-50%, -100%)',
    [common_1.Position.Bottom]: 'translate(-50%, 0%)',
};
function getMarkerCentredTransform(alignment, hasMarkerDimensions) {
    return hasMarkerDimensions ? undefined : MARKER_TRANSFORMS[alignment];
}
function LineMarker({ id, chartId, specId, datum, panel, marker: { icon, body, color, position, alignment, dimension }, chartAreaRef, chartDimensions, onDOMElementEnter, onDOMElementLeave, onDOMElementClick, clickable, getHoverParams, }) {
    const { style, options } = getHoverParams(id);
    const iconRef = (0, react_1.useRef)(null);
    const testRef = (0, react_1.useRef)(null);
    const popper = (0, react_1.useRef)(null);
    const setPopper = (0, react_1.useCallback)(() => {
        if (!iconRef.current || !testRef.current)
            return;
        popper.current = (0, core_1.createPopper)(iconRef.current, testRef.current, {
            strategy: 'absolute',
            placement: alignment,
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: [0, 0],
                    },
                },
                {
                    name: 'preventOverflow',
                    options: {
                        boundary: chartAreaRef.current,
                    },
                },
                {
                    name: 'flip',
                    options: {
                        fallbackPlacements: [],
                    },
                },
            ],
        });
    }, [chartAreaRef, alignment]);
    (0, react_1.useEffect)(() => {
        if (!popper.current && body) {
            setPopper();
        }
        return () => {
            popper?.current?.destroy?.();
            popper.current = null;
        };
    }, [setPopper, body]);
    void popper?.current?.update?.();
    const handleEnter = (0, react_1.useCallback)(() => {
        onDOMElementEnter({
            createdBySpecId: specId,
            id,
            type: dom_element_1.DOMElementType.LineAnnotationMarker,
            datum,
        });
    }, [onDOMElementEnter, specId, id, datum]);
    const elementProps = (0, react_1.useMemo)(() => {
        const markerStyle = {
            ...style,
            ...getAnimatedStyles(options, style),
            color,
            top: chartDimensions.top + position.top + panel.top,
            left: chartDimensions.left + position.left + panel.left,
            cursor: clickable ? 'pointer' : constants_1.DEFAULT_CSS_CURSOR,
        };
        const transform = { transform: getMarkerCentredTransform(alignment, Boolean(dimension)) };
        const ariaLabel = datum.ariaLabel ?? datum.details ?? datum.header ?? `line annotation ${datum.dataValue}`;
        const tooltipDomId = (0, annotation_tooltip_1.getAnnotationTooltipDomId)(chartId, id);
        return {
            className: 'echAnnotation__marker',
            'data-testid': 'echAnnotationMarker',
            onMouseEnter: handleEnter,
            onMouseLeave: () => onDOMElementLeave(),
            onFocus: handleEnter,
            onBlur: () => onDOMElementLeave(),
            onKeyDown: (e) => {
                if (e.key === 'Escape') {
                    onDOMElementLeave();
                }
            },
            style: { ...markerStyle, ...transform },
            'aria-describedby': tooltipDomId,
            'aria-label': ariaLabel,
        };
    }, [
        handleEnter,
        onDOMElementLeave,
        color,
        chartDimensions,
        position,
        panel,
        clickable,
        style,
        options,
        alignment,
        dimension,
        id,
        chartId,
        datum,
    ]);
    return clickable ? (react_1.default.createElement("button", { ...elementProps, onClick: () => onDOMElementClick(), type: "button" },
        react_1.default.createElement("div", { ref: iconRef, className: "echAnnotation__icon" }, (0, common_1.renderWithProps)(icon, datum)),
        body && (react_1.default.createElement("div", { ref: testRef, className: "echAnnotation__body" }, (0, common_1.renderWithProps)(body, datum))))) : (react_1.default.createElement("div", { ...elementProps, tabIndex: 0, role: "graphics-symbol" },
        react_1.default.createElement("div", { ref: iconRef, className: "echAnnotation__icon" }, (0, common_1.renderWithProps)(icon, datum)),
        body && (react_1.default.createElement("div", { ref: testRef, className: "echAnnotation__body" }, (0, common_1.renderWithProps)(body, datum)))));
}
function getAnimatedStyles({ duration, delay, timeFunction, snapValues = [], enabled }, { opacity }) {
    if (!enabled || (typeof opacity === 'number' && snapValues.includes(opacity)))
        return {};
    return {
        transitionDuration: `${duration}ms`,
        transitionDelay: `${delay}ms`,
        transitionProperty: 'opacity',
        transitionTimingFunction: timeFunction,
    };
}
//# sourceMappingURL=line_marker.js.map