import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import Button from "../button";
import React, { useEffect, useRef, useState } from "react";
var Expandable = function Expandable(_ref) {
  var children = _ref.children,
    _ref$collapsedHeight = _ref.collapsedHeight,
    collapsedHeight = _ref$collapsedHeight === void 0 ? 150 : _ref$collapsedHeight,
    _ref$fadeHeight = _ref.fadeHeight,
    fadeHeight = _ref$fadeHeight === void 0 ? 40 : _ref$fadeHeight,
    className = _ref.className,
    _ref$transitionDurati = _ref.transitionDuration,
    transitionDuration = _ref$transitionDurati === void 0 ? 300 : _ref$transitionDurati;
  var contentRef = useRef(null);
  var containerRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    expanded = _useState2[0],
    setExpanded = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isOverflowing = _useState4[0],
    setIsOverflowing = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    contentHeight = _useState6[0],
    setContentHeight = _useState6[1];
  var _useState7 = useState("#fff"),
    _useState8 = _slicedToArray(_useState7, 2),
    fadeColor = _useState8[0],
    setFadeColor = _useState8[1];

  // Measure content height and detect overflow
  useEffect(function () {
    var _contentRef$current$q, _contentRef$current;
    var el = contentRef.current;
    if (!el) return;
    var updateHeight = function updateHeight() {
      var _containerRef$current;
      var scrollHeight = el.scrollHeight;
      setContentHeight(scrollHeight);
      setIsOverflowing(scrollHeight > collapsedHeight);

      // Detect background color dynamically
      var parentBg = window.getComputedStyle((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : el).backgroundColor;
      setFadeColor(parentBg || "#fff");
    };
    updateHeight();
    var images = (_contentRef$current$q = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelectorAll("img")) !== null && _contentRef$current$q !== void 0 ? _contentRef$current$q : [];
    if (images) {
      images.forEach(function (img) {
        return img.addEventListener("load", updateHeight);
      });
    }
    var observer = new ResizeObserver(updateHeight);
    observer.observe(el);
    return function () {
      return observer.disconnect();
    };
  }, [children, collapsedHeight]);
  var containerHeight = !isOverflowing ? contentHeight : expanded ? contentHeight : collapsedHeight;
  var fadeStyle = {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: fadeHeight,
    background: "linear-gradient(to bottom, rgba(255,255,255,0), ".concat(fadeColor, ")"),
    pointerEvents: "none",
    transition: "opacity ".concat(transitionDuration, "ms ease"),
    opacity: !expanded && isOverflowing ? 1 : 0
  };
  var toggleExpanded = function toggleExpanded() {
    return setExpanded(function (prev) {
      return !prev;
    });
  };
  var handleKey = function handleKey(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggleExpanded();
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: containerRef,
    className: className
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: containerHeight,
      overflow: "hidden",
      transition: "height ".concat(transitionDuration, "ms ease"),
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement("div", {
    ref: contentRef
  }, children), /*#__PURE__*/React.createElement("div", {
    style: fadeStyle
  })), isOverflowing && /*#__PURE__*/React.createElement(Button, {
    "aria-expanded": expanded,
    onKeyDown: handleKey,
    margin: 0,
    padding: 0,
    onClick: function onClick() {
      return setExpanded(function (prev) {
        return !prev;
      });
    },
    effect: false,
    color: "abort",
    scale: 2 / 3,
    auto: true
  }, /*#__PURE__*/React.createElement("b", null, expanded ? 'Show less' : 'Show more')));
};
export default Expandable;