import React, { useEffect, useState } from 'react';
import { ImageBackground, View, StyleSheet } from 'react-native';
import StackedSlides from '../../../organism/review-stacked-slides/index.native';
import ReviewCongrats from '../../../organism/review-congrats/index.native';
import ReviewHeader from '../../../organism/review-header/index.native';
import QuitPopinReview from '../../../molecule/cm-popin/index.native';
import { useTemplateContext } from '../template-context';
const createStyleSheet = theme => StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: theme.colors.white,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    width: '100%',
    height: '100%'
  }
});
const Slides = props => {
  const {
    congrats,
    header,
    stack,
    quitPopin,
    backgroundImage
  } = props;
  const {
    theme
  } = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  if (!styleSheet) {
    return null;
  }
  const source = backgroundImage;
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet.container
  }, /*#__PURE__*/React.createElement(ImageBackground, {
    style: styleSheet.backgroundImage,
    source: source,
    resizeMode: "cover"
  }), /*#__PURE__*/React.createElement(ReviewHeader, header), stack ? /*#__PURE__*/React.createElement(StackedSlides, stack) : null, congrats ? /*#__PURE__*/React.createElement(ReviewCongrats, congrats) : null, quitPopin ? /*#__PURE__*/React.createElement(QuitPopinReview, quitPopin) : null);
};
export default Slides;
//# sourceMappingURL=index.native.js.map