import React from "react";
import { Link } from "react-router-dom";
import { Button, Cell, Grid } from "../index";
import style from "./style";

const DialogTitle = props => (
  <h5 {...props} style={style.dialogTitle}>
    {props.children}
  </h5>
);
const DialogBody = props => <div {...props} style={style.dialogBody} />;
const DialogFooter = props => <div {...props} style={style.dialogFooter} />;

/**
 * Dialogs are popup windows that are focused on a specific task.
 * They inform users about critical information or require them to make decisions.
 * @param {object} props The props
 * @returns {function} The component
 */
const Dialog = props => {
  const fullscreen = props.fullscreen
    ? { ...style.viewPort, ...style.fullscreen }
    : null;
  return (
    <div role="group">
      {props.overlay ? (
        <div
          style={{ ...style.viewPort, ...style.overlay, ...props.overlayStyle }}
        />
      ) : null}
      <Grid justify="center" style={style.viewPort}>
        <Cell
          align="center"
          style={{ ...style.dialog, ...props.style, ...fullscreen }}
        >
          <Link to={props.closeHref}>
            <Button style={style.closeBtn} icon onClick={props.onClose}>
              close
            </Button>
          </Link>
          <div style={style.dialogContent}>{props.children}</div>
        </Cell>
      </Grid>
    </div>
  );
};

Dialog.defaultProps = {
  centered: true,
  overlay: true,
  closeHref: "#",
  closeAction: () => null
};

export default Dialog;
export { DialogTitle, DialogBody, DialogFooter };