import copy from 'copy-to-clipboard';
import CommentCheckIcon from 'mdi-react/CommentCheckIcon';
import CommentRemoveIcon from 'mdi-react/CommentRemoveIcon';
import FlagVariantIcon from 'mdi-react/FlagVariantIcon';
import LinkIcon from 'mdi-react/LinkIcon';
import SecurityLockIcon from 'mdi-react/SecurityLockIcon';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Markdown } from '../components/Markdown';
import { Timestamp } from '../components/time/Timestamp';
import { eventLogger } from '../tracking/eventLogger';
import { UserAvatar } from '../user/UserAvatar';
import { asError } from '../util/errors';
export class DiscussionsComment extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.scrollToElement = null;
        this.state = {
            copiedLink: false,
        };
        this.onShareLinkClick = event => {
            if (event.metaKey || event.altKey || event.ctrlKey) {
                return;
            }
            eventLogger.log('ShareCommentButtonClicked');
            event.preventDefault();
            copy(this.props.comment.inlineURL); // ! because this method is only called when inlineURL exists
            this.setState({ copiedLink: true });
            setTimeout(() => {
                this.setState({ copiedLink: false });
            }, 1000);
        };
        this.onReportClick = event => {
            eventLogger.log('ReportCommentButtonClicked');
            const reason = prompt('Report reason:', 'spam, offensive material, etc');
            if (!reason) {
                return;
            }
            this.props.onReport(this.props.comment, reason).subscribe(undefined, error => (error ? alert('Error reporting comment: ' + asError(error).message) : undefined));
        };
        this.onClearReportsClick = event => {
            this.props.onClearReports(this.props.comment).subscribe(undefined, error => (error ? alert('Error clearing comment reports: ' + asError(error).message) : undefined));
        };
        this.onDeleteClick = event => {
            this.props.onDelete(this.props.comment).subscribe(undefined, error => (error ? alert('Error deleting comment: ' + asError(error).message) : undefined));
        };
        this.setScrollToElement = (ref) => {
            this.scrollToElement = ref;
        };
    }
    componentDidMount() {
        if (this.scrollToElement) {
            this.scrollToElement.scrollIntoView();
        }
    }
    render() {
        const { location, comment, isSiteAdmin, onReport, onClearReports, onDelete } = this.props;
        const isTargeted = new URLSearchParams(location.hash).get('commentID') === comment.id;
        // TODO(slimsag:discussions): ASAP: markdown links, headings, etc lead to #
        return (React.createElement("div", { className: `discussions-comment${isTargeted ? ' discussions-comment--targeted' : ''}`, ref: isTargeted ? this.setScrollToElement : undefined },
            React.createElement("div", { className: "discussions-comment__top-area" },
                React.createElement("span", { className: "discussions-comment__author" },
                    React.createElement(Link, { to: `/users/${comment.author.username}`, "data-tooltip": comment.author.displayName },
                        React.createElement(UserAvatar, { user: comment.author, className: "icon-inline icon-sm" })),
                    React.createElement(Link, { to: `/users/${comment.author.username}`, "data-tooltip": comment.author.displayName, className: "ml-1 mr-1" }, comment.author.username),
                    React.createElement("span", { className: "mr-1" }, "commented"),
                    React.createElement(Timestamp, { date: comment.createdAt })),
                React.createElement("span", { className: "discussions-comment__spacer" }),
                React.createElement("span", { className: "discussions-comment__top-right-area" },
                    this.props.comment.inlineURL && (React.createElement(Link, { className: "btn btn-link btn-sm discussions-comment__share", "data-tooltip": "Copy link to this comment", to: this.props.comment.inlineURL, onClick: this.onShareLinkClick }, this.state.copiedLink ? 'Copied!' : React.createElement(LinkIcon, { className: "icon-inline" }))),
                    comment.canReport &&
                        onReport && (React.createElement("button", { className: "btn btn-link btn-sm discussions-comment__report", "data-tooltip": "Report this comment", onClick: this.onReportClick },
                        React.createElement(FlagVariantIcon, { className: "icon-inline" }))),
                    isSiteAdmin && (React.createElement("span", { className: "discussions-comment__admin" },
                        React.createElement(SecurityLockIcon, { className: "icon-inline icon-sm", "data-tooltip": "Admin area" }),
                        comment.reports.length > 0 && (React.createElement(React.Fragment, null,
                            React.createElement("span", { className: "ml-1 mr-1 discussions-comment__reports", "data-tooltip": comment.reports.join('\n\n') },
                                comment.reports.length,
                                " reports"),
                            comment.canClearReports &&
                                onClearReports && (React.createElement("button", { className: "btn btn-link btn-sm discussions-comment__toolbar-btn", "data-tooltip": "Clear reports / mark as good message", onClick: this.onClearReportsClick },
                                React.createElement(CommentCheckIcon, { className: "icon-inline" }))))),
                        comment.canDelete &&
                            onDelete && (React.createElement("button", { className: "btn btn-link btn-sm discussions-comment__toolbar-btn", "data-tooltip": "Delete comment forever", onClick: this.onDeleteClick },
                            React.createElement(CommentRemoveIcon, { className: "icon-inline" }))))))),
            React.createElement("div", { className: "discussions-comment__content" },
                React.createElement(Markdown, { dangerousInnerHTML: comment.html }))));
    }
}
//# sourceMappingURL=DiscussionsComment.js.map