import React from 'react';
import {
  View,
  Image,
  StatusBar,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Camera from 'react-native-camera';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  overlay: {
    position: 'absolute',
    padding: 16,
    right: 0,
    left: 0,
    alignItems: 'center',
  },
  topOverlay: {
    top: 0,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  bottomOverlay: {
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.4)',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  captureButton: {
    padding: 15,
    backgroundColor: 'white',
    borderRadius: 40,
  },
  typeButton: {
    padding: 5,
  },
});

class CameraComponent extends React.Component {
  constructor(props) {
    super(props);
    this.camera = null;
    this.state = {
      camera: {
        aspect: Camera.constants.Aspect.fill,
        captureTarget: Camera.constants.CaptureTarget.cameraRoll,
        type: Camera.constants.Type.back,
        orientation: Camera.constants.Orientation.auto,
      },
      isRecording: false,
    };
    this.switchCam = this.switchCam.bind(this);
    this.recording = this.recording.bind(this);
  }
  get typeIcon() {
    let icon;
    const { back, front } = Camera.constants.Type;
    if (this.state.camera.type === back) {
      Icon.getImageSource('camera_front', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
      console.info(icon);
      // icon = require('./assets/ic_camera_rear_white.png');
    } else if (this.state.camera.type === front) {
      Icon.getImageSource('camera_rear', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
      // icon = require('./assets/ic_camera_front_white.png');
      console.info(icon);
    }

    return icon;
  }

  get camButton() {
    let img;
    if (!this.state.isRecording) {
      Icon.getImageSource('videocam', 36, 'white').then((source) => { console.info(source); img = source.uri; });
      // img = require('./assets/ic_videocam_36pt.png');
      console.info(img);
    } else {
      // img = require('./assets/ic_stop_36pt.png');
      Icon.getImageSource('stop', 36, 'white').then((source) => { console.info(source); img = source.uri; });
      console.info(img);
    }
    return img;
  }
  switchCam() {
    let newType;
    const { back, front } = Camera.constants.Type;

    if (this.state.camera.type === back) {
      newType = front;
    } else if (this.state.camera.type === front) {
      newType = back;
    }

    this.setState({
      camera: {
        ...this.state.camera,
        type: newType,
      },
    });
  }

  recording() {
    console.log(!this.state.isRecording);
    if (!this.state.isRecording) {
      if (this.camera) {
        this.camera.capture({ mode: Camera.constants.CaptureMode.video })
          .then(data => console.log(data))
          .catch(err => console.error(err));
        this.setState({ isRecording: true });
      }
      console.log('recording');
    } else {
      if (this.camera) {
        this.camera.stopCapture();
        this.setState({ isRecording: false });
      }
      console.log('stopped ');
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar animated hidden={false} />
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={this.state.camera.aspect}
          captureTarget={this.state.camera.captureTarget}
          type={this.state.camera.type}
          defaultTouchToFocus
          mirrorImage={false}
        />
        <View style={[styles.overlay, styles.topOverlay]}>
          <TouchableOpacity style={styles.typeButton} onPress={this.switchCam}>
            <Image source={this.typeIcon} />
          </TouchableOpacity>
        </View>
        <View style={[styles.overlay, styles.bottomOverlay]}>
          <TouchableOpacity style={styles.captureButton} onPress={this.recording}>
            <Image source={this.camButton} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
export default CameraComponent;

