"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UILink = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const linkStyle = {
    primary: {
        color: 'var(--vscode-textLink-foreground)',
        hoverColor: 'var(--vscode-textLink-activeForeground)'
    },
    secondary: {
        color: 'var(--vscode-foreground)',
        hoverColor: 'var(--vscode-foreground)'
    }
};
/**
 * UILink component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/link
 *
 * @exports
 * @class UILink
 * @extends {React.Component<UILinkProps, {}>}
 */
class UILink extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UILinkProps} props
     */
    constructor(props) {
        super(props);
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const { secondary, underline, disabled } = this.props;
        const styles = secondary ? linkStyle.secondary : linkStyle.primary;
        const linkStyles = () => {
            return {
                root: {
                    color: styles.color,
                    textDecoration: underline === false ? undefined : 'underline',
                    selectors: !disabled
                        ? {
                            '&:hover, &:hover:focus, &:hover:active': {
                                color: styles.hoverColor,
                                textDecoration: underline === false ? 'underline' : 'none'
                            },
                            '&:active, &:focus': {
                                color: styles.hoverColor,
                                textDecoration: underline === false ? 'underline' : 'none',
                                outline: 'none'
                            },
                            // Focus through tab navigation
                            '.ms-Fabric--isFocusVisible &:focus': {
                                boxShadow: 'none',
                                outline: '1px solid var(--vscode-focusBorder)',
                                outlineOffset: '-1px'
                            }
                        }
                        : undefined,
                    opacity: disabled ? 0.4 : undefined
                }
            };
        };
        return react_1.default.createElement(react_2.Link, { ...this.props, styles: linkStyles });
    }
}
exports.UILink = UILink;
//# sourceMappingURL=UILink.js.map