import React from 'react';
import { Trans, useTranslation } from 'react-i18next';
import Button, { ButtonType } from '../components/buttons/Button';
import BulletPoint from '../components/inputs/BulletPoint';
import { testIdWithKey } from '../utils/testable';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { useTheme } from '../contexts/theme';
const PINExplainer = ({
  continueCreatePIN
}) => {
  const {
    t
  } = useTranslation();
  const {
    ColorPallet,
    TextTheme,
    Assets
  } = useTheme();
  const style = StyleSheet.create({
    screenContainer: {
      height: '100%',
      backgroundColor: ColorPallet.brand.primaryBackground,
      padding: 20,
      justifyContent: 'space-between'
    },
    pageContainer: {
      height: '100%',
      justifyContent: 'space-between'
    },
    imageContainer: {
      alignItems: 'center',
      marginBottom: 30
    }
  });
  const imageDisplayOptions = {
    fill: ColorPallet.notification.infoText,
    height: 150,
    width: 150
  };
  return /*#__PURE__*/React.createElement(ScrollView, {
    contentContainerStyle: {
      flexGrow: 1
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: style.screenContainer
  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
    style: TextTheme.headingTwo
  }, t('PINCreate.Explainer.PrimaryHeading')), /*#__PURE__*/React.createElement(Text, {
    style: [TextTheme.normal, {
      marginTop: 30,
      marginBottom: 30
    }]
  }, /*#__PURE__*/React.createElement(Trans, {
    i18nKey: "PINCreate.Explainer.PINReminder",
    components: {
      b: /*#__PURE__*/React.createElement(Text, {
        style: TextTheme.labelTitle
      })
    },
    t: t
  }))), /*#__PURE__*/React.createElement(View, {
    style: style.imageContainer
  }, /*#__PURE__*/React.createElement(Assets.svg.secureCheck, imageDisplayOptions)), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
    style: TextTheme.headingFour
  }, t('PINCreate.Explainer.WhyNeedPin.Header')), /*#__PURE__*/React.createElement(Text, {
    style: [TextTheme.normal, {
      marginTop: 20,
      marginBottom: 20
    }]
  }, t('PINCreate.Explainer.WhyNeedPin.Paragraph')), /*#__PURE__*/React.createElement(BulletPoint, {
    text: t('PINCreate.Explainer.WhyNeedPin.ParagraphList1'),
    textStyle: TextTheme.normal
  }), /*#__PURE__*/React.createElement(BulletPoint, {
    text: t('PINCreate.Explainer.WhyNeedPin.ParagraphList2'),
    textStyle: TextTheme.normal
  })), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: {
      paddingTop: 10
    }
  }, /*#__PURE__*/React.createElement(Button, {
    title: t('Global.Continue'),
    accessibilityLabel: t('Global.Continue'),
    testID: testIdWithKey('ContinueCreatePIN'),
    onPress: continueCreatePIN,
    buttonType: ButtonType.Primary
  })))));
};
export default PINExplainer;
//# sourceMappingURL=PINExplainer.js.map