// Generated with util/create-component.js
import React, { useState, useEffect } from "react";
import useTheme from "../../hooks/useTheme";
// component dependencies
import { Portal } from "../Portal";
import { Flex } from "../Flex";
import { Animated } from "../Animated";
import { Backdrop } from "../Backdrop";
import useScrollBlock from "../../hooks/useScrollBlock";
import useKeyPress from "../../hooks/useKeyPress";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Modal = props => {
  const theme = useTheme();
  const {
    id = "modal",
    open = false,
    duration = 200,
    position = "fixed",
    animation = "fadeInScale",
    transition = "ease-in-out",
    onCloseEnd = () => {},
    onCloseStart = () => {},
    onOpenEnd = () => {},
    onOpenStart = () => {},
    backdropColor = "basic",
    onBackdropClick = () => {},
    onEscapeKeyDown = () => {},
    disableScrollLock = false,
    closeKey = "Escape",
    backdropProps = {},
    portalProps = {
      style: {}
    },
    containerProps = null,
    noPortal = false,
    children,
    ...otherProps
  } = props;
  const [, setLocked] = useScrollBlock();
  const escapePress = useKeyPress(closeKey);
  const [animationTrigger, setAnimationTrigger] = useState(open);
  const [isOpen, setIsOpen] = useState(open);
  useEffect(() => {
    if (open) {
      setIsOpen(open);
      onOpenStart();
      !disableScrollLock && setLocked(true);
      setTimeout(() => {
        setAnimationTrigger(true);
        onOpenEnd();
      }, 10);
    } else {
      setAnimationTrigger(false);
      onCloseStart();
      setTimeout(() => {
        setIsOpen(open);
        onCloseEnd();
        !disableScrollLock && setLocked(false);
      }, duration);
    }
  }, [open]);
  useEffect(() => {
    if (escapePress) {
      onEscapeKeyDown();
    }
  }, [escapePress]);

  const Component = /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Backdrop, {
      visible: animationTrigger,
      duration: (backdropProps == null ? void 0 : backdropProps.duration) || duration,
      color: (backdropProps == null ? void 0 : backdropProps.color) || backdropColor,
      onClick: (backdropProps == null ? void 0 : backdropProps.onClick) || onBackdropClick,
      transition: (backdropProps == null ? void 0 : backdropProps.transition) || transition,
      noPortal: (backdropProps == null ? void 0 : backdropProps.noPortal) || true,
      type: (backdropProps == null ? void 0 : backdropProps.type) || "fixed",
      ...backdropProps
    }), /*#__PURE__*/_jsx(Flex, { ...containerProps,
      align: "center",
      justify: "center",
      fullHeight: true,
      fullWidth: true,
      style: {
        position: position,
        top: 0,
        left: 0,
        pointerEvents: "none",
        ...(containerProps == null ? void 0 : containerProps.style)
      },
      children: /*#__PURE__*/_jsx(Animated, {
        visible: animationTrigger,
        animation: animation,
        duration: duration,
        transition: transition,
        style: {
          pointerEvents: "all",
          ...otherProps.style
        },
        ...otherProps,
        children: children
      })
    })]
  });

  if (noPortal) {
    return Component;
  } else {
    return /*#__PURE__*/_jsx(Portal, {
      id: id,
      visible: isOpen,
      style: {
        zIndex: theme.layout.modalIndex,
        ...portalProps.style
      },
      ...portalProps,
      children: Component
    });
  }
};