import {
  Alert,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Col,
  Form,
  FormFeedback,
  FormGroup,
  Input,
  Label,
  Row,
} from 'reactstrap';

import FormFooter from 'components/FormFooter';
import {FormattedMessage} from 'react-intl';
import LocaleCombo from 'components/LocaleSelector/LocaleCombo';
import {PasswordItem} from 'components/Password/PasswordItem';
import PlatformsWidget from 'components/Platforms/PlatformsWidget';
import PoliciesSelect from 'containers/PoliciesSelect';
import PropTypes from 'prop-types';
import ProtectedNavigation from 'components/ProtectedNavigation';
import React from 'react';
import ShowMore from 'components/ShowMore';
import {injectIntl} from 'react-intl';
import styled from 'styled-components';
import {toast} from 'react-toastify';
import {withFormik} from 'formik';
import {withRouter} from 'react-router-dom';
import injectRoles, {RoleEnum} from 'utils/injectRoles';
import {compose} from 'redux';

const Checkbox = styled(Label)`
  opacity: ${(props) => (props.disabled ? 0.3 : 1)};
`;

const cleanSubmitDatas = (values, user) => {
  let submitedValues = Object.assign({}, values);
  if (submitedValues.password === '') {
    delete submitedValues.password;
  }
  delete submitedValues.email;
  delete submitedValues.id;

  submitedValues.status = submitedValues.status
    ? 'ENABLED'
    : user.status === 'PENDING' ? 'PENDING' : 'DISABLED';

  if (submitedValues.policyId === user.policy.id) {
    delete submitedValues.policyId;
  }

  if (submitedValues.platformId === user.platform.id) {
    delete submitedValues.platformId;
  }
  return submitedValues;
};

