import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import isThemePalette from "../../utils/isThemePalette";
import contrast from "../../utils/contrast"; // import opacity from "../../utils/opacity";

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Accordion = props => {
  // const theme = useTheme();
  const {
    children,
    className,
    panels = [],
    wrapperStyle,
    contentStyle,
    innerStyle,
    labelStyle,
    backgroundColor = "basic",
    labelColor = null,
    labelBackgroundColor = null,
    labelActiveColor = null,
    labelActiveBackgroundColor = null,
    contentColor = null,
    shape = "rounded",
    size = "medium",
    style,
    ...otherProps
  } = props;
  const [activeTab, setActiveTab] = useState(0);

  function activateTab(index) {
    setActiveTab(activeTab === index ? -1 : index);
  }

  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-Accordion",
    role: "tablist",
    style: wrapperStyle,
    ...otherProps,
    className: "jsx-3142333300" + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Accordion", className) || ""),
    children: [panels.map((panel, index) => /*#__PURE__*/_jsx(Panel, {
      activeTab: activeTab,
      index: index,
      style: style,
      shape: shape,
      size: size,
      backgroundColor: backgroundColor,
      labelColor: labelColor,
      labelBackgroundColor: labelBackgroundColor,
      labelActiveColor: labelActiveColor,
      labelActiveBackgroundColor: labelActiveBackgroundColor,
      contentColor: contentColor,
      labelStyle: labelStyle,
      contentStyle: contentStyle,
      innerStyle: innerStyle,
      ...panel,
      activateTab: () => {
        activateTab(index);
      }
    }, index)), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "3142333300",
      children: ".Wps-Accordion.jsx-3142333300{width:100%;}"
    })]
  });
};

