"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeQrcodeScanner = _interopRequireDefault(require("react-native-qrcode-scanner"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _index = _interopRequireDefault(require("../../../hoc/touchable/index.native"));
var _index2 = _interopRequireDefault(require("../../../atom/text/index.native"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const HEIGHT = 280;
const WIDTH = 280;
const COLOR = '#fff';
const BORDER_RADIUS = 8;
const LINE_WIDTH = 7;
const styles = _reactNative.StyleSheet.create({
  container: {
    width: '100%',
    height: '100%'
  },
  camera: {
    width: '100%',
    height: '100%'
  },
  blurs: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    opacity: 0.6
  },
  blurTop: {
    position: 'absolute',
    backgroundColor: '#000',
    width: '100%',
    height: '35%',
    transform: [{
      translateY: -HEIGHT / 2 + LINE_WIDTH / 2
    }]
  },
  blurBottom: {
    position: 'absolute',
    backgroundColor: '#000',
    width: '100%',
    height: '65%',
    bottom: 0,
    transform: [{
      translateY: HEIGHT / 2 - LINE_WIDTH / 2
    }]
  },
  blurLeft: {
    position: 'absolute',
    backgroundColor: '#000',
    width: '50%',
    height: HEIGHT - LINE_WIDTH,
    left: 0,
    top: '35%',
    transform: [{
      translateX: -WIDTH / 2 + LINE_WIDTH / 2
    }, {
      translateY: -HEIGHT / 2 + LINE_WIDTH / 2
    }]
  },
  blurRight: {
    position: 'absolute',
    backgroundColor: '#000',
    width: '50%',
    height: HEIGHT - LINE_WIDTH,
    right: 0,
    top: '35%',
    transform: [{
      translateX: WIDTH / 2 - LINE_WIDTH / 2
    }, {
      translateY: -HEIGHT / 2 + LINE_WIDTH / 2
    }]
  }
});
const targetStyle = _reactNative.StyleSheet.create({
  target: {
    width: HEIGHT,
    height: WIDTH,
    top: '35%',
    left: '50%',
    transform: [{
      translateX: -WIDTH / 2
    }, {
      translateY: -HEIGHT / 2
    }],
    borderRadius: BORDER_RADIUS,
    position: 'absolute',
    overflow: 'hidden'
  },
  square: {
    position: 'absolute',
    width: '35%',
    height: '35%'
  },
  stroke: {
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: COLOR,
    borderRadius: BORDER_RADIUS
  }
});
const explanationsStyle = _reactNative.StyleSheet.create({
  explanations: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
    backgroundColor: '#fff',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingHorizontal: 24,
    paddingTop: 8,
    paddingBottom: 30
  },
  titleWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingVertical: 16
  },
  qrCodeIcon: {
    fill: '#000',
    height: 14,
    width: 14
  },
  titleText: {
    fontWeight: '600',
    color: '#1D1D2B',
    fontSize: 21,
    lineHeight: 24,
    letterSpacing: 0.5,
    marginLeft: 7
  },
  line: {
    flexDirection: 'row',
    paddingRight: 24,
    paddingVertical: 8
  },
  lineText: {
    fontWeight: '400',
    color: '#1D1D2B',
    fontSize: 18,
    lineHeight: 24,
    letterSpacing: 0.5,
    marginRight: 7
  },
  help: {
    flexDirection: 'row',
    marginTop: 12
  },
  titleHelp: {
    fontSize: 16,
    color: '#9999A8'
  },
  ctaHelp: {
    marginLeft: 5,
    fontSize: 16,
    letterSpacing: 0.5,
    textDecorationLine: 'underline',
    color: '#9999A8'
  }
});
const Corner = props => {
  const {
    position,
    lineLength
  } = props;
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [targetStyle.square, position]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [targetStyle.stroke, {
      height: LINE_WIDTH,
      width: lineLength
    }]
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [targetStyle.stroke, {
      width: LINE_WIDTH,
      height: lineLength
    }]
  }));
};
const Target = () => {
  const animationRef = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const lineLength = animationRef.interpolate({
    inputRange: [0, 1],
    outputRange: [0, WIDTH * 0.35]
  });
  (0, _react.useEffect)(() => {
    const animation = _reactNative.Animated.timing(animationRef, {
      toValue: 1,
      duration: 700,
      delay: 400,
      easing: _reactNative.Easing.out(_reactNative.Easing.sin),
      useNativeDriver: false
    });
    animation.start();
    // on mount only
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: targetStyle.target
  }, /*#__PURE__*/_react.default.createElement(Corner, {
    lineLength: lineLength,
    position: {
      top: 0,
      left: 0,
      transform: [{
        rotate: '0deg'
      }]
    }
  }), /*#__PURE__*/_react.default.createElement(Corner, {
    lineLength: lineLength,
    position: {
      top: 0,
      right: 0,
      transform: [{
        rotate: '90deg'
      }]
    }
  }), /*#__PURE__*/_react.default.createElement(Corner, {
    lineLength: lineLength,
    position: {
      bottom: 0,
      right: 0,
      transform: [{
        rotate: '180deg'
      }]
    }
  }), /*#__PURE__*/_react.default.createElement(Corner, {
    lineLength: lineLength,
    position: {
      bottom: 0,
      left: 0,
      transform: [{
        rotate: '270deg'
      }]
    }
  }));
};
const Explanations = props => {
  const {
    locales,
    onHelpPress
  } = props;
  const animationRef = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const animateBottom = animationRef.interpolate({
    inputRange: [0, 1],
    outputRange: [-300, 0]
  });
  (0, _react.useEffect)(() => {
    const animation = _reactNative.Animated.timing(animationRef, {
      toValue: 1,
      duration: 600,
      delay: 400,
      easing: _reactNative.Easing.out(_reactNative.Easing.sin),
      useNativeDriver: false
    });
    animation.start();

    // on mount only
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [explanationsStyle.explanations, {
      bottom: animateBottom
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: explanationsStyle.titleWrapper
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyQrCode, {
    style: explanationsStyle.qrCodeIcon
  }), /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.titleText
  }, locales.title)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: explanationsStyle.line
  }, /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.lineText
  }, "1."), /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.lineText
  }, locales.explanation1)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: explanationsStyle.line
  }, /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.lineText
  }, "2."), /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.lineText
  }, locales.explanation2)), /*#__PURE__*/_react.default.createElement(_index.default, {
    onPress: onHelpPress,
    style: explanationsStyle.help
  }, /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.titleHelp
  }, locales.titleHelp), /*#__PURE__*/_react.default.createElement(_index2.default, {
    style: explanationsStyle.ctaHelp
  }, locales.ctaHelp)));
};
const QRCodeScanner = props => {
  const {
    hasPermission,
    locales,
    onScan,
    onHelpPress
  } = props;
  const handleRead = (0, _react.useCallback)(({
    data
  }) => {
    onScan(typeof data === 'string' ? data : undefined);
    // on mount only
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const blurRef = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const blurOpacity = blurRef.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 0.7]
  });
  (0, _react.useEffect)(() => {
    const animation = _reactNative.Animated.timing(blurRef, {
      toValue: 1,
      duration: 800,
      delay: 600,
      easing: _reactNative.Easing.out(_reactNative.Easing.sin),
      useNativeDriver: false
    });
    animation.start();

    // on mount only
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.container,
    testID: "qr-code-scanner"
  }, hasPermission ? /*#__PURE__*/_react.default.createElement(_reactNativeQrcodeScanner.default, {
    fadeIn: false,
    onRead: handleRead,
    cameraStyle: styles.camera,
    cameraProps: {
      captureAudio: false
    }
  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.blurs, {
      opacity: blurOpacity
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.blurTop
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.blurBottom
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.blurLeft
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.blurRight
  })), /*#__PURE__*/_react.default.createElement(Target, null), /*#__PURE__*/_react.default.createElement(Explanations, {
    locales: locales,
    onHelpPress: onHelpPress
  }));
};
var _default = exports.default = QRCodeScanner;
//# sourceMappingURL=index.native.js.map