import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import { View } from "@tarojs/components";
import classNames from "classnames";
import { nextTick } from "@tarojs/taro";
import { ComponentDefaults } from "../../utils/typings";
import CollapseContext from "../collapse/context";
import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
import { useUuid } from "../../hooks/use-uuid";
import { useRefState } from "../../hooks/use-ref-state";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    title: null,
    name: '',
    expandIcon: null,
    disabled: false,
    extra: null
});
export var CollapseItem = function(props) {
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, title = _ref.title, name = _ref.name, disabled = _ref.disabled, expandIcon = _ref.expandIcon, rotate = _ref.rotate, extra = _ref.extra, style = _ref.style, className = _ref.className, rest = _object_without_properties(_ref, [
        "children",
        "title",
        "name",
        "disabled",
        "expandIcon",
        "rotate",
        "extra",
        "style",
        "className"
    ]);
    var classPrefix = 'nut-collapse-item';
    var context = useContext(CollapseContext);
    var wrapperRef = useRef(null);
    var contentRef = useRef(null);
    var uid = useUuid();
    var target = "nut-collapse-content-".concat(uid);
    var expanded = useMemo(function() {
        if (context) {
            return context.isOpen(name);
        }
        return false;
    }, [
        name,
        context.isOpen
    ]);
    var iconStyle = useMemo(function() {
        return expanded ? {
            transform: "translateY(-50%) rotate(".concat(rotate || context.rotate, "deg)")
        } : {
            transform: 'translateY(-50%)'
        };
    }, [
        expanded,
        rotate
    ]);
    var _useState = _sliced_to_array(useState(0), 2), tran = _useState[0], setTran = _useState[1];
    var _useRefState = _sliced_to_array(useRefState(0), 2), currentHeight = _useRefState[0], setCurrentHeight = _useRefState[1];
    var _useState1 = _sliced_to_array(useState(0), 2), wrapperHeight = _useState1[0], setWrapperHeight = _useState1[1];
    var updateRectHeight = function() {
        return _async_to_generator(function() {
            var res;
            return _ts_generator(this, function(_state) {
                switch(_state.label){
                    case 0:
                        return [
                            4,
                            getRectInMultiPlatform(contentRef.current, target)
                        ];
                    case 1:
                        res = _state.sent();
                        if (res === null || res === void 0 ? void 0 : res.height) {
                            setCurrentHeight(res.height);
                            setWrapperHeight(expanded ? res.height : 0);
                            nextTick(function() {
                                setTran(1);
                            });
                        }
                        return [
                            2
                        ];
                }
            });
        })();
    };
    useEffect(function() {
        nextTick(function() {
            updateRectHeight();
        });
    }, [
        children,
        expanded
    ]);
    var toggle = function() {
        var end = !expanded ? currentHeight.current : 0;
        setWrapperHeight(end);
    };
    var handleClick = function() {
        if (!disabled) {
            context.updateValue(name);
            setTimeout(function() {
                toggle();
            }, 150);
        }
    };
    var _obj;
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: classNames(classPrefix, className),
        style: style
    }, rest), /*#__PURE__*/ React.createElement(View, {
        className: classNames("".concat(classPrefix, "-header"), _define_property({}, "".concat(classPrefix, "-header-disabled"), disabled)),
        onClick: handleClick
    }, /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-title")
    }, title), /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-extra")
    }, extra), /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-icon-box")
    }, /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-icon"),
        style: iconStyle
    }, expandIcon || context.expandIcon))), /*#__PURE__*/ React.createElement(View, {
        className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content-wrapper"), true), _define_property(_obj, "".concat(classPrefix, "-content-wrapper-tran"), true), _obj)),
        style: tran ? {
            height: wrapperHeight
        } : {},
        ref: wrapperRef
    }, /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-content"),
        ref: contentRef,
        id: target
    }, /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-content-text")
    }, children))));
};
CollapseItem.displayName = 'NutCollapseItem';
