import { useState, useRef, useEffect } from "react";
import PropTypes from "prop-types";
import { Chevron } from "../../lib/Chevron.jsx";

const Accordion = ({
  title = "",
  subTitle,
  children,
  centerItem,
  rightItem,
  isOpen = false,
  isSticky = false,
}) => {
  const content = useRef(null);
  const [setActive, setActiveState] = useState(isOpen ? "active" : "");
  const ariaPressed = setActive ? "true" : "false";
  const getHeight = (node) => {
    if (node) {
      return `${node.scrollHeight}px`;
    }
    return "auto";
  };
  const height = setActive ? getHeight(content.current) : "0px";
  const rotate = setActive ? "accordion-icon rotate" : "accordion-icon";

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
  }

  function openAccordion() {
    setActiveState("active");
  }

  function closeAccordion() {
    setActiveState("");
  }

  useEffect(() => {
    if (isOpen) {
      openAccordion();
    } else {
      closeAccordion();
    }
  }, [isOpen]);

  return (
    <div className="accordion-section" data-testid="accordion">
      <button
        className={`accordion ${setActive} ${
          setActive && isSticky ? "sticky" : ""
        }`}
        aria-label={title}
        aria-pressed={ariaPressed}
        aria-expanded={ariaPressed}
        tabIndex="0"
        onClick={toggleAccordion}
      >
        <div className="accordion-left-title">
          <p className="accordion-title">{title}</p>
          {subTitle && <p className="accordion-subtitle">{subTitle}</p>}
        </div>
        {centerItem && (
          <div className="accordion-center">
            <p>{centerItem}</p>
          </div>
        )}
        {rightItem && (
          <div className="accordion-right">
            <p>{rightItem}</p>
          </div>
        )}
        <div className="chevron-container">
          <Chevron className={rotate} />
        </div>
      </button>
      <div
        ref={content}
        style={{ maxHeight: height }}
        className="accordion-content"
      >
        <div className="accordion-text dashed-border">{children}</div>
      </div>
    </div>
  );
};

Accordion.propTypes = {
  title: PropTypes.string.isRequired,
  subTitle: PropTypes.string,
  children: PropTypes.any.isRequired,
  centerItem: PropTypes.string,
  rightItem: PropTypes.string,
  isOpen: PropTypes.bool,
  isSticky: PropTypes.bool,
};

export default Accordion;