// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import useTheme from "../../hooks/useTheme";
// component dependencies
import { Portal } from "../Portal";
import { Fixed } from "../Fixed";
import { Animated } from "../Animated";
import { Backdrop } from "../Backdrop";
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 Snackbar = props => {
  const theme = useTheme();
  const {
    id = "modal",
    type = "fixed",
    open = false,
    spacing = 2,
    position = "bottom center",
    duration = 200,
    animation = "fadeInBottom",
    fullWidth,
    fullHeight,
    backdrop = false,
    backdropColor = "basic",
    onBackdropClick = () => {},
    backdropProps = {},
    portalProps = {},
    noPortal = false,
    style = {},
    children,
    ...otherProps
  } = props;
  const [animationTrigger, setAnimationTrigger] = useState(open);
  const [isOpen, setIsOpen] = useState(open);
  useEffect(() => {
    if (open) {
      setIsOpen(open);
      setTimeout(() => {
        setAnimationTrigger(true);
      }, 10);
    } else {
      setAnimationTrigger(false);
      setTimeout(() => {
        setIsOpen(open);
      }, duration);
    }
  }, [open]);

  function handleValue(value) {
    return value ? typeof value === "number" ? `${value * theme.layout.spacingUnit}px` : value : "0px";
  }

  const Component = /*#__PURE__*/_jsxs(_Fragment, {
    children: [backdrop && /*#__PURE__*/_jsx(Backdrop, {
      visible: animationTrigger,
      duration: (backdropProps == null ? void 0 : backdropProps.duration) || duration || 300,
      color: (backdropProps == null ? void 0 : backdropProps.color) || backdropColor || "basic",
      onClick: (backdropProps == null ? void 0 : backdropProps.onClick) || onBackdropClick,
      noPortal: (backdropProps == null ? void 0 : backdropProps.noPortal) || true,
      type: (backdropProps == null ? void 0 : backdropProps.type) || "fixed",
      ...backdropProps
    }), /*#__PURE__*/_jsx(Fixed, {
      type: type,
      position: position,
      spacing: 0,
      style: {
        width: fullWidth ? "100%" : "auto",
        height: fullHeight ? "100%" : "auto",
        margin: handleValue(spacing)
      },
      children: /*#__PURE__*/_jsx(Animated, {
        visible: animationTrigger,
        animation: animation,
        duration: duration,
        style: {
          pointerEvents: "all",
          zIndex: theme.layout.modalIndex,
          width: fullWidth ? "100%" : "auto",
          height: fullHeight ? "100%" : "auto",
          ...style
        },
        ...otherProps,
        children: children
      })
    })]
  });

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