import React, { useEffect, useState } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import Modal from 'react-native-modal';
import { NovaSolidSpaceMoonRocket as MoonRocket } from '@coorpacademy/nova-icons';
import Touchable from '../../hoc/touchable/index.native';
import { useTemplateContext } from '../../template/app-review/template-context';
const createStyleSheet = theme => StyleSheet.create({
  modalView: {
    backgroundColor: '#fff',
    margin: 5,
    borderRadius: 20
  },
  textsContainer: {
    display: 'flex',
    alignItems: 'center',
    marginVertical: theme.spacing.large,
    marginHorizontal: theme.spacing.base
  },
  icon: {
    width: 76,
    height: 76
  },
  title: {
    color: '#1D1D2B',
    fontWeight: theme.fontWeight.bold,
    fontSize: 20,
    lineHeight: 28,
    marginVertical: theme.spacing.small
  },
  descriptionText: {
    color: '#515161',
    fontWeight: theme.fontWeight.semiBold,
    fontSize: 14,
    lineHeight: 20,
    textAlign: 'center'
  },
  buttonContainer: {
    marginHorizontal: theme.spacing.base
  },
  buttonText: {
    fontWeight: theme.fontWeight.bold,
    fontSize: 14,
    lineHeight: 20,
    marginVertical: 12,
    textAlign: 'center'
  },
  secondButton: {
    backgroundColor: theme.colors.cta,
    borderRadius: 7,
    marginBottom: theme.spacing.small
  },
  secondButtonText: {
    color: theme.colors.white
  },
  firstButton: {
    borderRadius: 7,
    marginBottom: theme.spacing.small
  },
  firstButtonText: {
    color: '#ED3436'
  }
});
const QuitPopinReview = props => {
  const {
    content,
    descriptionText,
    firstButton,
    secondButton
  } = props;
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    theme
  } = templateContext;
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Modal, {
    isVisible: true,
    animationIn: "fadeIn",
    animationOut: "fadeOut"
  }, /*#__PURE__*/React.createElement(View, {
    style: styleSheet.modalView
  }, /*#__PURE__*/React.createElement(View, {
    style: styleSheet.textsContainer
  }, /*#__PURE__*/React.createElement(MoonRocket, {
    style: styleSheet.icon,
    color: "#06265B"
  }), /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.title
  }, content), /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.descriptionText
  }, descriptionText)), /*#__PURE__*/React.createElement(View, {
    style: styleSheet.buttonContainer
  }, /*#__PURE__*/React.createElement(Touchable, {
    style: styleSheet.secondButton,
    onPress: secondButton?.handleOnclick,
    accessibilityLabel: secondButton?.['aria-label'],
    testID: "second-button"
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styleSheet.buttonText, styleSheet.secondButtonText]
  }, secondButton?.label)), /*#__PURE__*/React.createElement(Touchable, {
    style: styleSheet.firstButton,
    isHighlight: true,
    onPress: firstButton?.handleOnclick,
    accessibilityLabel: firstButton?.['aria-label'],
    testID: "first-button"
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styleSheet.buttonText, styleSheet.firstButtonText]
  }, firstButton?.label)))));
};
export default QuitPopinReview;
//# sourceMappingURL=index.native.js.map