"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIActionCallout = void 0;
const react_1 = require("@fluentui/react");
const react_2 = __importDefault(require("react"));
const Icons_1 = require("../Icons");
const UICallout_1 = require("../UICallout");
const UIIcon_1 = require("../UIIcon");
require("./UIActionCallout.scss");
/**
 *
 *
 */
class UIActionCallout extends react_2.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {ActionCalloutProps} props
     */
    constructor(props) {
        super(props);
        this.actionDetail = props.actionDetail;
        this.commandAction = props.commandAction;
        this.targetElementId = props.targetElementId;
        this.showInline = props.showInline;
        this.anchor = react_2.default.createRef();
        this.onCalloutClick = this.onCalloutClick.bind(this);
        this.icon = props.icon;
        this.onClick = props.onClick;
        this.anchorClicked = false;
        this.isError = props.isError ?? false;
    }
    onCalloutClick() {
        if (this.onClick && !this.anchorClicked) {
            this.onClick();
        }
        if (this.actionDetail.command && this.commandAction) {
            this.commandAction(this.actionDetail.command);
        }
        else {
            this.anchor.current?.click();
            this.anchorClicked = false;
        }
    }
    handleAnchorClick() {
        this.anchorClicked = true;
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        return (react_2.default.createElement(UICallout_1.UICallout, { className: "UIActionCallout-callout", onClick: this.onCalloutClick, target: `#${this.targetElementId}`, isBeakVisible: true, doNotLayer: true, beakWidth: 10, calloutMaxWidth: 230, calloutMinWidth: 230, directionalHint: react_1.DirectionalHint.bottomLeftEdge, styles: {
                calloutMain: { padding: '10px' },
                root: {
                    position: this.showInline === false ? 'absolute' : 'sticky',
                    border: this.isError === true ? 'thin solid var(--vscode-errorForeground)' : 'thin solid none'
                }
            } },
            this.icon?.render() ?? react_2.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.HelpAction }),
            react_2.default.createElement("a", { ref: this.anchor, href: this.actionDetail.url, className: "UIActionCallout-link", target: "_blank", rel: "noreferrer", onClick: () => this.handleAnchorClick() }, this.actionDetail.linkText),
            react_2.default.createElement("div", { className: "UIActionCallout-subText" }, this.actionDetail.subText)));
    }
}
exports.UIActionCallout = UIActionCallout;
//# sourceMappingURL=UIActionCallout.js.map