export class UserInnerEditForm extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      //eslint-disable-next-line
      this.setState({policyEdit: false});
    }
  }
  render() {
    const {
      user,
      values,
      errors,
      handleChange,
      handleBlur,
      handleSubmit,
      handleReset,
      domainId,
      userId,
      isSubmitting,
      deleteUserPromise,
      setFieldError,
      setFieldValue,
      passwordRules,
      dirty,
      initialValues,
      intl: {formatMessage},
      roles: {isSysadmin, hasRole},
      loggedUserEmail,
    } = this.props;
    const sameEmail = loggedUserEmail === values.email;
    const readOnly = !hasRole(RoleEnum.DOMAIN, 'WRITE');
    return (
      <ProtectedNavigation dirty={dirty}>
        <Row>
          <Col>
            <Form onSubmit={handleSubmit} onReset={handleReset}>
              <Card>
                <CardHeader>
                  <Row>
                    <Col xs={10} sm={8}>
                      <h4>{values.email}</h4>
                      <h6>
                        <FormattedMessage
                          id="userForm.userId"
                          values={{userId: values.id}}
                        />
                      </h6>
                    </Col>
                    <Col xs={2} sm={4}>
                      <span className="float-right">
                        <span className="d-block d-sm-inline">
                          <Checkbox
                            title={
                              sameEmail
                                ? formatMessage({
                                    // eslint-disable-next-line prettier/prettier
                                  id: 'user.form.disabledTitle',
                                    // eslint-disable-next-line prettier/prettier
                                })
                                : undefined
                            }
                            disabled={readOnly || sameEmail}
                            className={' switch switch-3d switch-primary'}
                          >
                            <Input
                              id="status"
                              type="checkbox"
                              disabled={readOnly || sameEmail}
                              className="switch-input"
                              value={values.status}
                              checked={values.status}
                              onChange={handleChange}
                              onBlur={handleBlur}
                            />
                            <span className="switch-label" />
                            <span className="switch-handle" />
                          </Checkbox>
                        </span>
                        <span className="d-block d-sm-inline">
                          <Label htmlFor="status" className="ml-sm-2">
                            {this.props.user.status === 'PENDING' &&
                            !values.status ? (
                              <FormattedMessage id="userForm.status.pending" />
                            ) : values.status ? (
                              <FormattedMessage id="userForm.active" />
                            ) : (
                              <FormattedMessage id="userFrom.inactive" />
                            )}
                          </Label>
                        </span>
                      </span>
                    </Col>
                  </Row>
                </CardHeader>
                <CardBody>
                  <Row>
                    <Col xs={12}>
                      {values.status === true ? null : this.props.user
                        .status === 'PENDING' ? (
                        // eslint-disable-next-line
                        <Alert color="warning">
                          <FormattedMessage id="userForm.status.pendingDesc" />
                        </Alert>
                      ) : (
                        <Alert color="warning">
                          <FormattedMessage id="userForm.status.disabledDesc" />
                        </Alert>
                      )}
                    </Col>
                  </Row>
                  <FormGroup row>
                    <Col xs={12} sm={3}>
                      <Label htmlFor="firstname">
                        <FormattedMessage id="userForm.firstname" />
                      </Label>
                    </Col>
                    <Col xs={12} sm={9}>
                      <Input
                        type="text"
                        id="firstname"
                        name="firstname"
                        value={values.firstname || ''}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        valid={
                          errors.firstname === undefined
                            ? undefined
                            : errors.firstname ? false : true
                        }
                        disabled={readOnly}
                      />
                      <FormFeedback>{errors.firstname}</FormFeedback>
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col xs={12} sm={3}>
                      <Label htmlFor="lastname">
                        <FormattedMessage id="userForm.lastname" />
                      </Label>
                    </Col>
                    <Col xs={12} sm={9}>
                      <Input
                        type="text"
                        id="lastname"
                        name="lastname"
                        value={values.lastname || ''}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        valid={
                          errors.lastname === undefined
                            ? undefined
                            : errors.lastname ? false : true
                        }
                        disabled={readOnly}
                        required
                      />
                      <FormFeedback>{errors.lastname}</FormFeedback>
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col xs={12} sm={3}>
                      <Label for="language">
                        <FormattedMessage id="profile.language" />
                      </Label>
                    </Col>
                    <Col xs={12} sm={9}>
                      <LocaleCombo
                        id="language"
                        valueName="language"
                        value={values.language || ''}
                        setFieldValue={setFieldValue}
                        error={errors.language}
                        disabled={readOnly}
                      />
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col xs={12} sm={3}>
                      <Label for="platformId">
                        <FormattedMessage id="userForm.platform" />
                      </Label>
                    </Col>
                    <Col xs={12} sm={9}>
                      <PlatformsWidget
                        id="platformId"
                        valueName={'platformId'}
                        platformId={values.platformId}
                        platform={user.platform}
                        setFieldValue={setFieldValue}
                        error={errors.platform}
                        initialPlatform={initialValues.platformId}
                        isSubmitting={isSubmitting}
                        isEditable={!readOnly}
                      />
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col xs={12} sm={3}>
                      <Label htmlFor={'policy'}>
                        <FormattedMessage id="policy.form.name" />
                      </Label>
                    </Col>
                    <Col xs={12} sm={9}>
                      <PoliciesSelect
                        valueName={'policyId'}
                        domainId={domainId}
                        policyId={values.policyId}
                        setFieldValue={setFieldValue}
                        isSubmitting={isSubmitting}
                        isEditable={!readOnly}
                      />
                    </Col>
                  </FormGroup>

                  <FormGroup row>
                    <Col xs={7} sm={3}>
                      {/* prettier-ignore */}
                      <FormattedMessage id='userForm.senderVerify'/>
                    </Col>
                    <Col xs={5} sm={9}>
                      <Label className={'switch switch-3d switch-primary'}>
                        <Input
                          id="senderVerifyOn"
                          type="checkbox"
                          className="switch-input "
                          value={values.status}
                          checked={values.senderVerifyOn}
                          onChange={handleChange}
                          onBlur={handleBlur}
                          disabled={readOnly}
                        />
                        <span className="switch-label" />
                        <span className="switch-handle" />
                      </Label>
                    </Col>
                  </FormGroup>
                  {!readOnly && (
                    <FormGroup row>
                      <ShowMore
                        label={
                          <FormattedMessage id="userForm.collapsePassword" />
                        }
                      >
                        <PasswordItem
                          id="userPwd"
                          name="password"
                          values={values}
                          errors={errors}
                          onChange={handleChange}
                          setFieldError={setFieldError}
                          rules={passwordRules}
                          firstColSize={3}
                          secondColSize={9}
                        />
                      </ShowMore>
                    </FormGroup>
                  )}
                </CardBody>
                <CardFooter>
                  <FormFooter
                    id="userFormFooter"
                    isSubmitting={this.props.isSubmitting}
                    errors={errors}
                    dirty={dirty}
                    // eslint-disable-next-line react/jsx-handler-names
                    handleReset={this.props.handleReset}
                    entityId={userId}
                    deleteEntityPromise={deleteUserPromise}
                    askDeleteLabel={
                      <FormattedMessage
                        id="userForm.delete.ask"
                        values={{userName: this.props.values.email}}
                      />
                    }
                    canDelete={isSysadmin}
                    canSubmit={!readOnly}
                    disabledDelete={sameEmail}
                    disabledDeleteMessage={formatMessage({
                      id: 'domain.form.disabledDelete',
                    })}
                  />
                </CardFooter>
              </Card>
            </Form>
          </Col>
        </Row>
      </ProtectedNavigation>
    );
  }
}

