/* eslint-disable react/no-multi-comp */
import React, { useState } from "react";

import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";

const bodyDivStyle = {
  margin: "auto",
  marginTop: "100px",
  width: "500px",
};

const ForgotPassword = (props) => {
  const { globalUrl, isLoaded, isLoggedIn, surfaceColor, inputColor } = props;

  const boxStyle = {
    paddingLeft: "30px",
    paddingRight: "30px",
    paddingBottom: "30px",
    paddingTop: "30px",
    backgroundColor: surfaceColor,
  };

  const [username, setUsername] = useState("");
  const [resetInfo, setResetInfo] = useState(
    "You will receive an email with instructions shortly."
  );

  const handleValidateForm = () => {
    return username.length > 3;
  };

  if (isLoggedIn === true) {
    window.location.pathname = "/";
  }

  const onSubmit = (e) => {
    e.preventDefault();
    // FIXME - add some check here ROFL

    // Just use this one?
    var data = { username: username };
    var baseurl = globalUrl;
    var url = baseurl + "/api/v1/passwordresetmail";
    fetch(url, {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
    })
      .then((response) =>
        response.json().then((responseJson) => {
          if (responseJson["success"] === false) {
            setResetInfo(responseJson["reason"]);
          }
        })
      )
      .catch((error) => {
        setResetInfo("Error in userdata: " + error);
      });
  };

  const onChangeUser = (e) => {
    setUsername(e.target.value);
  };

  const data = (
    <div style={bodyDivStyle}>
      <Paper style={boxStyle}>
        <form onSubmit={onSubmit} style={{ margin: "15px 15px 15px 15px" }}>
          <h2>Password reset</h2>
          <div>
            <TextField
              required
              fullWidth={true}
              color="primary"
              style={{ backgroundColor: inputColor }}
              InputProps={{
                style: {
                  height: "50px",
                  color: "white",
                  fontSize: "1em",
                },
              }}
              type="username"
              placeholder="Username / Email"
              id="standard-required"
              autoComplete="username"
              margin="normal"
              variant="outlined"
              onChange={onChangeUser}
            />
          </div>
          <div style={{ display: "flex", marginTop: "15px" }}>
            <Button
              color="primary"
              variant="contained"
              type="submit"
              style={{ flex: "1", marginRight: "5px" }}
              disabled={!handleValidateForm()}
            >
              SUBMIT
            </Button>
          </div>
          <div style={{ marginTop: "20px" }}>{resetInfo}</div>
        </form>
      </Paper>
    </div>
  );

  const loadedCheck = isLoaded ? <div>{data}</div> : <div></div>;

  return <div>{loadedCheck}</div>;
};

export default ForgotPassword;