"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AccordionItem = void 0;
var _reactNative = require("react-native");
var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _context = require("../../context");
var _core = require("../../core");
var _IOColors = require("../../core/IOColors");
var _useAccordionAnimation = require("../../hooks/useAccordionAnimation");
var _Icon = require("../icons/Icon");
var _typography = require("../typography");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const accordionBodySpacing = 16;
const accordionIconMargin = 12;
const accordionChevronMargin = 8;

// Icon size
const iconSize = 24;
const AccordionItem = ({
  title,
  accessibilityLabel,
  body,
  icon
}) => {
  const theme = (0, _context.useIOTheme)();
  const {
    expanded,
    toggleAccordion,
    onBodyLayout,
    iconAnimatedStyle,
    bodyAnimatedStyle,
    bodyInnerStyle
  } = (0, _useAccordionAnimation.useAccordionAnimation)();

  // Visual attributes
  const accordionBackground = theme["appBackground-primary"];
  const accordionBorder = theme["cardBorder-default"];
  const accordionIconColor = theme["icon-decorative"];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.accordionWrapper, {
      backgroundColor: _IOColors.IOColors[accordionBackground],
      borderColor: _IOColors.IOColors[accordionBorder]
    }],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
      accessible: true,
      accessibilityRole: "button",
      accessibilityState: {
        expanded
      },
      accessibilityLabel: accessibilityLabel ?? title,
      onPress: toggleAccordion,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.textContainer,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: {
            flexDirection: "row",
            alignItems: "center",
            flexShrink: 1,
            marginRight: accordionChevronMargin
          },
          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: {
              marginRight: accordionIconMargin
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
              name: icon,
              size: iconSize,
              color: accordionIconColor
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: {
              flexShrink: 1
            },
            accessibilityElementsHidden: true,
            importantForAccessibility: "no-hide-descendants",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
              color: theme["textBody-default"],
              children: title
            })
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
          style: iconAnimatedStyle,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
            name: "chevronBottom",
            color: theme["interactiveElem-default"]
          })
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      style: bodyAnimatedStyle,
      importantForAccessibility: expanded ? "auto" : "no-hide-descendants",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: bodyInnerStyle,
        onLayout: onBodyLayout,
        children: typeof body === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Body, {
          children: body
        }) : body
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeLinearGradient.default, {
      accessible: false,
      style: {
        height: accordionBodySpacing,
        position: "absolute",
        // Place at the bottom
        bottom: 0,
        // Avoid gradient overlaps with border radius
        left: accordionBodySpacing,
        right: accordionBodySpacing
      },
      colors: [(0, _IOColors.hexToRgba)(_IOColors.IOColors[accordionBackground], 0), _IOColors.IOColors[accordionBackground]]
    })]
  });
};
exports.AccordionItem = AccordionItem;
const styles = _reactNative.StyleSheet.create({
  accordionWrapper: {
    borderWidth: 1,
    borderRadius: _core.IOAccordionRadius,
    borderCurve: "continuous"
  },
  textContainer: {
    padding: accordionBodySpacing,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }
});
//# sourceMappingURL=AccordionItem.js.map