UserInnerEditForm.propTypes = {
  dirty: PropTypes.bool,
  location: PropTypes.shape({
    pathname: PropTypes.string,
  }),
  values: PropTypes.shape({
    email: PropTypes.string,
    firstname: PropTypes.string,
    lastname: PropTypes.string,
  }),
  errors: PropTypes.object,
  domainId: PropTypes.string,
  touched: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  handleChange: PropTypes.func,
  handleBlur: PropTypes.func,
  handleSubmit: PropTypes.func,
  handleReset: PropTypes.func,
  isSubmitting: PropTypes.bool,
  initialValues: PropTypes.object,
  deleteUserPromise: PropTypes.func.isRequired,
  fetchUserPromise: PropTypes.func.isRequired,
  patchUserPromise: PropTypes.func.isRequired,
  userId: PropTypes.string,
  setFieldValue: PropTypes.func,
  setFieldError: PropTypes.func,
  passwordRules: PropTypes.shape({
    count: PropTypes.number,
    digit: PropTypes.number,
    uppercase: PropTypes.number,
    lowercase: PropTypes.number,
  }),
  user: PropTypes.shape({
    id: PropTypes.string,
    status: PropTypes.string,
  }),
  intl: PropTypes.shape({
    formatMessage: PropTypes.func,
  }),
  loggedUserEmail: PropTypes.string,
  roles: PropTypes.shape({
    isSysadmin: PropTypes.bool,
    hasRole: PropTypes.func,
  }),
};

const UserEditForm = withFormik({
  mapPropsToValues: (props) => {
    const statusValue = props.user.status === 'ENABLED' ? true : false;
    return {
      id: props.user.id,
      email: props.user.email,
      firstname: props.user.firstname,
      lastname: props.user.lastname,
      language: props.user.language,
      senderVerifyOn: props.user.senderVerifyOn,
      password: '',
      status: statusValue,
      policyId: props.user.policy.id,
      platformId: props.user.platform.id,
    };
  },
  validate: (values, props) => {
    const errors = {};
    let errorMessage = <FormattedMessage id="form.required" />;
    if (!values.firstname || !values.firstname.trim()) {
      errors.firstname = errorMessage;
    }
    if (!values.lastname || !values.lastname.trim()) {
      errors.lastname = errorMessage;
    }
    return errors;
  },

  handleSubmit: (values, bag) => {
    const {props, setSubmitting} = bag;
    const {userId} = props;
    const patchPromise =
      props.loggedUserEmail === values.email
        ? props.patchAdminPromise
        : props.patchUserPromise;
    const submitedValues = cleanSubmitDatas(values, props.user);
    // const submitedValues = values;
    return patchPromise({userId, values: submitedValues})
      .then((res) => {
        return props.fetchUserPromise({userId, values});
      })
      .then((res) => {
        toast.success(<FormattedMessage id="form.savedSuccesfully" />, {
          autoClose: 5000,
        });
      })
      .catch((error) => {
        const errMsg = (
          <FormattedMessage id="form.savedError" values={{error: error}} />
        );
        toast.error(errMsg, {autoClose: false});
        setSubmitting(false);
      });
  },

  displayName: 'UserEditForm',
  enableReinitialize: true,
})(UserInnerEditForm);

export default compose(withRouter, injectIntl, injectRoles)(UserEditForm);