import React, { useState, useEffect } from "react";

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

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

const bodyDivStyle = {
  margin: "auto",
  textAlign: "center",
  width: "768px",
};

const boxStyle = {
  flex: "1",
  marginLeft: "10px",
  marginRight: "10px",
  paddingLeft: "30px",
  paddingRight: "30px",
  paddingBottom: "30px",
  paddingTop: "30px",
  backgroundColor: "#e8eaf6",
  display: "flex",
  flexDirection: "column",
};

//const tmpdata = {
//	"username": "frikky",
//	"firstname": "fred",
//	"lastname": "ode",
//	"title": "topkek",
//	"companyname": "company here",
//	"email": "your email pls",
//	"phone": "PHONE!!",
//}

// FIXME - add fetch for data fields
// FIXME - remove tmpdata
// FIXME: Use isLoggedIn :)
const Settings = (props) => {
  const { globalUrl, isLoaded } = props;

  const [newPassword, setNewPassword] = useState("");
  const [newPassword2, setNewPassword2] = useState("");
  const [passwordFormMessage, setPasswordFormMessage] = useState("");

  const onPasswordChange = () => {
    const data = {
      newpassword: newPassword,
      newpassword2: newPassword2,
      reference: props.match.params.key,
    };
    const url = globalUrl + "/api/v1/passwordreset";
    fetch(url, {
      mode: "cors",
      method: "POST",
      body: JSON.stringify(data),
      credentials: "include",
      crossDomain: true,
      withCredentials: true,
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
    })
      .then((response) =>
        response.json().then((responseJson) => {
          if (responseJson["success"] === false) {
            setPasswordFormMessage(responseJson["reason"]);
          }
        })
      )
      .catch((error) => {
        setPasswordFormMessage("Something went wrong.");
      });
  };

  // This should "always" have data
  useEffect(() => {});

  // Random names for type & autoComplete. Didn't research :^)
  const landingpageData = (
    <div style={{ display: "flex", marginTop: "80px" }}>
      <Paper style={boxStyle}>
        <h2>Password Reset</h2>
        <div style={{ flex: "1", display: "flex", flexDirection: "column" }}>
          <TextField
            required
            style={{ flex: "1" }}
            fullWidth={true}
            placeholder="New password"
            type="password"
            id="standard-required"
            autoComplete="password"
            margin="normal"
            variant="outlined"
            onChange={(e) => setNewPassword(e.target.value)}
          />
          <TextField
            required
            style={{ flex: "1" }}
            fullWidth={true}
            type="password"
            placeholder="Repeat new password"
            id="standard-required"
            margin="normal"
            variant="outlined"
            onChange={(e) => setNewPassword2(e.target.value)}
          />
        </div>
        <Button
          disabled={
            newPassword.length < 10 ||
            newPassword2.length < 10 ||
            newPassword !== newPassword2
          }
          style={{ width: "100%", height: "60px", marginTop: "10px" }}
          variant="contained"
          color="primary"
          onClick={() => onPasswordChange()}
        >
          Submit password change
        </Button>
        <h3>{passwordFormMessage}</h3>
      </Paper>
    </div>
  );

  const loadedCheck = isLoaded ? (
    <div style={bodyDivStyle}>{landingpageData}</div>
  ) : (
    <div></div>
  );

  return <div>{loadedCheck}</div>;
};
export default Settings;