"use strict";

import React, { useContext } from 'react';
import { LinearGradient } from "../../Adapters/index.js";
import { Animated, Platform, StyleSheet, View } from 'react-native';
import { ApplicationContext } from "../../Context/index.js";
import { Opacity, Styles } from "../../Consts/index.js";
import { Image } from "../../Image/index.js";
import { SizedBox } from "../../SizedBox/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const HeaderBackground = /*#__PURE__*/React.memo(({
  surface = false,
  useShadowHeader = true,
  useGradient = true,
  animatedValue
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const opacityBackground = animatedValue?.interpolate({
    inputRange: [0, 52],
    outputRange: [0, 1],
    extrapolate: 'clamp'
  });
  const opacityGradient = animatedValue?.interpolate({
    inputRange: [0, 50],
    outputRange: [1, 0],
    extrapolate: 'clamp'
  });
  let shadowStyle = [styles.dividerHeader, {
    borderColor: theme.colors.border.default
  }];
  if (useShadowHeader) {
    shadowStyle = [styles.shadowHeader, {
      shadowColor: theme.colors.border.default
    }];
  }
  return /*#__PURE__*/_jsx(View, {
    style: Styles.flex,
    children: surface ? /*#__PURE__*/_jsx(View, {
      style: [Styles.flex, shadowStyle, {
        backgroundColor: theme.colors.background.surface
      }]
    }) : /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Animated.View, {
        style: [Styles.flex, shadowStyle, {
          backgroundColor: theme.colors.background.surface,
          opacity: opacityBackground
        }]
      }), /*#__PURE__*/_jsx(View, {
        style: styles.gradientContainer,
        children: useGradient && /*#__PURE__*/_jsx(Animated.View, {
          style: {
            opacity: opacityGradient
          },
          children: /*#__PURE__*/_jsx(LinearGradient, {
            colors: [theme.colors.primary.default + Opacity['40'], theme.colors.primary.default + Opacity['0']],
            style: styles.extendedHeader,
            children: theme.assets?.headerBackground && /*#__PURE__*/_jsx(Image, {
              source: theme.assets?.headerBackground,
              style: Styles.flex,
              loading: false
            })
          })
        })
      })]
    })
  });
});
const HeaderBanner = ({
  animatedValue,
  children,
  style,
  ...props
}) => {
  const scale = animatedValue.interpolate({
    inputRange: [-300, 0, 300],
    outputRange: [4, 1, 1],
    extrapolate: 'clamp'
  });
  const opacity = animatedValue.interpolate({
    inputRange: [0, 100],
    outputRange: [1, 0],
    extrapolate: 'clamp'
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    ...props,
    style: [styles.headerBannerImage, {
      opacity,
      transform: [{
        scale
      }]
    }, style],
    children: children
  });
};

/**
 * Header extended with background image
 * @constructor
 */
const HeaderExtendHeader = ({
  heightHeader,
  animatedValue,
  useShadowHeader = true
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const opacityBackground = animatedValue.interpolate({
    inputRange: [0, 52],
    outputRange: [0, 1],
    extrapolate: 'clamp'
  });
  const opacityGradient = animatedValue?.interpolate({
    inputRange: [0, 50],
    outputRange: [1, 0],
    extrapolate: 'clamp'
  });
  let shadowStyle = [styles.dividerHeader, {
    borderColor: theme.colors.border.default
  }];
  if (useShadowHeader) {
    shadowStyle = [styles.shadowHeader, {
      shadowColor: theme.colors.border.default
    }];
  }
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(SizedBox, {
      height: heightHeader
    }), /*#__PURE__*/_jsx(Animated.View, {
      style: [shadowStyle, styles.absoluteHeader, {
        height: heightHeader,
        backgroundColor: theme.colors.background.surface,
        opacity: opacityBackground
      }]
    }), /*#__PURE__*/_jsx(Animated.View, {
      style: {
        opacity: opacityGradient
      },
      children: /*#__PURE__*/_jsx(LinearGradient, {
        colors: [theme.colors.primary.default + Opacity['30'], theme.colors.primary.default + Opacity['0']],
        style: [styles.extendedHeader, styles.headerImage],
        children: theme.assets?.headerBackground && /*#__PURE__*/_jsx(Image, {
          source: theme.assets?.headerBackground,
          style: Styles.flex,
          loading: false
        })
      })
    })]
  });
};
const styles = StyleSheet.create({
  headerBannerImage: {
    width: '100%',
    height: 240
  },
  headerImage: {
    width: '100%',
    height: 154
  },
  shadowHeader: {
    ...Platform.select({
      ios: {
        shadowOffset: {
          width: 3,
          height: 3
        },
        shadowOpacity: 0.25,
        shadowRadius: 10
      },
      android: {
        shadowOffset: {
          width: 3,
          height: 3
        },
        shadowOpacity: 0.25,
        shadowRadius: 8,
        elevation: 8
      }
    })
  },
  gradientContainer: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    overflow: 'hidden'
  },
  extendedHeader: {
    aspectRatio: 375 / 154,
    position: 'absolute',
    width: '100%'
  },
  headerBackground: {
    width: '100%',
    height: undefined,
    position: 'absolute',
    aspectRatio: 375 / 154
  },
  dividerHeader: {
    borderBottomWidth: 1
  },
  absoluteHeader: {
    width: '100%',
    position: 'absolute',
    zIndex: 3
  }
});
export { HeaderBackground, HeaderBanner, HeaderExtendHeader };
//# sourceMappingURL=HeaderBackground.js.map