import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import Box from "@material-ui/core/Box";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import CloseIcon from "@material-ui/icons/Close";
import FullScreenIcon from "@material-ui/icons/Fullscreen";
import FullScreenExitIcon from "@material-ui/icons/FullscreenExit";
import IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button";
import { grey, blue, red } from "@material-ui/core/colors";
import ReactMarkdown from "react-markdown";
import { styled } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
var StyledDialogTitle = styled(DialogTitle)({
  backgroundColor: grey[100],
  borderBottom: "1px solid ".concat(grey[300]),
  paddingBottom: 12,
  boxShadow: "0px 2px 3px rgba(0,0,0,0.05)"
});
var StyledDialogContent = styled(DialogContent)({
  paddingTop: 16
});
var StyledDialogActions = styled(DialogActions)({
  backgroundColor: grey[100],
  borderTop: "1px solid ".concat(grey[300])
});
export default (function (_ref) {
  var _ref$open = _ref.open,
      open = _ref$open === void 0 ? false : _ref$open,
      title = _ref.title,
      children = _ref.children,
      markdownContent = _ref.markdownContent,
      onClose = _ref.onClose,
      redOn = _ref.red,
      _ref$noActionBar = _ref.noActionBar,
      noActionBar = _ref$noActionBar === void 0 ? false : _ref$noActionBar,
      _ref$actions = _ref.actions,
      actions = _ref$actions === void 0 ? [] : _ref$actions;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      fullScreen = _useState2[0],
      changeFullScreen = _useState2[1];

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  return /*#__PURE__*/React.createElement(Dialog, {
    open: open,
    onClose: onClose,
    fullScreen: fullScreen
  }, /*#__PURE__*/React.createElement(StyledDialogTitle, null, /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: redOn ? red[700] : undefined
    }
  }, title), /*#__PURE__*/React.createElement("div", {
    style: {
      flexGrow: 1
    }
  }), /*#__PURE__*/React.createElement(IconButton, {
    onClick: function onClick() {
      return changeFullScreen(!fullScreen);
    }
  }, fullScreen ? /*#__PURE__*/React.createElement(FullScreenExitIcon, null) : /*#__PURE__*/React.createElement(FullScreenIcon, null)), /*#__PURE__*/React.createElement(IconButton, {
    onClick: onClose
  }, /*#__PURE__*/React.createElement(CloseIcon, null)))), /*#__PURE__*/React.createElement(StyledDialogContent, null, /*#__PURE__*/React.createElement(Box, {
    maxWidth: "90vw",
    minWidth: 400,
    lineHeight: 1.5
  }, markdownContent ? /*#__PURE__*/React.createElement(ReactMarkdown, {
    source: markdownContent
  }) : children)), !noActionBar && /*#__PURE__*/React.createElement(StyledDialogActions, null, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return onClose();
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: grey[700],
      fontWeight: 500
    }
  }, t("close"))), actions.map(function (action, i) {
    return /*#__PURE__*/React.createElement(Button, {
      disabled: action.disabled,
      key: i,
      onClick: action.onClick
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        color: redOn ? red[700] : action.disabled ? grey[400] : blue[700],
        fontWeight: 500
      }
    }, action.text));
  })));
});