import React, { PropTypes } from 'react';
import Dialog from 'material-ui/Dialog';
import DialogTitle from './internals/DialogTitle.jsx';

const fullScreenStyle = {
  width: '100%',
  height: '100%',
  border: 'none',
  position: 'fixed',
  margin: '-24px',
};

const fullScreenDialogStyle = {
  width: '100%',
  height: '100%',
  maxHeight: 'none',
  maxWidth: 'none',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  position: 'fixed',
  marginTop: '-65px',
};

const FullScreenPreview = (props) => {
  const {
    onClose,
    open,
    url,
    name,
  } = props;

  const title = <DialogTitle onClose={onClose} title={name} />;

  return (
    <Dialog
      className="cluedin_dialog_fullScreen"
      bodyStyle={{ height: '100%' }}
      contentStyle={fullScreenDialogStyle}
      title={title}
      modal={false}
      open={open}
    >
      <iframe src={url} style={fullScreenStyle} />
    </Dialog>
  );
};

FullScreenPreview.propTypes = {
  onClose: PropTypes.func,
  open: PropTypes.bool,
  url: PropTypes.string,
  name: PropTypes.string,
};

export default FullScreenPreview;