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 { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Divider = props => {
  const theme = useTheme();
  const {
    gap = 2,
    spacing = 1,
    volume = 1,
    color = "subtext",
    direction = "horizontal",
    shape = "square",
    children,
    className,
    ...otherProps
  } = props;

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

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

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

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

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

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

  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-Divider",
    ...otherProps,
    className: _JSXStyle.dynamic([["841869195", [handleColor(), handleShape(), typeof volume === "number" ? `calc(${volume} * 1px)` : volume, handleValue(spacing), typeof volume === "number" ? `calc(${volume} * 1px)` : volume, handleValue(spacing), theme.palette.background, theme.palette.text, handleValue(gap), handleValue(gap)]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Divider", direction, className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "841869195",
      dynamic: [handleColor(), handleShape(), typeof volume === "number" ? `calc(${volume} * 1px)` : volume, handleValue(spacing), typeof volume === "number" ? `calc(${volume} * 1px)` : volume, handleValue(spacing), theme.palette.background, theme.palette.text, handleValue(gap), handleValue(gap)],
      children: `.Wps-Divider.__jsx-style-dynamic-selector{background:${handleColor()};position:relative;${handleShape()};}.Wps-Divider.horizontal.__jsx-style-dynamic-selector{width:auto;max-width:100%;height:${typeof volume === "number" ? `calc(${volume} * 1px)` : volume};margin:${handleValue(spacing)} auto;}.Wps-Divider.vertical.__jsx-style-dynamic-selector{height:100%;max-height:100%;width:${typeof volume === "number" ? `calc(${volume} * 1px)` : volume};margin:auto ${handleValue(spacing)};}.Wps-DividerText.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:1rem;background-color:${theme.palette.background};color:${theme.palette.text};}.Wps-DividerText.horizontal.__jsx-style-dynamic-selector{min-height:100%;padding:0 ${handleValue(gap)};}.Wps-DividerText.vertical.__jsx-style-dynamic-selector{padding:${handleValue(gap)} 0;}`
    }), children && /*#__PURE__*/_jsx("span", {
      className: _JSXStyle.dynamic([["841869195", [handleColor(), handleShape(), typeof volume === "number" ? `calc(${volume} * 1px)` : volume, handleValue(spacing), typeof volume === "number" ? `calc(${volume} * 1px)` : volume, handleValue(spacing), theme.palette.background, theme.palette.text, handleValue(gap), handleValue(gap)]]]) + " " + `Wps-DividerText ${direction}`,
      children: children
    })]
  });
};