/**
 * Node modules
 */
import * as yup from "yup";
import PropTypes from "prop-types";
import React from "react";
import { connect } from "react-redux";
import { FormattedMessage } from "react-intl";
import { withFormik } from "formik";

/**
 * Components
 */
import Form from "../../../../../components/AntDesign/Form";
import InjectTranslation from "../../../../../components/InjectTranslation";
import Input from "../../../../../components/AntDesign/Input";
import Message from "../../../../../components/AntDesign/Message";
import Modal from "../../../../../components/AntDesign/Modal";


/**
 * Redux actions
 */
import { actionCreators as userActionCreators } from "../../../../../redux/user/actions";

/**
 * Redux selectors
 */
import {
  usersSelector,
  isUpdatingUserByIdSelector,
  updateUserByIdRequestSelector,
} from "../../../../../redux/user/selectors";
import Button from "../../../../../components/AntDesign/Button";

class UpdateUserForm extends React.PureComponent {
  state = {
    isModalOpened: false,
  };

  static propTypes = {
    dispatchGetUsers: PropTypes.func.isRequired,
    handleBlur: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    isSubmitting: PropTypes.bool.isRequired,
    isUpdatingUser: PropTypes.bool.isRequired,
    isValid: PropTypes.bool.isRequired,
    resetForm: PropTypes.func.isRequired,
    setSubmitting: PropTypes.func.isRequired,
    submitForm: PropTypes.func.isRequired,
    translate: PropTypes.shape({
      defaultFormats: PropTypes.object,
      defaultLocale: PropTypes.string,
      formatDate: PropTypes.func,
      formatHTMLMessage: PropTypes.func,
      formatMessage: PropTypes.func,
      formatNumber: PropTypes.func,
      formatPlural: PropTypes.func,
      formatRelative: PropTypes.func,
      formatTime: PropTypes.func,
      formats: PropTypes.object,
      formatters: PropTypes.object,
      locale: PropTypes.string,
      messages: PropTypes.object,
      now: PropTypes.func,
      textComponent: PropTypes.string,
    }).isRequired,
    updateUserRequest: PropTypes.shape({ draw: PropTypes.number, response: PropTypes.string }).isRequired,
    usersHeaders: PropTypes.shape({
      limit: PropTypes.string,
      page: PropTypes.string,
      sort: PropTypes.string,
      total: PropTypes.string,
    }).isRequired,
    values: PropTypes.shape({
      objectId: PropTypes.string,
      username: PropTypes.string,
    }).isRequired,
  };

  componentDidUpdate (previousProps) {
    const {
      dispatchGetUsers,
      updateUserRequest,
      resetForm,
      setSubmitting,
      translate,
      usersHeaders,
    } = this.props;
    if (updateUserRequest.draw > previousProps.updateUserRequest.draw) {
      setSubmitting(false);
      resetForm();
      this.closeModal();
      Message.success(translate.formatMessage({ id: updateUserRequest.response }));
      dispatchGetUsers({
        ...usersHeaders,
      });
    }
    if (updateUserRequest.draw < previousProps.updateUserRequest.draw) {
      setSubmitting(false);
      Message.error(translate.formatMessage({ id: updateUserRequest.response }));
    }
  }

  closeModal = () => {
    console.log("This is called successfully!")
    this.setState({
      isModalOpened: false,
    });
  };

  handleOpenModal = () => {
    this.setState({
      isModalOpened: true,
    });
  };

  handleOk = () => {
    const { submitForm } = this.props;
    submitForm();
  };

  handleCancel = () => {
    this.closeModal();
  };

  render () {
    const {
      handleBlur,
      handleChange,
      handleSubmit,
      isUpdatingUser,
      isSubmitting,
      isValid,
      values,
    } = this.props;
    const {
      isModalOpened,
    } = this.state;
    console.log('isModalOpened', isModalOpened)
    const isSubmittingForm = isSubmitting || isUpdatingUser;
    return (
      <Button
        htmlType="button"
        onClick={this.handleOpenModal}
      >
        <FormattedMessage id="a" />
        <Modal
          okButtonProps={
            {
              disabled: !isValid,
              loading: isSubmittingForm,
            }
          }
          okText={<FormattedMessage id="form.update.submit.label.user" />}
          onCancel={this.handleCancel}
          onOk={this.handleOk}
          title={<FormattedMessage id="form.update.title.user" />}
          visible={isModalOpened}
        >
          <Form onSubmit={handleSubmit}>
            <Form.Item
              label={<FormattedMessage id="form.update.field.label.user.username" />}
            >
              <Input
                autoComplete="off"
                name="username"
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.username}
              />
            </Form.Item>
          </Form>
        </Modal>
      </Button>
    );
  }
}

const mapStateToProps = (state, props) => ({
  isUpdatingUser: isUpdatingUserByIdSelector(state)(props.objectId),
  updateUserRequest: updateUserByIdRequestSelector(state)(props.objectId),
  usersHeaders: usersSelector(state).headers,
});

const mapDispatchToProps = {
  dispatchGetUsers: userActionCreators.getUsers,
  dispatchUpdateUserById: userActionCreators.updateUserById,
};

export default connect(mapStateToProps, mapDispatchToProps)(
  InjectTranslation(
    withFormik(
      {
        handleSubmit: (values, { props }) => {
          const { dispatchUpdateUserById } = props;
          const {
            username,
            objectId,
          } = values;
          dispatchUpdateUserById({
            objectId,
            username,
          });
        },
        mapPropsToValues: props => ({
          objectId: props.objectId,
          username: props.username,
        }),
        validationSchema: yup.object().shape({
          objectId: yup.string().required(),
          username: yup.string().required(),
        }),
      },
    )(UpdateUserForm),
  ),
);