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 __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import * as React from "react";
import * as PropTypes from "prop-types";
import * as classnames from "classnames";
import * as CopyToClipboard from "react-copy-to-clipboard";
import { FormElementSize, formElementSizeClassName } from "../utils/Forms";
import { TextInput } from "../TextInput/TextInput";
import "./CopyableInput.less";
import "../less/forms.less";
var propTypes = __assign(__assign({}, TextInput.propTypes), { className: PropTypes.string, enableCopy: PropTypes.bool, required: PropTypes.bool, size: PropTypes.string, onClickCopy: PropTypes.func });
var defaultProps = {
    enableCopy: true,
    required: false,
    size: FormElementSize.FULL_WIDTH,
};
/**
 * This is a text input that takes optional props
 * enableShow and enableCopy that allow the user
 * to show/hide and copy the value of the input.
 */
var CopyableInput = /** @class */ (function (_super) {
    __extends(CopyableInput, _super);
    function CopyableInput(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { copied: false, hidden: true };
        _this.toggleHidden = _this.toggleHidden.bind(_this);
        _this.copyPassword = _this.copyPassword.bind(_this);
        return _this;
    }
    CopyableInput.prototype.toggleHidden = function () {
        this.setState({ hidden: !this.state.hidden });
    };
    CopyableInput.prototype.copyPassword = function () {
        var onClickCopy = this.props.onClickCopy;
        this.setState({ copied: true });
        if (onClickCopy) {
            onClickCopy();
        }
    };
    CopyableInput.prototype.render = function () {
        var type = this.props.type === "password" && this.state.hidden ? "password" : "text";
        var wrapperClass = "CopyableInput";
        return (React.createElement("div", { className: classnames(wrapperClass, formElementSizeClassName(this.props.size), this.props.className) },
            React.createElement(TextInput, { type: type, value: this.props.value, name: this.props.name, placeholder: this.props.placeholder, readOnly: this.props.readOnly, label: this.props.label, onChange: this.props.onChange, required: this.props.required, size: FormElementSize.FULL_WIDTH /* Rely on the fact that we're bounding the parent
                container */ }),
            React.createElement("div", { className: "CopyableInput--links" },
                this.props.enableShow && (React.createElement("button", { type: "button", className: "CopyableInput--link", onClick: this.toggleHidden, "aria-live": "polite" }, this.state.hidden ? "Show" : "Hide")),
                this.props.enableCopy && (React.createElement(CopyToClipboard, { text: this.props.value || "", onCopy: this.copyPassword },
                    React.createElement("button", { type: "button", className: "CopyableInput--link", "aria-live": "polite" }, this.state.copied ? "Copied!" : "Copy"))))));
    };
    CopyableInput.propTypes = propTypes;
    CopyableInput.defaultProps = defaultProps;
    return CopyableInput;
}(React.Component));
export { CopyableInput };
