import React 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 ButtonPrimary from "../Input/ButtonPrimary";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";

export default function PasswordConfirmation(props) {
  const loginStyles = makeStyles((theme) => ({
    root: {
      textAlign: "center",
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
      },
      minWidth: "250px",
    },
    closeButton: {
      color: "#bbbbbb",
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
    },
  }));

  const loginClass = loginStyles();

  return (
    <Dialog
      className={loginClass.root}
      onClose={props.cancel}
      open={props.open}
      aria-labelledby="login-title"
    >
      <DialogTitle id="login-title">Aktywacja subskrypcji</DialogTitle>
      <IconButton
        className={loginClass.closeButton}
        onClick={props.cancel}
        aria-label="close"
      >
        <CloseIcon />
      </IconButton>
      <Divider />
      <DialogContent>
        <p>
          Płatność została rozpoczęta. Jeżeli chcesz ją zrealizować teraz,
          kliknij przycisk "Zapłać" (zostaniesz przekierowany do portalu
          Przelewy24). Jeżeli nie masz teraz ochoty zapłacić, na swoim adresie
          email znajdziesz ten sam link do płatności oraz fakturę pro-forma.
          (Link do płatności jest ważny 7 dni - po upływie tego czasu transakcja
          jest automatycznie anulowana)
        </p>
        <div className="yesno-dialog-buttons">
          <ButtonPrimary onClick={props.cancel} text="Zamknij" />
          <ButtonSecondary onClick={props.accept} text="Zapłać" />
        </div>
      </DialogContent>
    </Dialog>
  );
}