"use strict";

import { StyleSheet, TouchableWithoutFeedback, View } from "react-native";
import LinearGradient from "react-native-linear-gradient";
import Animated from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { IOAccordionRadius } from "../../core";
import { IOColors, hexToRgba } from "../../core/IOColors";
import { useAccordionAnimation } from "../../hooks/useAccordionAnimation";
import { Icon } from "../icons/Icon";
import { Body, H6 } from "../typography";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const accordionBodySpacing = 16;
const accordionIconMargin = 12;
const accordionChevronMargin = 8;

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

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