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 IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Paper from "@material-ui/core/Paper";
import Regulamin from "./Regulamin";
import { useSelector, useDispatch } from "react-redux";
import { hideRegulamin } from "../../actions/toggles";

export default function RegulaminDialog(props) {
  const dispatch = useDispatch();
  const open = useSelector((state) => state.data.dialogs.regulamin);

  const loginStyles = makeStyles((theme) => ({
    root: {
      textAlign: "center",
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
        borderRadius: "24px"
      },
      "& .MuiFormHelperText-root": {
        color: "#606060",
        textAlign: "center",
      },
    },
    closeButton: {
      color: "#bbbbbb",
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
    },
    paper: {
      textAlign: "left",
      padding: "18px",
      maxHeight: "50vh",
      overflow: "auto",
    },
  }));

  const styles = loginStyles();

  return (
    <div>
      <Dialog
        className={styles.root}
        open={open}
        onClose={() => dispatch(hideRegulamin())}
        aria-labelledby="regulamin-title"
      >
        <DialogTitle id="regulamin-title">Regulamin</DialogTitle>
        <IconButton
          className={styles.closeButton}
          onClick={() => dispatch(hideRegulamin())}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Divider />
        <DialogContent>
          <Paper className={styles.paper}>{<Regulamin />}</Paper>
        </DialogContent>
      </Dialog>
    </div>
  );
}