import * as React from 'react';
import { Link } from 'react-router-dom';
import { eventLogger } from '../../../tracking/eventLogger';
import { ChatIcon } from '../../../util/icons'; // TODO: Switch to mdi icon
const onCreateDiscussionClick = () => eventLogger.log('CreateDiscussionClicked');
export const DiscussionsGutterOverlay = props => {
    const hash = new URLSearchParams(props.location.hash.slice('#'.length));
    const onDiscussionsNew = hash.get('tab') === 'discussions' && hash.get('createThread') === 'true';
    hash.delete('threadID');
    hash.delete('commentID');
    if (onDiscussionsNew) {
        hash.delete('tab');
        hash.delete('createThread');
    }
    else {
        hash.set('tab', 'discussions');
        hash.set('createThread', 'true');
    }
    const newURL = props.location.pathname + props.location.search + '#' + hash.toString();
    return (React.createElement("div", { className: "discussions-gutter-overlay", 
        // tslint:disable-next-line:jsx-ban-props needed for dynamic styling
        style: props.overlayPosition
            ? {
                position: 'absolute',
                opacity: 1,
                visibility: 'visible',
                left: props.overlayPosition.left + 'px',
                top: props.overlayPosition.top + 'px',
            }
            : {
                opacity: 0,
                visibility: 'hidden',
            } },
        React.createElement(Link, { className: "discussions-gutter-overlay__link btn btn-sm btn-link btn-icon", onClick: onCreateDiscussionClick, "data-tooltip": onDiscussionsNew ? 'Close discussions' : 'Create a discussion for this selection', to: newURL },
            React.createElement(ChatIcon, { className: "icon-inline" }))));
};
//# sourceMappingURL=DiscussionsGutterOverlay.js.map