"use strict";

import { createRef, isValidElement, useLayoutEffect } from "react";
import { AccessibilityInfo, findNodeHandle, StyleSheet, View } from "react-native";
import { IOColors, IOVisualCostants } from "../../core";
import { IconButton } from "../buttons";
import { H4 } from "../typography";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: IOVisualCostants.appMarginDefault,
    paddingTop: IOVisualCostants.appMarginDefault,
    paddingBottom: IOVisualCostants.appMarginDefault,
    backgroundColor: IOColors.white
  }
});
/**
 * A header for a modals and bottom sheet.
 * @param title - The title of the modal.
 * @param onClose - The function to call when the close button is pressed.
 * @param closeAccessibilityLabel - The accessibility label for the close button.
 *
 */
export const ModalBSHeader = ({
  title,
  onClose,
  closeAccessibilityLabel
}) => {
  const headerRef = /*#__PURE__*/createRef();
  useLayoutEffect(() => {
    const reactNode = findNodeHandle(headerRef.current);
    if (reactNode !== null) {
      AccessibilityInfo.setAccessibilityFocus(reactNode);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/_jsxs(View, {
    style: styles.container,
    ref: headerRef,
    children: [/*#__PURE__*/isValidElement(title) ? title : /*#__PURE__*/_jsx(View, {
      style: {
        flex: 1
      },
      accessible: true,
      accessibilityRole: "header",
      accessibilityLabel: typeof title === "string" ? title : undefined,
      children: /*#__PURE__*/_jsx(H4, {
        children: title
      })
    }), /*#__PURE__*/_jsx(IconButton, {
      color: "neutral",
      onPress: onClose,
      icon: "closeMedium",
      accessibilityLabel: closeAccessibilityLabel
    })]
  });
};
//# sourceMappingURL=ModalBSHeader.js.map