import React, { Component } from 'react';
import Camera from 'react-native-camera';
import
{
  StyleSheet,
  View,
} from 'react-native';
import QRScannerBorder from './QRScannerBorder';
/**
 * 扫描界面
 */
class QRScannerViewComponent extends Component {
  static defaultProps = {
    maskColor: '#0000004D',
    cornerColor: '#22ff00',
    borderColor: '#000000',
    rectHeight: 200,
    rectWidth: 200,
    borderWidth: 0,
    cornerBorderWidth: 4,
    cornerBorderLength: 20,
    isLoading: false,
    cornerOffsetSize: 0,
    isCornerOffset: false,
    bottomMenuHeight: 0,
    scanBarAnimateTime: 2500,
    scanBarColor: '#22ff00',
    scanBarImage: null,
    scanBarHeight: 1.5,
    scanBarMargin: 6,
    hintText: '将二维码/条码放入框内，即可自动扫描',
    hintTextStyle: { color: '#fff', fontSize: 14, backgroundColor: 'transparent' },
    hintTextPosition: 130,
    isShowScanBar: true,
  };

  constructor(props) {
    super(props);
    // 通过这句代码屏蔽 YellowBox
    console.disableYellowBox = true;
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Camera
          onBarCodeRead={this.props.onScanResultReceived}
          style={{ flex: 1 }}
        >
          {/* 绘制顶部标题栏组件 */}
          {this.props.renderTopBarView()}

          {/* 绘制扫描遮罩 */}
          <QRScannerBorder
            maskColor={this.props.maskColor}
            cornerColor={this.props.cornerColor}
            borderColor={this.props.borderColor}
            rectHeight={this.props.rectHeight}
            rectWidth={this.props.rectWidth}
            borderWidth={this.props.borderWidth}
            cornerBorderWidth={this.props.cornerBorderWidth}
            cornerBorderLength={this.props.cornerBorderLength}
            isLoading={this.props.isLoading}
            cornerOffsetSize={this.props.cornerOffsetSize}
            isCornerOffset={this.props.isCornerOffset}
            bottomMenuHeight={this.props.bottomMenuHeight}
            scanBarAnimateTime={this.props.scanBarAnimateTime}
            scanBarColor={this.props.scanBarColor}
            scanBarHeight={this.props.scanBarHeight}
            scanBarMargin={this.props.scanBarMargin}
            hintText={this.props.hintText}
            hintTextStyle={this.props.hintTextStyle}
            scanBarImage={this.props.scanBarImage}
            hintTextPosition={this.props.hintTextPosition}
            isShowScanBar={this.props.isShowScanBar}
          />

          {/* 绘制底部操作栏 */}
          <View style={[styles.buttonsContainer, this.props.bottomMenuStyle]}>
            {this.props.renderBottomMenuView()}
          </View>

        </Camera>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  buttonsContainer: {
    position: 'absolute',
    height: 100,
    bottom: 0,
    left: 0,
    right: 0,
  },
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
  },
  viewfinder: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  topLeftCorner: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
  topRightCorner: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  bottomLeftCorner: {
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  bottomRightCorner: {
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  topMask: {
    position: 'absolute',
    top: 0,
  },
  leftMask: {
    position: 'absolute',
    left: 0,
  },
  rightMask: {
    position: 'absolute',
    right: 0,
  },
  bottomMask: {
    position: 'absolute',
    bottom: 0,
  },
});
export default QRScannerViewComponent;

