function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from "react";
import { Animated, Platform, StyleSheet, View } from "react-native";
import color from "color";
import Surface from "../Surface";
import HeaderAction from "./HeaderAction";
import HeaderBackAction from "./HeaderBackAction";
import HeaderContent from "./HeaderContent";
import { withTheme } from "../../core/theming";
import { colors } from "../../styles/tokens";
import Searchbar from "../Searchbar";
import { useHeader } from "./HeaderContext";
export const DEFAULT_APPBAR_HEIGHT = 56;
const Header = _ref => {
  let {
    children,
    dark,
    style,
    theme,
    elevated,
    safeAreaInsets,
    align,
    ...rest
  } = _ref;
  const {
    options,
    setOptions
  } = useHeader();
  const {
    backgroundColor: customBackground,
    ...restStyle
  } = StyleSheet.flatten(style) || {};
  const {
    dark: isDarkTheme
  } = theme;
  let isDark;
  const backgroundColor = customBackground ? customBackground : "transparent";
  if (typeof dark === "boolean") {
    isDark = dark;
  } else {
    isDark = backgroundColor === "transparent" ? false : typeof backgroundColor === "string" ? !color(backgroundColor).isLight() : true;
  }
  let shouldCenterContent = false;
  let shouldAddLeftSpacing = false;
  let shouldAddRightSpacing = false;
  if (Platform.OS === "ios" || align === "center") {
    let hasAppbarContent = false;
    let leftItemsCount = 0;
    let rightItemsCount = 0;
    React.Children.forEach(children, child => {
      if ( /*#__PURE__*/React.isValidElement(child)) {
        if (child.type === HeaderContent) {
          hasAppbarContent = true;
        } else if (hasAppbarContent) {
          rightItemsCount++;
        } else {
          leftItemsCount++;
        }
      }
    });
    shouldCenterContent = hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 2;
    shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
    shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
  }
  const renderAppbarContent = _ref2 => {
    let {
      children,
      isDark,
      shouldCenterContent = false,
      renderOnly,
      renderExcept
    } = _ref2;
    const content = React.Children.toArray(children).filter(child => child != null && typeof child !== "boolean").filter(child =>
    // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
    renderExcept ? !renderExcept.includes(child.type) : child).filter((child // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
    ) => renderOnly ? renderOnly.includes(child.type) : child).map((child, i) => {
      if (! /*#__PURE__*/React.isValidElement(child) || ![HeaderContent, HeaderAction, HeaderBackAction].includes(
      // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
      child.type)) {
        return child;
      }
      const props = {
        color: typeof child.props.color !== "undefined" ? child.props.color : isDark ? colors.white : colors.black
      };
      if (child.type === HeaderContent) {
        props.style = [i !== 0 && {
          marginLeft: 8
        },, shouldCenterContent && styles.centerAlignedContent, child.props.style];
      }
      return /*#__PURE__*/React.cloneElement(child, props);
    });
    return content;
  };
  const spacingStyle = styles.spacing;
  const insets = {
    paddingBottom: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.bottom,
    paddingTop: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.top,
    paddingLeft: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.left,
    paddingRight: safeAreaInsets === null || safeAreaInsets === void 0 ? void 0 : safeAreaInsets.right
  };
  const headerTranslateY = options.scrollY.interpolate({
    inputRange: [0, 56],
    outputRange: [0, -56],
    extrapolate: "clamp"
  });
  const animatedSearchbarStyle = {
    ...styles.animatedSearchBarWrapper,
    transform: [{
      scaleY: options.scrollY.interpolate({
        inputRange: [0, 56],
        outputRange: [1, 0],
        extrapolate: "clamp"
      })
    }
    // { translateY: headerTranslateY },
    ]
  };

  const searchbarStyle = options.animate && Platform.OS !== "web" ? animatedSearchbarStyle : styles.searchBarWrapper;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Surface, _extends({
    style: [{
      backgroundColor
    }, styles.appbar, {
      height: DEFAULT_APPBAR_HEIGHT
    }, insets, restStyle]
  }, rest), shouldAddLeftSpacing ? /*#__PURE__*/React.createElement(View, {
    style: spacingStyle
  }) : null, renderAppbarContent({
    children,
    isDark,
    shouldCenterContent: align === "center" || shouldCenterContent
  }), shouldAddRightSpacing ? /*#__PURE__*/React.createElement(View, {
    style: spacingStyle
  }) : null), /*#__PURE__*/React.createElement(Animated.View, {
    style: [searchbarStyle],
    pointerEvents: "box-none"
  }, /*#__PURE__*/React.createElement(Searchbar, _extends({
    placeholder: "Search"
  }, rest.searchbarOptions, {
    style: {
      marginBottom: 8
    }
  }))));
};
const styles = StyleSheet.create({
  appbar: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 4,
    width: "100%",
    marginVertical: 8
  },
  centerAlignedContent: {
    alignItems: "center"
  },
  spacing: {
    width: 48
  },
  v3Spacing: {
    width: 52
  },
  controlsRow: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  rightActionControls: {
    flexDirection: "row",
    flex: 1,
    justifyContent: "flex-end"
  },
  columnContainer: {
    flexDirection: "column",
    flex: 1,
    paddingTop: 8
  },
  centerAlignedContainer: {
    paddingTop: 0
  },
  animatedSearchBarWrapper: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1,
    paddingHorizontal: 8,
    height: 56 + 40 + 24,
    justifyContent: "flex-end",
    pointerEvents: "none"
  },
  searchBarWrapper: {
    width: "100%",
    paddingHorizontal: 8
  }
});
export default withTheme(Header);

// @component-docs ignore-next-line
const HeaderWithTheme = withTheme(Header);
// @component-docs ignore-next-line
export { HeaderWithTheme as Header };
//# sourceMappingURL=Header.js.map