import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { NovaCompositionCoorpacademySearch as SearchIcon, NovaCompositionCoorpacademyCog as SettingsIcon } from '@coorpacademy/nova-icons';
import { useTemplateContext } from '../../template/app-review/template-context';
import BrandLogo from '../../molecule/brand-logo/index.native';
import Gradient from '../../atom/gradient/index.native';
import Touchable from '../../hoc/touchable/index.native';
export const HEADER_HEIGHT = 67;
const ICON_WIDTH = 20;
const createStyleSheet = theme => StyleSheet.create({
  container: {
    position: 'absolute',
    backgroundColor: theme.colors.white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: HEADER_HEIGHT,
    top: 0,
    width: '100%'
  },
  icons: {
    flexDirection: 'row'
  },
  icon: {
    marginRight: 16
  },
  logo: {
    width: 80,
    marginLeft: 16
  },
  gradient: {
    position: 'absolute',
    left: 0,
    top: HEADER_HEIGHT,
    right: 0,
    opacity: 0.3
  }
});
const Header = props => {
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    theme
  } = templateContext;
  const {
    onSearchPress,
    onSettingsPress,
    onLogoLongPress
  } = props;
  const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);

  // ------------------------------------

  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: [styleSheet.container],
    testID: "header"
  }, /*#__PURE__*/React.createElement(Gradient, {
    height: theme.spacing.tiny,
    colors: [theme.colors.gray.medium, theme.colors.gray.light],
    transparencyPosition: "bottom",
    style: styleSheet.gradient
  }), /*#__PURE__*/React.createElement(View, {
    style: styleSheet.logo
  }, /*#__PURE__*/React.createElement(Touchable, {
    testID: "header-logo",
    onLongPress: onLogoLongPress,
    analyticsID: "sign-out",
    isWithoutFeedback: true
  }, /*#__PURE__*/React.createElement(BrandLogo, {
    height: logoHeight
  }))), /*#__PURE__*/React.createElement(View, {
    style: [styleSheet.icons]
  }, /*#__PURE__*/React.createElement(Touchable, {
    testID: "search-icon",
    onPress: onSearchPress,
    analyticsID: "search-icon"
  }, /*#__PURE__*/React.createElement(SearchIcon, {
    height: ICON_WIDTH,
    width: ICON_WIDTH,
    color: theme.colors.gray.dark,
    style: styleSheet.icon
  })), /*#__PURE__*/React.createElement(Touchable, {
    testID: "settings-icon",
    onPress: onSettingsPress,
    analyticsID: "settings-icon"
  }, /*#__PURE__*/React.createElement(SettingsIcon, {
    height: ICON_WIDTH,
    width: ICON_WIDTH,
    color: theme.colors.gray.dark,
    style: styleSheet.icon
  }))));
};
export default Header;
//# sourceMappingURL=index.native.js.map