import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useLayoutEffect, useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { Flex, tasty } from '@cube-dev/ui-kit';
import styled from 'styled-components';
const ACCORDION_CONTENT_HEIGHT_VARIABLE = '--accordion-content-height';
const ANIMATION_TIMEOUT = 180;
const AccordionDetailsContentInnerElement = tasty(Flex, {
    styles: {
        padding: {
            '': '1x 0 3x 3x',
            '[data-size="small"]': '0 0 0 3x',
            '[data-size="small"] & separated': '0 0 1x 3x',
        },
        gap: 0,
        flow: 'column',
    },
});
const AccordionDetailsContent = memo(styled.div `
  ${ACCORDION_CONTENT_HEIGHT_VARIABLE}: 0;

  height: ${({ $expanded }) => ($expanded ? 'auto' : '0')};
  opacity: ${({ $expanded }) => ($expanded ? 1 : 0)};

  transition-property: height, opacity;
  transition-duration: ${ANIMATION_TIMEOUT}ms;
  transition-timing-function: cubic-bezier(0.42, 0.7, 0.82, 1);

  &.cube-accordion-transition {
    &-enter {
      opacity: 0;
      height: 0;
      contain: size layout style paint;
      will-change: height, opacity;
    }
    &-enter-active {
      opacity: 1;
      height: var(${ACCORDION_CONTENT_HEIGHT_VARIABLE});
      contain: size layout style paint;
      will-change: height, opacity;
    }
    &-exit {
      opacity: 1;
      height: var(${ACCORDION_CONTENT_HEIGHT_VARIABLE});
      contain: size layout style paint;
      will-change: height, opacity;
    }
    &-exit-active {
      opacity: 0;
      height: 0;
      contain: size layout style paint;
      will-change: height, opacity;
    }
  }
`);
export const AccordionDetails = memo(function AccordionDetails(props) {
    const { children, isLazy, size, isSeparated, isExpanded = false, styles } = props;
    const [innerExpandingState, setInnerExpandingState] = useState(isExpanded ? 'expanded' : 'collapsed');
    const accordionContentRef = useRef(null);
    const isLazyChildren = isLazy || typeof children === 'function';
    const content = (() => {
        if (isLazyChildren) {
            if (isExpanded || innerExpandingState === 'collapsing') {
                return renderChildren(children);
            }
            if (innerExpandingState === 'collapsed') {
                return null;
            }
        }
        return renderChildren(children);
    })();
    useLayoutEffect(() => {
        accordionContentRef.current?.style.setProperty(ACCORDION_CONTENT_HEIGHT_VARIABLE, `${accordionContentRef.current?.scrollHeight}px`);
    }, [isExpanded]);
    return (_jsx(CSSTransition, { in: isExpanded, timeout: ANIMATION_TIMEOUT, classNames: "cube-accordion-transition", onEnter: () => setInnerExpandingState('expanding'), onEntered: () => setInnerExpandingState('expanded'), onExiting: () => setInnerExpandingState('collapsing'), onExited: () => setInnerExpandingState('collapsed'), children: _jsx(AccordionDetailsContent, { ref: accordionContentRef, "$expanded": isExpanded, children: _jsx(AccordionDetailsContentInnerElement, { "data-size": size, mods: { separated: isSeparated }, styles: styles, children: content }) }) }));
});
function renderChildren(children) {
    return typeof children === 'function' ? children() : children;
}
//# sourceMappingURL=AccordionDetails.js.map