// Dependencies
import React, { Component } from "react";
import Utils from "../utils/utils";
import crypto from "js-sha3";
import UserActions from "../redux/actions/UserActions";

// Redux
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

// Material UI
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";

class DialogChangePwd extends Component {
  // Init DialogChangePwd
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    };
  }

  // Confirm change password
  confirm() {
    if (!this.state.user.newPassword) {
      this.setState({ showError: "Insert a new password" });
    } else if (!this.state.user.oldPassword) {
      this.setState({
        showError: "Insert the old password"
      });
    } else if (
      this.state.user.newPassword !== this.state.user.confirmNewPassword
    ) {
      this.setState({
        showError: "Your new password and confirm password don't match"
      });
    } else {
      this.props.actionsUser
        .changePassword(
          crypto.sha3_512(this.state.user.newPassword),
          crypto.sha3_512(this.state.user.oldPassword)
        )
        .then(() => {
          this.setState({ user: {} });
          this.props.onConfirm();
        })
        .catch(err => {
          this.setState({ showError: "Old Password not valid" });
        });
    }
  }

  // Close Message
  closeMessage() {
    this.setState({ showError: false });
  }

  // Show content
  render() {
    return (
      <Dialog
        open={this.props.open}
        onClose={this.props.onClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Change password</DialogTitle>
        <DialogContent>
          <TextField
            id="oldPassword"
            label="Old Password"
            value={this.state.user.oldPassword || ""}
            onChange={Utils.handleChange.bind(this, "user")}
            margin="normal"
            fullWidth
            type="password"
          />

          <TextField
            id="newPassword"
            label="New Password"
            value={this.state.user.newPassword || ""}
            onChange={Utils.handleChange.bind(this, "user")}
            margin="normal"
            fullWidth
            type="password"
          />

          <TextField
            id="confirmNewPassword"
            label="Confirm New Password"
            value={this.state.user.confirmNewPassword || ""}
            onChange={Utils.handleChange.bind(this, "user")}
            margin="normal"
            fullWidth
            type="password"
          />

          {/* Confirm Message */}
          {this.state.showError && (
            <SnackbarContent
              style={{
                marginTop: "30px",
                maxWidth: "100%"
              }}
              aria-describedby="client-snackbar"
              message={<span id="client-snackbar">{this.state.showError}</span>}
              action={[
                <IconButton
                  key="close"
                  aria-label="Close"
                  color="inherit"
                  onClick={this.closeMessage.bind(this)}
                >
                  <CloseIcon />
                </IconButton>
              ]}
            />
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={this.props.onClose}>Cancel</Button>
          <Button onClick={this.confirm.bind(this)} color="primary" autoFocus>
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

// Store actions
const mapDispatchToProps = function(dispatch) {
  return {
    actionsUser: bindActionCreators(UserActions, dispatch)
  };
};

// Validate types
DialogChangePwd.propTypes = {
  actionsUser: PropTypes.object.isRequired
};

// Get props from state
function mapStateToProps(state, ownProps) {
  return {
    user: state.LoginReducer.user
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DialogChangePwd);