"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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 input_1 = require("../input/");
var Button_1 = require("../Button");
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("../styleConstants");
exports.SubmitLinkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n\n  ", " {\n    border-radius: 0;\n    font-size: 14px;\n    letter-spacing: 0;\n    margin: 5px 0 0 10px;\n    padding: 10px 15px;\n    width: 200px;\n  }\n\n  ", " {\n    display: block;\n\n    ", " {\n      margin: 0;\n      width: 100%;\n    }\n  }\n"], ["\n  align-items: flex-start;\n  display: flex;\n\n  ", " {\n    border-radius: 0;\n    font-size: 14px;\n    letter-spacing: 0;\n    margin: 5px 0 0 10px;\n    padding: 10px 15px;\n    width: 200px;\n  }\n\n  ", " {\n    display: block;\n\n    ", " {\n      margin: 0;\n      width: 100%;\n    }\n  }\n"])), Button_1.Button, styleConstants_1.mediaQueries.MOBILE, Button_1.Button);
exports.ResponseText = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  ", ";\n  font: ", ";\n  font-size: 12px;\n"], ["\n  color: ", ";\n  ", ";\n  font: ", ";\n  font-size: 12px;\n"])), styleConstants_1.colors.accent.CIVIL_RED, function (props) { return (props.error ? styleConstants_1.colors.accent.CIVIL_RED : styleConstants_1.colors.primary.BLACK); }, styleConstants_1.fonts.SANS_SERIF);
exports.SubmitLink = function (props) {
    var buttonText = props.buttonText, name = props.name, placeholder = props.placeholder, submitting = props.submitting, success = props.success, error = props.error, onChange = props.onChange, onSubmit = props.onSubmit;
    return (React.createElement(React.Fragment, null,
        React.createElement("form", null,
            React.createElement(exports.SubmitLinkStyled, null,
                React.createElement(input_1.URLInput, { name: name, placeholder: placeholder, onChange: onChange }),
                React.createElement(Button_1.Button, { disabled: submitting, type: "submit", onClick: onSubmit }, submitting ? "Submitting..." : buttonText || "Submit Link")),
            React.createElement(exports.ResponseText, { error: error },
                error && React.createElement(React.Fragment, null, "There was an error submitting your link. Please try again."),
                success && React.createElement(React.Fragment, null, "Your link has been submitted.")))));
};
var templateObject_1, templateObject_2;
//# sourceMappingURL=SubmitLink.js.map