const Panel = props => {
  const theme = useTheme();
  const {
    label,
    icon,
    content,
    shape,
    size,
    className,
    activeTab,
    index,
    activateTab,
    innerStyle,
    labelStyle,
    contentStyle,
    backgroundColor,
    labelColor,
    labelBackgroundColor,
    labelActiveColor,
    labelActiveBackgroundColor,
    contentColor,
    style,
    ...otherProps
  } = props;
  const internalRef = React.useRef(null);
  const [height, setHeight] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      if (internalRef.current) {
        const internalHeight = internalRef.current.scrollHeight;
        setHeight(internalHeight);
      }
    }, 333);
  }, []);

  function handleShapeFirstVertical() {
    switch (shape) {
      case "round":
        return "border-radius: 10em 10em 0px 0px; border-top-width: 2px;";

      case "rounded":
        return "border-radius: 0.7em 0.7em 0px 0px; border-top-width: 2px;";

      case "square":
        return "border-radius: 0em; border-top-width: 2px;";

      default:
        return "border-radius: 0.7em 0.7em 0px 0px; border-top-width: 2px;";
    }
  }

  function handleShapeLastVertical() {
    switch (shape) {
      case "round":
        return "border-radius: 0px 0px 10em 10em; border-bottom-width: 2px;";

      case "rounded":
        return "border-radius: 0px 0px 0.7em 0.7em; border-bottom-width: 2px;";

      case "square":
        return "border-radius: 0em; border-bottom-width: 2px;";

      default:
        return "border-radius: 0px 0px 0.7em 0.7em; border-bottom-width: 2px;";
    }
  }

  function handleFontSize() {
    switch (size) {
      case "xlarge":
        return "font-size: 18px;";

      case "large":
        return "font-size: 16px;";

      case "small":
        return "font-size: 12px;";

      case "mini":
        return "font-size: 10px;";

      case "medium":
      default:
        return "font-size: 14px;";
    }
  }

  function handlePadding() {
    switch (size) {
      case "xlarge":
        return "padding: 20px;";

      case "large":
        return "padding: 18px;";

      case "small":
        return "padding: 13px;";

      case "mini":
        return "padding: 10px;";

      case "medium":
      default:
        return "padding: 15px;";
    }
  }

  function handleExpandWidth() {
    switch (size) {
      case "xlarge":
        return "width: 20px;";

      case "large":
        return "width: 18px;";

      case "small":
        return "width: 13px;";

      case "mini":
        return "width: 10px;";

      case "medium":
      default:
        return "width: 15px;";
    }
  }

  function handleColor(color) {
    if (!color) return handleColor(backgroundColor);

    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 handleContrastColor(color) {
    if (!color) return contrast(backgroundColor);

    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;
    }
  }

  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-AccordionPanel",
    "aria-expanded": activeTab === index,
    ...otherProps,
    className: _JSXStyle.dynamic([["714939945", [handleColor(backgroundColor), handleShapeFirstVertical(), handleShapeLastVertical(), activeTab === index ? height : 0, labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(labelColor), handleExpandWidth(), handleContrastColor(labelColor), labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(contentColor), activeTab === index ? 1 : 0]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-AccordionPanel", className) || ""),
    children: [/*#__PURE__*/_jsxs("button", {
      role: "tab",
      onClick: activateTab,
      style: labelStyle,
      className: _JSXStyle.dynamic([["714939945", [handleColor(backgroundColor), handleShapeFirstVertical(), handleShapeLastVertical(), activeTab === index ? height : 0, labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(labelColor), handleExpandWidth(), handleContrastColor(labelColor), labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(contentColor), activeTab === index ? 1 : 0]]]) + " " + "Wps-AccordionPanelLabel",
      children: [icon && /*#__PURE__*/_jsx("span", {
        style: {
          paddingRight: 10
        },
        className: _JSXStyle.dynamic([["714939945", [handleColor(backgroundColor), handleShapeFirstVertical(), handleShapeLastVertical(), activeTab === index ? height : 0, labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(labelColor), handleExpandWidth(), handleContrastColor(labelColor), labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(contentColor), activeTab === index ? 1 : 0]]]),
        children: icon
      }), label]
    }), /*#__PURE__*/_jsx("div", {
      style: innerStyle,
      "aria-hidden": !activeTab === index,
      ref: internalRef,
      className: _JSXStyle.dynamic([["714939945", [handleColor(backgroundColor), handleShapeFirstVertical(), handleShapeLastVertical(), activeTab === index ? height : 0, labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(labelColor), handleExpandWidth(), handleContrastColor(labelColor), labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(contentColor), activeTab === index ? 1 : 0]]]) + " " + "Wps-AccordionPanelInner",
      children: /*#__PURE__*/_jsx("p", {
        style: contentStyle,
        className: _JSXStyle.dynamic([["714939945", [handleColor(backgroundColor), handleShapeFirstVertical(), handleShapeLastVertical(), activeTab === index ? height : 0, labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(labelColor), handleExpandWidth(), handleContrastColor(labelColor), labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(contentColor), activeTab === index ? 1 : 0]]]) + " " + "Wps-AccordionPanelContent",
        children: content
      })
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "714939945",
      dynamic: [handleColor(backgroundColor), handleShapeFirstVertical(), handleShapeLastVertical(), activeTab === index ? height : 0, labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(labelColor), handleExpandWidth(), handleContrastColor(labelColor), labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent", labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent", handlePadding(), handleFontSize(), handleContrastColor(contentColor), activeTab === index ? 1 : 0],
      children: `.Wps-AccordionPanel.__jsx-style-dynamic-selector{background:${handleColor(backgroundColor)};}.Wps-AccordionPanel.__jsx-style-dynamic-selector:first-child,.Wps-AccordionPanel.__jsx-style-dynamic-selector:first-child .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector{${handleShapeFirstVertical()};}.Wps-AccordionPanel.__jsx-style-dynamic-selector:last-child,.Wps-AccordionPanel.__jsx-style-dynamic-selector:last-child .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector{${handleShapeLastVertical()};}.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelInner.__jsx-style-dynamic-selector{height:${activeTab === index ? height : 0}px;max-height:100%;overflow:hidden;will-change:height;-webkit-transition:height 0.4s cubic-bezier(0.65,0.05,0.36,1);transition:height 0.4s cubic-bezier(0.65,0.05,0.36,1);}.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector{position:relative;display:block;width:100%;background:${labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent"};border:none;text-align:left;${handlePadding()} font-weight:500;${handleFontSize()} font-family:inherit;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;cursor:pointer;color:${handleContrastColor(labelColor)};}.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector:focus{outline:none;}.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector:after,.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector:before{content:"";position:absolute;right:25px;top:50%;${handleExpandWidth()} height:2px;margin-top:-2px;background:${handleContrastColor(labelColor)};}.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector:before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.35s cubic-bezier(0.65,0.05,0.36,1);-webkit-transition:transform 0.35s cubic-bezier(0.65,0.05,0.36,1);transition:transform 0.35s cubic-bezier(0.65,0.05,0.36,1);}.Wps-AccordionPanel[aria-expanded="true"].__jsx-style-dynamic-selector .Wps-AccordionPanelContent.__jsx-style-dynamic-selector{opacity:1;}.Wps-AccordionPanel[aria-expanded="true"].__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector{background:${labelActiveBackgroundColor ? handleColor(labelActiveBackgroundColor) : labelBackgroundColor ? handleColor(labelBackgroundColor) : "transparent"};color:${labelActiveColor ? handleContrastColor(labelActiveColor) : labelColor ? handleContrastColor(labelColor) : "transparent"};-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}.Wps-AccordionPanel[aria-expanded="true"].__jsx-style-dynamic-selector .Wps-AccordionPanelLabel.__jsx-style-dynamic-selector:before{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}.Wps-AccordionPanel.__jsx-style-dynamic-selector .Wps-AccordionPanelContent.__jsx-style-dynamic-selector{${handlePadding()} padding-top:5px;${handleFontSize()} color:${handleContrastColor(contentColor)};opacity:${activeTab === index ? 1 : 0};-webkit-transition:opacity 0.3s linear 0.18s;transition:opacity 0.3s linear 0.18s;}`
    })]
  });
}; // class Panel2 extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       height: 0,
//     };
//   }
//   // componentDidMount() {
//   //   window.setTimeout(() => {
//   //     const el = ReactDOM.findDOMNode(this);
//   //     const height = el.querySelector(".panel__inner").scrollHeight;
//   //     this.setState({
//   //       height,
//   //     });
//   //   }, 333);
//   // }
//   render() {
//     // const { label, content, activeTab, index, activateTab } = this.props;
//     // const { height } = this.state;
//     // const isActive = activeTab === index;
//     // const innerStyle = {
//     //   height: `${isActive ? height : 0}px`,
//     // };
//     return (
//       // <div className="panel" role="tabpanel" aria-expanded={isActive}>
//       //   <button className="panel__label" role="tab" onClick={activateTab}>
//       //     {label}
//       //   </button>
//       //   <div
//       //     className="panel__inner"
//       //     style={innerStyle}
//       //     aria-hidden={!isActive}
//       //   >
//       //     <p className="panel__content">{content}</p>
//       //   </div>
//       // </div>
//     );
//   }
// }