var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}
import React, { useMemo, useRef, useContext, useState, forwardRef, useImperativeHandle } from "react";
import classnames from "classnames";
import Cell from "../cell";
import CollapseContext from "./CollapseContext";
import useLazyRender from "../hooks/use-lazy-render";
import { raf, doubleRaf } from "../utils/raf";
import { useUpdateEffect } from "../hooks";
import ConfigProviderContext from "../config-provider/ConfigProviderContext";
const CollapseItem = /* @__PURE__ */ forwardRef((props, ref) => {
  const {
    index
  } = props;
  const parent = useContext(CollapseContext);
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace("collapse-item", prefixCls);
  const wrapperRef = useRef(null);
  const contentRef = useRef(null);
  const name = useMemo(() => {
    var _a;
    return (_a = props.name) != null ? _a : index;
  }, [props.name]);
  const expanded = useMemo(() => {
    if (parent) {
      return parent.isExpanded(name);
    }
    return null;
  }, [parent, name]);
  const [show, setShow] = useState(() => expanded);
  const lazyRender = useLazyRender(show);
  const onTransitionEnd = () => {
    if (!expanded) {
      setShow(false);
    } else {
      wrapperRef.current.style.height = "";
    }
  };
  useUpdateEffect(() => {
    if (expanded) {
      setShow(true);
    }
    raf(() => {
      if (!contentRef.current || !wrapperRef.current) {
        return;
      }
      const {
        offsetHeight
      } = contentRef.current;
      if (offsetHeight) {
        const contentHeight = `${offsetHeight}px`;
        wrapperRef.current.style.height = expanded ? 0 : contentHeight;
        doubleRaf(() => {
          wrapperRef.current.style.height = expanded ? contentHeight : 0;
        });
      } else {
        onTransitionEnd();
      }
    });
  }, [expanded]);
  const toggle = (value = !expanded) => {
    parent.toggle(name, value);
  };
  const onClickTitle = () => {
    if (!props.disabled && !props.readonly) {
      toggle();
    }
  };
  const renderTitle = () => {
    const _a = props, {
      border,
      disabled,
      children,
      readonly
    } = _a, others = __objRest(_a, [
      "border",
      "disabled",
      "children",
      "readonly"
    ]);
    return /* @__PURE__ */ React.createElement(Cell, _extends({
      className: classnames(bem("title", {
        disabled,
        expanded,
        borderless: !border
      })),
      "aria-expanded": String(expanded),
      onClick: onClickTitle
    }, others, {
      isLink: readonly ? false : others.isLink,
      clickable: disabled || readonly ? false : others.clickable
    }));
  };
  const renderContent = lazyRender(() => /* @__PURE__ */ React.createElement("div", {
    ref: wrapperRef,
    className: classnames(bem("wrapper")),
    onTransitionEnd
  }, /* @__PURE__ */ React.createElement("div", {
    ref: contentRef,
    className: classnames(bem("content"))
  }, props.children)));
  useImperativeHandle(ref, () => ({
    toggle
  }));
  return /* @__PURE__ */ React.createElement("div", {
    className: classnames(bem({
      border: index && props.border
    }))
  }, renderTitle(), renderContent());
});
CollapseItem.defaultProps = {
  isLink: true,
  border: true
};
CollapseItem.displayName = "CollapseItem";
var stdin_default = CollapseItem;
export {
  stdin_default as default
};
