import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import Dialog from "@material-ui/core/Dialog";
import Divider from "@material-ui/core/Divider";
import ButtonSecondary from "../Input/ButtonSecondary";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";
import CloseIcon from "@material-ui/icons/Close";
import { useDispatch } from "react-redux";
import Link from "@material-ui/core/Link";
import validator from "validator";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import { remindPassword, notification } from "../../actions";
import { useHistory } from "react-router-dom";

export default function ForgotPassword(props) {
  useEffect(() => {
    document.title = "Menui - Odzyskiwanie hasła";
  });
  const initialData = {
    email: "",
    emailError: false,
  };
  const [data, setData] = useState(initialData);
  const dispatch = useDispatch();
  const history = useHistory();

  const loginStyles = makeStyles((theme) => ({
    root: {
      textAlign: "center",
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
        borderRadius: "24px"
      },
    },
    closeButton: {
      color: "#bbbbbb",
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
    },
    textInput: {
      marginTop: "20px",
      marginBottom: "10px",
      width: "90%",
      "& .MuiInputBase-root": {
        color: "#01c3a9",
        borderRadius: "14px"
      },
      "& .MuiInputLabel-root": {
        color: "#bbbbbb",
      },
    },
    link: {
      fontSize: "0.9rem",
    },
  }));

  const loginClass = loginStyles();

  const validateLogin = () => {
    var valid;
    var validation = {
      email: validator.isEmail(data.email),
    };
    setData({
      ...data,
      emailError: !validation.email,
    });
    valid = validation.email;
    return valid;
  };

  const handleRemind = () => {
    if (validateLogin()) {
      dispatch(remindPassword(data.email));
    } else {
      dispatch(notification("Podaj poprawne dane.", "error"));
    }
  };

  // CODE

  return (
    <div>
      <Dialog
        className={loginClass.root}
        onClose={() => history.push("/")}
        open={true}
        aria-labelledby="login-title"
      >
        <DialogTitle id="login-title">Odzyskiwanie hasła</DialogTitle>
        <IconButton
          className={loginClass.closeButton}
          onClick={() => history.push("/")}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Divider />
        <DialogContent>
          <p>
            Podaj adres email do swojego konta. Link do zmiany hasła powinien
            dotrzeć do Ciebie w ciągu maksymalnie 15 minut (sprawdź również
            folder SPAM). Jeśli nie pamiętasz również adresu email, skontaktuj
            się z obsługą klienta.
          </p>
          <TextField
            className={loginClass.textInput}
            required
            id="email"
            label="Email"
            type="email"
            variant="outlined"
            error={data.emailError}
            onChange={(event) => (data.email = event.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle color="primary" />
                </InputAdornment>
              ),
            }}
          />
          <div className="login-dialog-buttons">
            <ButtonSecondary
              onClick={() => handleRemind()}
              text="Wyślij email"
            />
          </div>
          <p>
            Nie masz konta?{" "}
            <span>
              <Link href="#" onClick={() => history.push("/register")}>
                Zarejestruj się.
              </Link>
            </span>
          </p>
        </DialogContent>
      </Dialog>
    </div>
  );
}