import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import isThemePalette from "../../utils/isThemePalette";
import brightness from "../../utils/brightness";
import { getBreakpoints } from "../Flex/Flex.functions";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Skeleton = props => {
  const theme = useTheme();
  const {
    type = "circle",
    radius = null,
    color = "shade",
    visible = true,
    // Box Props
    m = 0,
    mt = null,
    mr = null,
    mb = null,
    ml = null,
    // -----
    p = theme.layout.padding,
    pt = null,
    pr = null,
    pb = null,
    pl = null,
    // -----
    width = null,
    height = null,
    minWidth = null,
    maxWidth = null,
    minHeight = null,
    maxHeight = null,
    fullWidth = false,
    fullHeight = false,
    children,
    className,
    ...otherProps
  } = props;

  function handleBackgroundColor() {
    switch (color) {
      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][500] : color;
    }
  }

  function handleShape() {
    switch (type) {
      case "round":
        return "border-radius: 1.5em;";

      case "square":
        return "border-radius: 0em;";

      case "circle":
        return "border-radius: 50%;";

      case "rounded":
      default:
        return "border-radius: 0.7em;";
    }
  }

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

  if (!visible) {
    return /*#__PURE__*/_jsx(_Fragment, {
      children: children
    });
  }

  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-Skeleton",
    ...otherProps,
    className: _JSXStyle.dynamic([["1956402246", [visible ? "block" : "none", handleShape(), radius ? getBreakpoints(radius, "xs", handleValue) : width ? getBreakpoints(width, "xs", handleValue) : "auto", radius ? getBreakpoints(radius, "xs", handleValue) : height ? getBreakpoints(height, "xs", handleValue) : "auto", handleBackgroundColor(), brightness(handleBackgroundColor(), 20), theme.breakpoints.sm.min, radius ? getBreakpoints(radius, "sm", handleValue) : width ? getBreakpoints(width, "sm", handleValue) : "auto", radius ? getBreakpoints(radius, "sm", handleValue) : height ? getBreakpoints(height, "sm", handleValue) : "auto", theme.breakpoints.md.min, radius ? getBreakpoints(radius, "md", handleValue) : width ? getBreakpoints(width, "md", handleValue) : "auto", radius ? getBreakpoints(radius, "md", handleValue) : height ? getBreakpoints(height, "md", handleValue) : "auto", theme.breakpoints.lg.min, radius ? getBreakpoints(radius, "lg", handleValue) : width ? getBreakpoints(width, "lg", handleValue) : "auto", radius ? getBreakpoints(radius, "lg", handleValue) : height ? getBreakpoints(height, "lg", handleValue) : "auto", theme.breakpoints.xl.min, radius ? getBreakpoints(radius, "xl", handleValue) : width ? getBreakpoints(width, "xl", handleValue) : "auto", radius ? getBreakpoints(radius, "xl", handleValue) : height ? getBreakpoints(height, "xl", handleValue) : "auto"]], ["1524759144", [getBreakpoints(m, "xs", handleValue), getBreakpoints(mt, "xs", handleValue), getBreakpoints(mr, "xs", handleValue), getBreakpoints(mb, "xs", handleValue), getBreakpoints(ml, "xs", handleValue), getBreakpoints(p, "xs", handleValue), getBreakpoints(pt, "xs", handleValue), getBreakpoints(pr, "xs", handleValue), getBreakpoints(pb, "xs", handleValue), getBreakpoints(pl, "xs", handleValue), getBreakpoints(minWidth, "xs", handleValue), getBreakpoints(maxWidth, "xs", handleValue), getBreakpoints(minHeight, "xs", handleValue), getBreakpoints(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, getBreakpoints(m, "sm", handleValue), getBreakpoints(mt, "sm", handleValue), getBreakpoints(mr, "sm", handleValue), getBreakpoints(mb, "sm", handleValue), getBreakpoints(ml, "sm", handleValue), getBreakpoints(p, "sm", handleValue), getBreakpoints(pt, "sm", handleValue), getBreakpoints(pr, "sm", handleValue), getBreakpoints(pb, "sm", handleValue), getBreakpoints(pl, "sm", handleValue), getBreakpoints(minWidth, "sm", handleValue), getBreakpoints(maxWidth, "sm", handleValue), getBreakpoints(minHeight, "sm", handleValue), getBreakpoints(maxHeight, "sm", handleValue), theme.breakpoints.md.min, getBreakpoints(m, "md", handleValue), getBreakpoints(mt, "md", handleValue), getBreakpoints(mr, "md", handleValue), getBreakpoints(mb, "md", handleValue), getBreakpoints(ml, "md", handleValue), getBreakpoints(p, "md", handleValue), getBreakpoints(pt, "md", handleValue), getBreakpoints(pr, "md", handleValue), getBreakpoints(pb, "md", handleValue), getBreakpoints(pl, "md", handleValue), getBreakpoints(minWidth, "md", handleValue), getBreakpoints(maxWidth, "md", handleValue), getBreakpoints(minHeight, "md", handleValue), getBreakpoints(maxHeight, "md", handleValue), theme.breakpoints.lg.min, getBreakpoints(m, "lg", handleValue), getBreakpoints(mt, "lg", handleValue), getBreakpoints(mr, "lg", handleValue), getBreakpoints(mb, "lg", handleValue), getBreakpoints(ml, "lg", handleValue), getBreakpoints(p, "lg", handleValue), getBreakpoints(pt, "lg", handleValue), getBreakpoints(pr, "lg", handleValue), getBreakpoints(pb, "lg", handleValue), getBreakpoints(pl, "lg", handleValue), getBreakpoints(minWidth, "lg", handleValue), getBreakpoints(maxWidth, "lg", handleValue), getBreakpoints(minHeight, "lg", handleValue), getBreakpoints(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, getBreakpoints(m, "xl", handleValue), getBreakpoints(mt, "xl", handleValue), getBreakpoints(mr, "xl", handleValue), getBreakpoints(mb, "xl", handleValue), getBreakpoints(ml, "xl", handleValue), getBreakpoints(p, "xl", handleValue), getBreakpoints(pt, "xl", handleValue), getBreakpoints(pr, "xl", handleValue), getBreakpoints(pb, "xl", handleValue), getBreakpoints(pl, "xl", handleValue), getBreakpoints(minWidth, "xl", handleValue), getBreakpoints(maxWidth, "xl", handleValue), getBreakpoints(minHeight, "xl", handleValue), getBreakpoints(maxHeight, "xl", handleValue)]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Skeleton", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "1956402246",
      dynamic: [visible ? "block" : "none", handleShape(), radius ? getBreakpoints(radius, "xs", handleValue) : width ? getBreakpoints(width, "xs", handleValue) : "auto", radius ? getBreakpoints(radius, "xs", handleValue) : height ? getBreakpoints(height, "xs", handleValue) : "auto", handleBackgroundColor(), brightness(handleBackgroundColor(), 20), theme.breakpoints.sm.min, radius ? getBreakpoints(radius, "sm", handleValue) : width ? getBreakpoints(width, "sm", handleValue) : "auto", radius ? getBreakpoints(radius, "sm", handleValue) : height ? getBreakpoints(height, "sm", handleValue) : "auto", theme.breakpoints.md.min, radius ? getBreakpoints(radius, "md", handleValue) : width ? getBreakpoints(width, "md", handleValue) : "auto", radius ? getBreakpoints(radius, "md", handleValue) : height ? getBreakpoints(height, "md", handleValue) : "auto", theme.breakpoints.lg.min, radius ? getBreakpoints(radius, "lg", handleValue) : width ? getBreakpoints(width, "lg", handleValue) : "auto", radius ? getBreakpoints(radius, "lg", handleValue) : height ? getBreakpoints(height, "lg", handleValue) : "auto", theme.breakpoints.xl.min, radius ? getBreakpoints(radius, "xl", handleValue) : width ? getBreakpoints(width, "xl", handleValue) : "auto", radius ? getBreakpoints(radius, "xl", handleValue) : height ? getBreakpoints(height, "xl", handleValue) : "auto"],
      children: `.Wps-Skeleton.__jsx-style-dynamic-selector{display:${visible ? "block" : "none"};${handleShape()} width:${radius ? getBreakpoints(radius, "xs", handleValue) : width ? getBreakpoints(width, "xs", handleValue) : "auto"};height:${radius ? getBreakpoints(radius, "xs", handleValue) : height ? getBreakpoints(height, "xs", handleValue) : "auto"};-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:placeholderSkeleton-__jsx-style-dynamic-selector;animation-name:placeholderSkeleton-__jsx-style-dynamic-selector;-webkit-animation-timing-function:linear ease;animation-timing-function:linear ease;background:${handleBackgroundColor()};position:relative;background-image:linear-gradient( 90deg, rgba(255,255,255,0) 0, ${brightness(handleBackgroundColor(), 20)}, rgba(255,255,255,0) );background-size:80px auto;background-repeat:no-repeat;background-position:left -40px top 0;}@-webkit-keyframes placeholderSkeleton-__jsx-style-dynamic-selector{0%{background-position:left -40px top 0;}50%{background-position:right -80px top 0;}auto{background-position:left -40px top 0;}}@keyframes placeholderSkeleton-__jsx-style-dynamic-selector{0%{background-position:left -40px top 0;}50%{background-position:right -80px top 0;}auto{background-position:left -40px top 0;}}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? getBreakpoints(radius, "sm", handleValue) : width ? getBreakpoints(width, "sm", handleValue) : "auto"};height:${radius ? getBreakpoints(radius, "sm", handleValue) : height ? getBreakpoints(height, "sm", handleValue) : "auto"};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? getBreakpoints(radius, "md", handleValue) : width ? getBreakpoints(width, "md", handleValue) : "auto"};height:${radius ? getBreakpoints(radius, "md", handleValue) : height ? getBreakpoints(height, "md", handleValue) : "auto"};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? getBreakpoints(radius, "lg", handleValue) : width ? getBreakpoints(width, "lg", handleValue) : "auto"};height:${radius ? getBreakpoints(radius, "lg", handleValue) : height ? getBreakpoints(height, "lg", handleValue) : "auto"};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? getBreakpoints(radius, "xl", handleValue) : width ? getBreakpoints(width, "xl", handleValue) : "auto"};height:${radius ? getBreakpoints(radius, "xl", handleValue) : height ? getBreakpoints(height, "xl", handleValue) : "auto"};}}`
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1524759144",
      dynamic: [getBreakpoints(m, "xs", handleValue), getBreakpoints(mt, "xs", handleValue), getBreakpoints(mr, "xs", handleValue), getBreakpoints(mb, "xs", handleValue), getBreakpoints(ml, "xs", handleValue), getBreakpoints(p, "xs", handleValue), getBreakpoints(pt, "xs", handleValue), getBreakpoints(pr, "xs", handleValue), getBreakpoints(pb, "xs", handleValue), getBreakpoints(pl, "xs", handleValue), getBreakpoints(minWidth, "xs", handleValue), getBreakpoints(maxWidth, "xs", handleValue), getBreakpoints(minHeight, "xs", handleValue), getBreakpoints(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, getBreakpoints(m, "sm", handleValue), getBreakpoints(mt, "sm", handleValue), getBreakpoints(mr, "sm", handleValue), getBreakpoints(mb, "sm", handleValue), getBreakpoints(ml, "sm", handleValue), getBreakpoints(p, "sm", handleValue), getBreakpoints(pt, "sm", handleValue), getBreakpoints(pr, "sm", handleValue), getBreakpoints(pb, "sm", handleValue), getBreakpoints(pl, "sm", handleValue), getBreakpoints(minWidth, "sm", handleValue), getBreakpoints(maxWidth, "sm", handleValue), getBreakpoints(minHeight, "sm", handleValue), getBreakpoints(maxHeight, "sm", handleValue), theme.breakpoints.md.min, getBreakpoints(m, "md", handleValue), getBreakpoints(mt, "md", handleValue), getBreakpoints(mr, "md", handleValue), getBreakpoints(mb, "md", handleValue), getBreakpoints(ml, "md", handleValue), getBreakpoints(p, "md", handleValue), getBreakpoints(pt, "md", handleValue), getBreakpoints(pr, "md", handleValue), getBreakpoints(pb, "md", handleValue), getBreakpoints(pl, "md", handleValue), getBreakpoints(minWidth, "md", handleValue), getBreakpoints(maxWidth, "md", handleValue), getBreakpoints(minHeight, "md", handleValue), getBreakpoints(maxHeight, "md", handleValue), theme.breakpoints.lg.min, getBreakpoints(m, "lg", handleValue), getBreakpoints(mt, "lg", handleValue), getBreakpoints(mr, "lg", handleValue), getBreakpoints(mb, "lg", handleValue), getBreakpoints(ml, "lg", handleValue), getBreakpoints(p, "lg", handleValue), getBreakpoints(pt, "lg", handleValue), getBreakpoints(pr, "lg", handleValue), getBreakpoints(pb, "lg", handleValue), getBreakpoints(pl, "lg", handleValue), getBreakpoints(minWidth, "lg", handleValue), getBreakpoints(maxWidth, "lg", handleValue), getBreakpoints(minHeight, "lg", handleValue), getBreakpoints(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, getBreakpoints(m, "xl", handleValue), getBreakpoints(mt, "xl", handleValue), getBreakpoints(mr, "xl", handleValue), getBreakpoints(mb, "xl", handleValue), getBreakpoints(ml, "xl", handleValue), getBreakpoints(p, "xl", handleValue), getBreakpoints(pt, "xl", handleValue), getBreakpoints(pr, "xl", handleValue), getBreakpoints(pb, "xl", handleValue), getBreakpoints(pl, "xl", handleValue), getBreakpoints(minWidth, "xl", handleValue), getBreakpoints(maxWidth, "xl", handleValue), getBreakpoints(minHeight, "xl", handleValue), getBreakpoints(maxHeight, "xl", handleValue)],
      children: `.Wps-Skeleton.__jsx-style-dynamic-selector{margin:${getBreakpoints(m, "xs", handleValue)};margin-top:${getBreakpoints(mt, "xs", handleValue)};margin-right:${getBreakpoints(mr, "xs", handleValue)};margin-bottom:${getBreakpoints(mb, "xs", handleValue)};margin-left:${getBreakpoints(ml, "xs", handleValue)};padding:${getBreakpoints(p, "xs", handleValue)};padding-top:${getBreakpoints(pt, "xs", handleValue)};padding-right:${getBreakpoints(pr, "xs", handleValue)};padding-bottom:${getBreakpoints(pb, "xs", handleValue)};padding-left:${getBreakpoints(pl, "xs", handleValue)};min-width:${getBreakpoints(minWidth, "xs", handleValue)};max-width:${getBreakpoints(maxWidth, "xs", handleValue)};min-height:${getBreakpoints(minHeight, "xs", handleValue)};max-height:${getBreakpoints(maxHeight, "xs", handleValue)};}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{margin:${getBreakpoints(m, "sm", handleValue)};margin-top:${getBreakpoints(mt, "sm", handleValue)};margin-right:${getBreakpoints(mr, "sm", handleValue)};margin-bottom:${getBreakpoints(mb, "sm", handleValue)};margin-left:${getBreakpoints(ml, "sm", handleValue)};padding:${getBreakpoints(p, "sm", handleValue)};padding-top:${getBreakpoints(pt, "sm", handleValue)};padding-right:${getBreakpoints(pr, "sm", handleValue)};padding-bottom:${getBreakpoints(pb, "sm", handleValue)};padding-left:${getBreakpoints(pl, "sm", handleValue)};min-width:${getBreakpoints(minWidth, "sm", handleValue)};max-width:${getBreakpoints(maxWidth, "sm", handleValue)};min-height:${getBreakpoints(minHeight, "sm", handleValue)};max-height:${getBreakpoints(maxHeight, "sm", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{margin:${getBreakpoints(m, "md", handleValue)};margin-top:${getBreakpoints(mt, "md", handleValue)};margin-right:${getBreakpoints(mr, "md", handleValue)};margin-bottom:${getBreakpoints(mb, "md", handleValue)};margin-left:${getBreakpoints(ml, "md", handleValue)};padding:${getBreakpoints(p, "md", handleValue)};padding-top:${getBreakpoints(pt, "md", handleValue)};padding-right:${getBreakpoints(pr, "md", handleValue)};padding-bottom:${getBreakpoints(pb, "md", handleValue)};padding-left:${getBreakpoints(pl, "md", handleValue)};min-width:${getBreakpoints(minWidth, "md", handleValue)};max-width:${getBreakpoints(maxWidth, "md", handleValue)};min-height:${getBreakpoints(minHeight, "md", handleValue)};max-height:${getBreakpoints(maxHeight, "md", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{margin:${getBreakpoints(m, "lg", handleValue)};margin-top:${getBreakpoints(mt, "lg", handleValue)};margin-right:${getBreakpoints(mr, "lg", handleValue)};margin-bottom:${getBreakpoints(mb, "lg", handleValue)};margin-left:${getBreakpoints(ml, "lg", handleValue)};padding:${getBreakpoints(p, "lg", handleValue)};padding-top:${getBreakpoints(pt, "lg", handleValue)};padding-right:${getBreakpoints(pr, "lg", handleValue)};padding-bottom:${getBreakpoints(pb, "lg", handleValue)};padding-left:${getBreakpoints(pl, "lg", handleValue)};min-width:${getBreakpoints(minWidth, "lg", handleValue)};max-width:${getBreakpoints(maxWidth, "lg", handleValue)};min-height:${getBreakpoints(minHeight, "lg", handleValue)};max-height:${getBreakpoints(maxHeight, "lg", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{margin:${getBreakpoints(m, "xl", handleValue)};margin-top:${getBreakpoints(mt, "xl", handleValue)};margin-right:${getBreakpoints(mr, "xl", handleValue)};margin-bottom:${getBreakpoints(mb, "xl", handleValue)};margin-left:${getBreakpoints(ml, "xl", handleValue)};padding:${getBreakpoints(p, "xl", handleValue)};padding-top:${getBreakpoints(pt, "xl", handleValue)};padding-right:${getBreakpoints(pr, "xl", handleValue)};padding-bottom:${getBreakpoints(pb, "xl", handleValue)};padding-left:${getBreakpoints(pl, "xl", handleValue)};min-width:${getBreakpoints(minWidth, "xl", handleValue)};max-width:${getBreakpoints(maxWidth, "xl", handleValue)};min-height:${getBreakpoints(minHeight, "xl", handleValue)};max-height:${getBreakpoints(maxHeight, "xl", handleValue)};}}`
    })]
  });
};