function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-ui/styles';
import { styles } from './Dialog.styled';
import Portal from '../Portal';
import Transition from '../Transition';
import Title from './components/Title';
import Content from './components/Content';
import Actions from './components/Actions';
import { DialogPropTypes } from './Dialog.type';
export const name = 'Dialog';
const useStyles = createUseStyles(styles, {
  name
});
export const DialogContext = React.createContext({
  onChange: () => {}
});
const Dialog = React.forwardRef((props, ref) => {
  const {
    as: Component = 'div',
    className: classNameProp,
    children,
    visible,
    onChange,
    ...rest
  } = props;

  function handleClose() {
    onChange && onChange(false);
  }

  const container = {
    title: undefined,
    content: [],
    actions: undefined
  };
  React.Children.forEach(children, child => {
    if (child.type.displayName === `F${name}Title`) {
      container.title = child;
    } else if (child.type.displayName === `F${name}Actions`) {
      container.actions = child;
    } else {
      container.content.push(child);
    }
  });
  const contextValue = {
    onChange: onChange
  };
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  return React.createElement(React.Fragment, null, React.createElement(Portal, null, React.createElement(Transition, {
    visible: visible,
    wrapper: false,
    mountOnEnter: true,
    unmountOnExit: true
  }, React.createElement("div", {
    className: classes.mask,
    onClick: handleClose
  }))), React.createElement(Portal, null, React.createElement(Transition, {
    visible: visible,
    wrapper: false,
    mountOnEnter: true,
    unmountOnExit: true
  }, React.createElement(Component, _extends({
    className: className,
    ref: ref,
    boxShadow: "5",
    width: {
      xs: '288px',
      sm: 'auto'
    },
    maxWidth: {
      xs: '340px',
      sm: '450px'
    },
    minWidth: {
      xs: '288px',
      sm: '340px'
    }
  }, rest), React.createElement(DialogContext.Provider, {
    value: contextValue
  }, !!container.title && container.title, React.createElement("div", {
    className: classes.content
  }, container.content), !!container.actions && container.actions)))));
});
Object.defineProperty(Dialog, 'Title', {
  get() {
    return Title;
  }

});
Object.defineProperty(Dialog, 'Content', {
  get() {
    return Content;
  }

});
Object.defineProperty(Dialog, 'Actions', {
  get() {
    return Actions;
  }

});
Dialog.displayName = `F${name}`;
Dialog.propTypes = DialogPropTypes;
export default Dialog;