import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useState, useEffect } from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import isThemePalette from "../../utils/isThemePalette";
import { Portal } from "../Portal";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Backdrop = props => {
  const theme = useTheme();
  const {
    children,
    duration = 200,
    transition = "ease-in-out",
    visible = true,
    color = "basic",
    noPortal = false,
    type = "absolute",
    portalProps = {},
    className,
    ...otherProps
  } = props;
  const [animationTrigger, setAnimationTrigger] = useState(visible);
  const [isOpen, setIsOpen] = useState(visible);
  useEffect(() => {
    if (visible) {
      setIsOpen(visible);
      setTimeout(() => {
        setAnimationTrigger(true);
      }, 10);
    } else {
      setAnimationTrigger(false);
      setTimeout(() => {
        setIsOpen(visible);
      }, duration);
    }
  }, [visible]);

  function handleBackgroundColor() {
    switch (color) {
      case "text":
        return theme.palette.text;

      case "subtext":
        return theme.palette.subtext;

      case "highlight":
        return theme.palette.highlight;

      case "background":
        return theme.palette.background;

      case "shade":
        return theme.palette.shade;

      default:
        return isThemePalette(color) ? theme.palette[color].shadow : color;
    }
  }

  const Component = /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-Backdrop",
    ...otherProps,
    className: _JSXStyle.dynamic([["2710836584", [type, duration, transition, handleBackgroundColor()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Backdrop", animationTrigger ? "visible" : "hidden", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "2710836584",
      dynamic: [type, duration, transition, handleBackgroundColor()],
      children: `.Wps-Backdrop.__jsx-style-dynamic-selector{position:${type};top:0;left:0;width:100%;height:100%;visibility:hidden;-webkit-transition:all ${duration}ms ${transition};transition:all ${duration}ms ${transition};background-color:${handleBackgroundColor()};}.Wps-Backdrop.hidden.__jsx-style-dynamic-selector{visibility:hidden;opacity:0;}.Wps-Backdrop.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}`
    }), children]
  });

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