import React from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import Alert from "antd/lib/alert";
import DynamicForm from "@/components/dynamic-form/DynamicForm";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import recordEvent from "@/services/recordEvent";

class CreateUserDialog extends React.Component {
  static propTypes = {
    dialog: DialogPropType.isRequired,
    onCreate: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = { savingUser: false, errorMessage: null };
    this.form = React.createRef();
  }

  componentDidMount() {
    recordEvent("view", "page", "users/new");
  }

  createUser = () => {
    this.form.current.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({ savingUser: true });
        this.props
          .onCreate(values)
          .then(() => {
            this.props.dialog.close();
          })
          .catch(error => {
            this.setState({ savingUser: false, errorMessage: error.message });
          });
      }
    });
  };

  render() {
    const { savingUser, errorMessage } = this.state;
    const formFields = [
      { name: "name", title: "Name", type: "text", autoFocus: true },
      { name: "email", title: "Email", type: "email" },
    ].map(field => ({ required: true, props: { onPressEnter: this.createUser }, ...field }));

    return (
      <Modal
        {...this.props.dialog.props}
        title="Create a New User"
        okText="Create"
        okButtonProps={{ loading: savingUser }}
        onOk={() => this.createUser()}>
        <DynamicForm fields={formFields} ref={this.form} hideSubmitButton />
        {errorMessage && <Alert message={errorMessage} type="error" showIcon />}
      </Modal>
    );
  }
}

export default wrapDialog(CreateUserDialog);