import React, { useEffect } from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Button from "@material-ui/core/Button";
import Slide from "@material-ui/core/Slide";
import { useStrapi } from "strapi-react-context";
import marked from "marked";
import { useTranslation } from "react-i18next";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

const TosDialog = ({ open, toggle }) => {
  const strapi = useStrapi();
  const { t } = useTranslation();
  const page = strapi.stores?.pages?.find(({ type }) => type === "tos");

  useEffect(() => {
    strapi.services.pages.find({ type: "tos" });
  }, [strapi.services.pages]);

  return (
    <Dialog
      open={open}
      TransitionComponent={Transition}
      onClose={toggle}
      fullWidth
      maxWidth="sm"
    >
      <DialogTitle>{page?.name}</DialogTitle>
      <DialogContent>
        {page && (
          <DialogContentText
            dangerouslySetInnerHTML={{ __html: marked(page.content) }}
          />
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={toggle}>{t("generic.close")}</Button>
      </DialogActions>
    </Dialog>
  );
};

export default TosDialog;