"use strict";
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 });
/* @flow */
const React = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const react_tippy_1 = require("react-tippy");
const formik_1 = require("formik");
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
const Yup = __importStar(require("yup"));
const ButtonBase_1 = __importDefault(require("@material-ui/core/ButtonBase"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const TextField_1 = __importDefault(require("components/bosons/TextField"));
const Button_1 = __importDefault(require("components/bosons/Button"));
const FieldLabel_1 = __importDefault(require("components/bosons/FieldLabel"));
const styles_1 = __importDefault(require("./styles"));
class EmailInputFields extends React.Component {
    _renderToField() {
        return (React.createElement(EmailInputField, { label: "To", onEmailChange: emails => {
                this.props.onEmailChange({ to: emails });
            } }));
    }
    _renderCCField() {
        return (React.createElement(EmailInputField, { label: "CC", onEmailChange: emails => {
                this.props.onEmailChange({ cc: emails });
            } }));
    }
    _renderBCCField() {
        return (React.createElement(EmailInputField, { label: "BCC", onEmailChange: emails => {
                this.props.onEmailChange({ bcc: emails });
            } }));
    }
    render() {
        const { classes, showTo, showCC, showBCC } = this.props;
        return (React.createElement(ErrorBoundary_1.default, null,
            React.createElement("div", { className: classes.component },
                showTo && this._renderToField(),
                showCC && this._renderCCField(),
                showBCC && this._renderBCCField())));
    }
}
EmailInputFields.propTypes = {
    classes: prop_types_1.default.object,
    onEmailChange: prop_types_1.default.func,
    showTo: prop_types_1.default.bool,
    showBCC: prop_types_1.default.bool,
    showCC: prop_types_1.default.bool,
};
EmailInputFields.defaultProps = {
    onEmailChange: () => { },
    showTo: true,
    showCC: true,
    showBCC: true,
};
exports.default = withStyles_1.default(styles_1.default)(EmailInputFields);
class BaseEmailInputField extends React.Component, $Exact, label, string {
}
EmailInputFieldState
    > {
        addEmailForm: any,
        propTypes = {
            classes: prop_types_1.default.object,
            onEmailChange: prop_types_1.default.func,
            label: prop_types_1.default.string,
        },
        state = {
            emails: {},
        },
        _onAddEmail = values => {
            const { emails } = this.state;
            this.setState({
                emails: Object.assign({}, emails, { [values.email]: {
                        name: values.name,
                        email: values.email,
                    } }),
            }, () => {
                this.addEmailForm.resetForm({ name: '', email: '' });
                this.props.onEmailChange(Object.values(this.state.emails));
            });
        },
        _onRemoveEmail = ({ name, email }) => {
            const { emails } = this.state;
            let newEmails = emails;
            delete newEmails[email];
            this.setState({ emails: newEmails }, () => {
                this.props.onEmailChange(Object.values(this.state.emails));
            });
        },
        render() {
            const { classes, label } = this.props;
            const { emails } = this.state;
            return (React.createElement("div", { className: classes.emailInputField },
                React.createElement(FieldLabel_1.default, { label: label }),
                !isEmpty_1.default(emails) && (React.createElement("div", { className: classes.listEmails }, Object.values(emails).map((email, index) => (React.createElement("div", { className: classes.addedEmailWrapper, key: index },
                    React.createElement(react_tippy_1.Tooltip, { title: email.email, interactive: true, animation: "fade", position: "top", arrow: true, arrowType: "round", trigger: "mouseenter focus" },
                        React.createElement("div", { className: classes.addedEmail }, email.name)),
                    React.createElement(ButtonBase_1.default, { classes: { root: classes.removeEmailIcon }, onClick: () => {
                            this._onRemoveEmail(email);
                        } },
                        React.createElement("i", { className: "fa fa-times" }))))))),
                React.createElement("div", { className: classes.emailInput },
                    React.createElement(formik_1.Formik, { ref: ref => (this.addEmailForm = ref), initialValues: { name: '', email: '' }, validationSchema: Yup.object({
                            email: Yup.string()
                                .required('Email is required')
                                .email('Email is not valid'),
                            name: Yup.string().required('Name is required'),
                        }), onSubmit: this._onAddEmail }, formProps => (React.createElement("form", { className: classes.addEmailForm, onSubmit: formProps.handleSubmit },
                        React.createElement(TextField_1.default, { placeholder: "Name", classes: { component: classes.textInput }, value: formProps.values.name, error: formProps.touched.name && formProps.errors.name, onChange: formProps.handleChange, onBlur: formProps.handleBlur, name: "name" }),
                        React.createElement(TextField_1.default, { placeholder: "Email", classes: { component: classes.textInput }, value: formProps.values.email, error: formProps.touched.email && formProps.errors.email, onChange: formProps.handleChange, onBlur: formProps.handleBlur, name: "email" }),
                        React.createElement(Button_1.default, { title: "\u2713", type: "submit", isDisabled: Boolean(formProps.touched.name && formProps.errors.name) ||
                                Boolean(formProps.touched.email && formProps.errors.email), classes: { component: classes.addEmailButton } })))))));
        }
    };
const EmailInputField = withStyles_1.default(styles_1.default)(BaseEmailInputField);
//# sourceMappingURL=index.js.map