import React, { FC, useContext } from 'react';
import { Animated, Platform, StyleSheet } from 'react-native';
import { Image } from '../../Image';
import { Colors } from '../../Consts';
import { ApplicationContext } from '../../Context';

type BackgroundImageViewProps = {
  useShadowHeader: boolean;
  headerBackground?: string;
  heightHeader: number | `${number}%`;
  opacityBackground: Animated.AnimatedInterpolation<any>;
};

const BackgroundImageView: FC<BackgroundImageViewProps> = ({
  useShadowHeader = true,
  headerBackground = null,
  heightHeader,
  opacityBackground,
}) => {
  const { theme } = useContext(ApplicationContext);
  if (Platform.OS === 'android') {
    return (
      <Animated.View
        style={[
          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
          styles.hidden,
          {
            height: heightHeader,
            backgroundColor: theme.colors.background.surface,
            opacity: opacityBackground,
          },
        ]}
      >
        {headerBackground && (
          <Image
            style={styles.headerBackground}
            source={{ uri: headerBackground }}
            loading={false}
          />
        )}
      </Animated.View>
    );
  }

  return (
    <>
      <Animated.View
        style={[
          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
          styles.nonHidden,
          {
            height: heightHeader,
            backgroundColor: theme.colors.background.surface,
            opacity: opacityBackground,
          },
        ]}
      />
      <Animated.View
        style={[
          styles.hidden,
          {
            height: heightHeader,
            opacity: opacityBackground,
          },
        ]}
      >
        {headerBackground && (
          <Image
            style={styles.headerBackground}
            source={{ uri: headerBackground }}
            loading={false}
          />
        )}
      </Animated.View>
    </>
  );
};

export default BackgroundImageView;

const styles = StyleSheet.create({
  hidden: {
    position: 'absolute',
    width: '100%',
    zIndex: 1,
    overflow: 'hidden',
  },
  nonHidden: {
    position: 'absolute',
    width: '100%',
    zIndex: 1,
  },
  headerBackground: {
    width: '100%',
    height: undefined,
    position: 'absolute',
    aspectRatio: 375 / 154,
  },
  dividerHeader: {
    borderBottomWidth: 1,
    borderColor: Colors.black_04,
  },
  shadowHeader: {
    ...Platform.select({
      ios: {
        shadowColor: Colors.black_20,
        shadowOffset: {
          width: 3,
          height: 3,
        },
        shadowOpacity: 0.12,
        shadowRadius: 10,
      },
      android: {
        shadowColor: Colors.black_17,
        shadowOffset: {
          width: 3,
          height: 3,
        },
        shadowOpacity: 0.12,
        shadowRadius: 10,
        elevation: 10,
      },
    }),
  },
});