"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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileInput = void 0;
var React = require("react");
var PropTypes = require("prop-types");
var Dropzone = require("react-dropzone");
var classnames = require("classnames");
var flex_1 = require("../flex");
var Forms_1 = require("../utils/Forms");
require("./FileInput.less");
require("../less/forms.less");
function DefaultIcon() {
    return (React.createElement("svg", { className: "FileInput--Icon", width: "42px", height: "24px", viewBox: "0 0 42 24" },
        React.createElement("g", null,
            React.createElement("g", { transform: "translate(-242.000000, -13.000000)", fill: "#474c5e" },
                React.createElement("path", { d: "M248.461538,23.1333333 C248.461538,23.1333333 249,16.7333333 255.461538,16.7333333 C258.692308,16.7333333 260.307692,18.3333333 260.307692,18.3333333 C260.307692,18.3333333 263,13 267.846154,13 C272.28333,13 275.884815,15.8553426 275.922774,20.7203129 C280.230769,19.9912817 284,24.1407304 284,28.5959361 C284,33.0511418 280.689148,37 277.269231,37 C273,37 255,37 248.461538,37 C244.153846,36.4622091 242,33.2356824 242,29.6715179 C242,26.8666667 243.615385,23.1333333 248.461538,23.1333333 Z M268.593411,29.0413873 L271.257909,29.0413873 C271.632318,29.0413873 271.728491,28.8236393 271.470635,28.5550334 L267.161561,24.0663241 C266.65173,23.5352402 265.816118,23.5316579 265.302848,24.0663241 L260.993774,28.5550334 C260.729939,28.8298671 260.831158,29.0413873 261.2065,29.0413873 L263.894912,29.0413873 L263.894912,37 L268.593411,37 L268.593411,29.0413873 Z" })))));
}
function ErrorIcon() {
    return (React.createElement("svg", { className: "FileInput--Icon", width: "42px", height: "24px", viewBox: "0 0 42 24" },
        React.createElement("g", { fill: "#de004b" },
            React.createElement("path", { d: "M33.9,7.7c0-4.9-3.6-7.7-8.1-7.7c-4.8,0-7.5,5.3-7.5,5.3s-1.6-1.6-4.8-1.6c-6.5,0-7,6.4-7,6.4c-4.8,0-6.5,3.7-6.5,6.5c0,3.6,2.2,6.8,6.5,7.3c6.5,0,24.5,0,28.8,0c3.4,0,6.7-3.9,6.7-8.4S38.2,7,33.9,7.7z M26.9,19.7h-9.3c-0.6,0-1-0.5-1-1c0-0.1,0-0.3,0.1-0.4h0l4.6-9.3h0c0.2-0.3,0.5-0.6,0.9-0.6c0.4,0,0.8,0.2,0.9,0.6h0l4.7,9.3c0.1,0.1,0.1,0.3,0.1,0.4C27.9,19.2,27.5,19.7,26.9,19.7z" }),
            React.createElement("circle", { cx: "22.2", cy: "17.6", r: "1" }),
            React.createElement("rect", { x: "21.4", y: "11.2", width: "1.7", height: "4.4" }))));
}
function SuccessIcon() {
    return (React.createElement("svg", { className: "FileInput--Icon", width: "42px", height: "24px", viewBox: "0 0 42 24" },
        React.createElement("g", { fill: "#009e78", transform: "translate(-242.000000, -13.000000)" },
            React.createElement("path", { d: "M248.461538,23.1333333 C248.461538,23.1333333 249,16.7333333 255.461538,16.7333333 C258.692308,16.7333333 260.307692,18.3333333 260.307692,18.3333333 C260.307692,18.3333333 263,13 267.846154,13 C272.28333,13 275.884815,15.8553426 275.922774,20.7203129 C280.230769,19.9912817 284,24.1407304 284,28.5959361 C284,33.0511418 280.689148,37 277.269231,37 C273,37 255,37 248.461538,37 C244.153846,36.4622091 242,33.2356824 242,29.6715179 C242,26.8666667 243.615385,23.1333333 248.461538,23.1333333 Z M271.907449,23.5740441 C272.037079,23.4444141 272.037079,23.2221913 271.907449,23.0925614 L269.57411,20.7592219 C269.44448,20.6295919 269.222257,20.6295919 269.092627,20.7592219 L262.000016,27.8703517 L258.907415,24.7592324 C258.777785,24.6296024 258.555562,24.6296024 258.425932,24.7592324 L256.092593,27.0925719 C255.962963,27.2222018 255.962963,27.4444246 256.092593,27.5740546 L261.759274,33.2407361 C261.833349,33.2962918 261.907423,33.333329 262.000016,33.333329 C262.092609,33.333329 262.166683,33.2962918 262.240757,33.2407361 L271.907449,23.5740441 Z" }))));
}
function UploadingIcon(props) {
    return (React.createElement("svg", { className: "FileInput--Icon", width: "42px", height: "24px", viewBox: "0 0 42 24" },
        React.createElement("linearGradient", { id: "bg", x1: "0.5", y1: "1", x2: "0.5", y2: "0" },
            React.createElement("stop", { offset: "0%", stopOpacity: "1", stopColor: "#2e00d9" }),
            React.createElement("stop", { offset: props.percent + "%", stopOpacity: "1", stopColor: "#2e00d9" }),
            React.createElement("stop", { offset: props.percent + "%", stopOpacity: "1", stopColor: "#d6d7de" }),
            React.createElement("stop", { offset: "100%", stopOpacity: "1", stopColor: "#d6d7de" })),
        React.createElement("g", null,
            React.createElement("g", { transform: "translate(-242.000000, -13.000000)", fill: "url(#bg)" },
                React.createElement("path", { d: "M248.461538,23.1333333 C243.615385,23.1333333 242,26.8666667 242,29.6715179 C242,33.2356824 244.153846,36.4622091 248.461538,37 C255,37 273,37 277.269231,37 C280.689148,37 284,33.0511418 284,28.5959361 C284,24.1407304 280.230769,19.9912817 275.922774,20.7203129 C275.884815,15.8553426 272.28333,13 267.846154,13 C263,13 260.307692,18.3333333 260.307692,18.3333333 C260.307692,18.3333333 258.692308,16.7333333 255.461538,16.7333333 C249,16.7333333 248.461538,23.1333333 248.461538,23.1333333 Z" })))));
}
UploadingIcon.propTypes = {
    percent: PropTypes.number.isRequired,
};
function renderLabel(text) {
    return React.createElement("label", { className: "FileInput--Label" }, text);
}
function renderMessage(text, selected) {
    var _a;
    var classes = (_a = {},
        _a["FileInput--Text"] = true,
        _a["FileInput--Text--selected"] = selected,
        _a);
    return (React.createElement(flex_1.FlexItem, { className: classnames(classes), grow: true }, text));
}
var propTypes = {
    className: PropTypes.string,
    customIcon: PropTypes.node,
    dropzoneClass: PropTypes.string,
    iconOnly: PropTypes.bool,
    label: PropTypes.string,
    store: PropTypes.func.isRequired,
    accept: PropTypes.string,
    size: PropTypes.string,
};
var defaultProps = {
    iconOnly: false,
    className: "",
    size: Forms_1.FormElementSize.FULL_WIDTH,
};
var FileInput = /** @class */ (function (_super) {
    __extends(FileInput, _super);
    function FileInput(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            fileKey: null,
            filename: null,
            error: null,
            progress: null,
            success: null,
        };
        _this.onDropRejected = _this.onDropRejected.bind(_this);
        _this.onDropAccepted = _this.onDropAccepted.bind(_this);
        return _this;
    }
    FileInput.prototype.onDropAccepted = function (files) {
        var _this = this;
        var fileKey = Math.random();
        this.setState({ fileKey: fileKey });
        this.setState({ filename: files[0].name, error: null, progress: 0, success: null });
        this.props.store(files[0], {
            success: function () {
                if (_this.state.fileKey !== fileKey) {
                    return; // If the user drops multiple files we want to only treat the last one as "success"
                }
                _this.setState({ success: true });
            },
            error: function (errMsg) {
                if (errMsg === void 0) { errMsg = "Unknown error"; }
                _this.setState({ error: errMsg });
            },
            progress: function (progress) {
                if (_this.state.fileKey !== fileKey) {
                    return; // If the user drops multiple files we want to only take progress from the active upload
                }
                _this.setState({ progress: progress });
            },
        });
    };
    FileInput.prototype.onDropRejected = function () {
        this.setState({ filename: null, error: "Invalid " + this.props.label, success: null });
    };
    FileInput.prototype.render = function () {
        var _this = this;
        var _a = this.props, iconOnly = _a.iconOnly, label = _a.label;
        var dropzoneStyle = iconOnly ? { display: "inline-block" } : {};
        return (React.createElement(Dropzone, { accept: this.props.accept, className: classnames("FileInput--DropzoneContainer", this.props.dropzoneClass), style: dropzoneStyle, multiple: false, onDropAccepted: this.onDropAccepted, onDropRejected: this.onDropRejected, inputProps: { "aria-label": label ? "Upload " + label : "Upload" } }, function (_a) {
            var isDragActive = _a.isDragActive, isDragReject = _a.isDragReject;
            var message = "Upload " + _this.props.label;
            var icon = React.createElement(DefaultIcon, null);
            var selected = false;
            if (isDragActive) {
                selected = true;
                message = "";
            }
            else if (isDragReject || _this.state.error) {
                selected = true;
                message = _this.state.error || "Invalid " + _this.props.label;
                icon = React.createElement(ErrorIcon, null);
            }
            else if (_this.state.success) {
                selected = true;
                message = _this.state.filename;
                icon = React.createElement(SuccessIcon, null);
            }
            else if (_this.state.filename) {
                icon = React.createElement(UploadingIcon, { percent: _this.state.progress });
                message = _this.state.filename;
                selected = true;
            }
            if (_this.props.customIcon) {
                icon = _this.props.customIcon;
            }
            return (React.createElement(flex_1.FlexBox, { className: classnames("FileInput", Forms_1.formElementSizeClassName(_this.props.size), _this.props.className, !!_this.state.filename &&
                    !_this.state.success &&
                    !_this.state.error &&
                    "FileInput--AttachmentIsUploading", iconOnly && "FileInput--IconOnly"), "data-testid": "fileInput" },
                !iconOnly && selected && renderLabel(label),
                !iconOnly && renderMessage(message, selected),
                icon));
        }));
    };
    FileInput.propTypes = propTypes;
    FileInput.defaultProps = defaultProps;
    return FileInput;
}(React.Component));
exports.FileInput = FileInput;
