import React, { useState } 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 LockIcon from "@material-ui/icons/Lock";
import InputAdornment from "@material-ui/core/InputAdornment";

export default function PasswordConfirmation(props) {
  const [password, setPassword] = useState("");

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

  const loginClass = loginStyles();

  return (
    <Dialog
      className={loginClass.root}
      onClose={props.onCancel}
      open={props.open}
      aria-labelledby="login-title"
    >
      <DialogTitle id="login-title">Potwierdź hasłem</DialogTitle>
      <IconButton
        className={loginClass.closeButton}
        onClick={props.onCancel}
        aria-label="close"
      >
        <CloseIcon />
      </IconButton>
      <Divider />
      <DialogContent>
        <TextField
          className={loginClass.textInput}
          id="password"
          label="Hasło"
          type="password"
          value={password}
          variant="outlined"
          onChange={(event) => setPassword(event.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <LockIcon color="primary" />
              </InputAdornment>
            ),
          }}
        />
        <div className="login-dialog-buttons">
          <ButtonSecondary
            onClick={() => props.onSubmit(password)}
            text="Potwierdź"
          />
        </div>
      </DialogContent>
    </Dialog>
  );
}