import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NovaLineSelectionCursorsCursorArrowTarget as TargetIcon, NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionMarkIcon, NovaSolidStatusCheckCircle2 as CheckCircle2Icon, NovaCompositionCoorpacademyVoteHeartOutline as HeartIcon } from '@coorpacademy/nova-icons';
import { useTemplateContext } from '../../template/app-review/template-context';
import Touchable from '../../hoc/touchable/index.native';
import Html from '../html/index.native';
const createStyleSheet = (brandTheme, theme) => StyleSheet.create({
  container: {
    backgroundColor: theme.colors.white,
    justifyContent: 'space-between',
    flex: 1,
    padding: 20,
    paddingTop: 20,
    paddingBottom: 100
  },
  title: {
    height: 72,
    width: 268,
    fontSize: theme.fontSize.xxlarge,
    fontWeight: theme.fontWeight.bold,
    lineHeight: 36,
    color: theme.colors.text.primary,
    marginBottom: 32
  },
  textContainer: {
    marginTop: 8
  },
  text: {
    fontSize: theme.fontSize.large,
    color: theme.colors.text.primary,
    opacity: 0.7
  },
  tips: {
    marginTop: 32,
    height: 230,
    justifyContent: 'center'
  },
  tip: {
    flexDirection: 'row',
    overflow: 'hidden',
    alignItems: 'center',
    height: 54,
    borderRadius: 8,
    backgroundColor: theme.colors.gray.extra,
    marginTop: theme.spacing.micro,
    marginBottom: theme.spacing.micro
  },
  tipText: {
    fontSize: 16,
    lineHeight: 22,
    color: theme.colors.text.primary
  },
  icon: {
    margin: 10
  },
  button: {
    height: 52,
    borderRadius: 7,
    marginBottom: 32,
    marginTop: 16,
    backgroundColor: brandTheme?.colors?.primary || theme.colors.cta,
    justifyContent: 'center'
  },
  buttonText: {
    alignSelf: 'center',
    fontWeight: theme.fontWeight.bold,
    fontSize: theme.fontSize.large,
    color: '#fff'
  }
});
const Tip = props => {
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    brandTheme,
    theme
  } = templateContext;
  const {
    Icon,
    text
  } = props;
  useEffect(() => {
    const _stylesheet = createStyleSheet(brandTheme, theme);
    setStylesheet(_stylesheet);
  }, [brandTheme, theme]);
  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet.tip
  }, /*#__PURE__*/React.createElement(Icon, {
    height: 16,
    width: 16,
    style: styleSheet.icon,
    color: theme.colors.text.primary
  }), /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.tipText
  }, text));
};
const Onboarding = props => {
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    brandTheme,
    theme,
    translations
  } = templateContext;
  const {
    onPress
  } = props;
  useEffect(() => {
    const _stylesheet = createStyleSheet(brandTheme, theme);
    setStylesheet(_stylesheet);
  }, [brandTheme, theme]);

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

  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet.container
  }, /*#__PURE__*/React.createElement(Html, {
    style: styleSheet.title
  }, translations.appReview.presentation.title), /*#__PURE__*/React.createElement(View, {
    style: styleSheet.textContainer
  }, /*#__PURE__*/React.createElement(Html, {
    style: styleSheet.text
  }, translations.appReview.presentation.text)), /*#__PURE__*/React.createElement(View, {
    style: styleSheet.tips
  }, /*#__PURE__*/React.createElement(Tip, {
    Icon: TargetIcon,
    text: translations.appReview.presentation.labelList.skills.text
  }), /*#__PURE__*/React.createElement(Tip, {
    Icon: QuestionMarkIcon,
    text: translations.appReview.presentation.labelList.questions.text
  }), /*#__PURE__*/React.createElement(Tip, {
    Icon: HeartIcon,
    text: translations.appReview.presentation.labelList.lifes.text
  }), /*#__PURE__*/React.createElement(Tip, {
    Icon: CheckCircle2Icon,
    text: translations.appReview.presentation.labelList.allright.text
  })), /*#__PURE__*/React.createElement(Touchable, {
    testID: "button-quit-revision-onboarding",
    onPress: onPress,
    analyticsID: "button-start",
    style: styleSheet.button
  }, /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.buttonText
  }, translations.ok)));
};
export default Onboarding;
//# sourceMappingURL=index.native.js.map