"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_rte_1 = __importDefault(require("react-rte"));
var input_1 = require("../input");
var Button_1 = require("../Button");
var TransactionButton_1 = require("../TransactionButton");
var __1 = require("../");
var Checkbox_1 = require("../input/Checkbox");
var styledComponents_1 = require("./styledComponents");
var SUMMARY_MAX_LENGTH = 120;
var SubmitChallengeStatement = /** @class */ (function (_super) {
    __extends(SubmitChallengeStatement, _super);
    function SubmitChallengeStatement() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            summaryValue: "",
            citeConstitutionValue: react_rte_1.default.createEmptyValue(),
            detailsValue: react_rte_1.default.createEmptyValue(),
            didConfirmChallenge: false,
        };
        _this.isFormInvalid = function () {
            var _a = _this.state, summaryValue = _a.summaryValue, citeConstitutionValue = _a.citeConstitutionValue, detailsValue = _a.detailsValue, didConfirmChallenge = _a.didConfirmChallenge;
            var citeConstitution = document.createElement("div");
            citeConstitution.innerHTML = citeConstitutionValue.toString("html");
            var details = document.createElement("div");
            details.innerHTML = detailsValue.toString("html");
            return (!summaryValue ||
                !summaryValue.length ||
                !citeConstitution.innerText.length ||
                !details.innerText.length ||
                !didConfirmChallenge);
        };
        _this.renderHelperMessage = function () {
            if (_this.isFormInvalid()) {
                return React.createElement(styledComponents_1.StyledErrorMessage, null, "Please check that all fields have been filled out");
            }
            return React.createElement(React.Fragment, null, "This will pop up a separate MetaMask window to confirm your transactions.");
        };
        _this.handleSummaryValueChange = function (name, summaryValue) {
            _this.setState({ summaryValue: summaryValue });
            _this.props.updateStatementValue("summary", summaryValue);
        };
        _this.handleCiteConstitutionValueChange = function (citeConstitutionValue) {
            _this.setState({ citeConstitutionValue: citeConstitutionValue });
            _this.props.updateStatementValue("citeConstitution", citeConstitutionValue);
        };
        _this.handleDetailsValueChange = function (detailsValue) {
            _this.setState({ detailsValue: detailsValue });
            _this.props.updateStatementValue("details", detailsValue);
        };
        _this.toggleDidConfirmChallenge = function () {
            _this.setState({ didConfirmChallenge: !_this.state.didConfirmChallenge });
        };
        return _this;
    }
    SubmitChallengeStatement.prototype.render = function () {
        return (React.createElement(React.Fragment, null,
            React.createElement(styledComponents_1.StyledUserStatementHeaderOuter, null,
                React.createElement(styledComponents_1.StyledUserStatementHeader, null,
                    React.createElement(styledComponents_1.StatementHeaderHeading, null, "Challenge Newsroom"),
                    React.createElement(styledComponents_1.StatementHeaderNewsroomName, null, this.props.newsroomName),
                    React.createElement(styledComponents_1.CopyLarge, null,
                        "A deposit of ",
                        React.createElement("strong", null,
                            this.props.minDeposit,
                            " tokens"),
                        " is required to challenge a newsroom. Read our",
                        " ",
                        React.createElement(styledComponents_1.StyledLink, { href: this.props.governanceGuideURI }, "governance guide"),
                        " before you begin."),
                    React.createElement(styledComponents_1.StyledOl, null,
                        React.createElement(styledComponents_1.StyledLi, null,
                            React.createElement(styledComponents_1.StyledLiContent, null, "State reasons for your challenge")),
                        React.createElement(styledComponents_1.StyledLi, null,
                            React.createElement(styledComponents_1.StyledLiContent, null, "Deposit CVL tokens to challenge"))),
                    React.createElement(styledComponents_1.CopySmall, null,
                        "After a challenge is submitted, the CVL token-holding community will have have",
                        " ",
                        React.createElement("strong", null,
                            this.props.commitStageLen,
                            " to commit their votes"),
                        ", followed by",
                        " ",
                        React.createElement("strong", null,
                            this.props.revealStageLen,
                            " to confirm their votes.")))),
            React.createElement(styledComponents_1.StyledUserStatementBodyOuter, null,
                React.createElement(styledComponents_1.StyledUserStatementBody, null,
                    React.createElement(styledComponents_1.BodyHeader, null, "State reasons for your challenge"),
                    React.createElement(styledComponents_1.BodyCopyHelper, null, "Enter a summary of the reasons for your challenge (Max 120 characters)"),
                    React.createElement(styledComponents_1.SectionForm, null,
                        React.createElement(styledComponents_1.SectionFormHeader, null, "Write 1-2 sentences about why you\u2019re challenging this newsroom (required)"),
                        React.createElement(styledComponents_1.SectionFormCopyHelper, null,
                            "Max character limit: ",
                            SUMMARY_MAX_LENGTH.toString()),
                        React.createElement(styledComponents_1.StyledTextareaContainer, null,
                            React.createElement(input_1.TextareaInput, { name: "challenge_statement_summary", value: this.state.summaryValue, onChange: this.handleSummaryValueChange, maxLength: SUMMARY_MAX_LENGTH.toString() }))),
                    React.createElement(styledComponents_1.SectionForm, null,
                        React.createElement(styledComponents_1.SectionFormHeader, null, "Please cite the section or principles of the Civil Constitution that you believe the Newsroom has violated. (required)"),
                        React.createElement(styledComponents_1.SectionFormCopyHelper, null,
                            React.createElement(styledComponents_1.StyledLink, { href: this.props.constitutionURI, target: "_blank" }, "See Civil Constitution")),
                        React.createElement(styledComponents_1.StyledTextareaContainer, null,
                            React.createElement(react_rte_1.default, { value: this.state.citeConstitutionValue, onChange: this.handleCiteConstitutionValueChange }))),
                    React.createElement(styledComponents_1.SectionForm, null,
                        React.createElement(styledComponents_1.SectionFormHeader, null, "Add details and evidence to support your statements. (required) "),
                        React.createElement(styledComponents_1.SectionFormCopyHelper, null, "Help inform the Civil community to vote accordingly by providing as much information as possible to support your case."),
                        React.createElement(styledComponents_1.StyledTextareaContainer, null,
                            React.createElement(react_rte_1.default, { value: this.state.detailsValue, onChange: this.handleDetailsValueChange }))),
                    React.createElement(styledComponents_1.SectionDeposit, null,
                        React.createElement(styledComponents_1.StyledDepositLabel, null, "Total Token Deposit"),
                        React.createElement(styledComponents_1.StyledDepositAmount, null, this.props.minDeposit)),
                    React.createElement(styledComponents_1.SectionConfirmChallenge, null,
                        React.createElement("div", null,
                            React.createElement(Checkbox_1.Checkbox, { size: Checkbox_1.CheckboxSizes.SMALL, checked: this.state.didConfirmChallenge, onClick: this.toggleDidConfirmChallenge })),
                        React.createElement("div", null, "I understand that once I confirm this challenge, I can not withdraw it, and that I communicated my concerns with Newsroom.")),
                    React.createElement(styledComponents_1.SectionActions, null,
                        React.createElement("div", null,
                            React.createElement(TransactionButton_1.TransactionButtonNoModal, { transactions: this.props.transactions, postExecuteTransactions: this.props.postExecuteTransactions, Button: __1.MetaMaskLogoButton, disabled: this.isFormInvalid() }, "Confirm and Deposit CVL"),
                            React.createElement(styledComponents_1.SectionFormCopyHelper, null, this.renderHelperMessage())),
                        React.createElement("div", null,
                            React.createElement(Button_1.CancelButton, { size: Button_1.buttonSizes.MEDIUM, to: this.props.listingURI }, "Cancel")))))));
    };
    return SubmitChallengeStatement;
}(React.Component));
exports.SubmitChallengeStatement = SubmitChallengeStatement;
//# sourceMappingURL=SubmitChallengeStatement.js.map