import axios from 'axios';
import React, { Component } from 'react';
import Camera, { FACING_MODES } from 'react-html5-camera-photo';
import { connect } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import { createEventFromBase64 } from '../api/icat/icatPlus';

class CameraPage extends Component {
  /* TODO: This should be refactored */
  componentDidMount() {
    const { investigationId } = this.props.match.params;

    if (investigationId) {
      const investigation = this.props.myInvestigations.find(
        (investigation) => investigation.id === investigationId
      );

      if (investigation) {
        // investigation was found in my Data
        this.props.setBreadCrumbs([
          {
            name: 'My Data',
            link: '/investigations',
          },
          {
            name: 'Investigations',
            link: '/investigations',
          },
          {
            badge: investigation.name,
            name: investigation.summary,
            link: `/investigation/${investigation.id}/datasets`,
          },
        ]);
      } else {
        // investion not found in my data, it can be among closed data
        const closedInvestigation = this.props.investigations.find(
          (investigation) => investigation.id === investigationId
        );

        if (closedInvestigation) {
          // investigation was found in closed data
          this.props.setBreadCrumbs([
            {
              name: 'Closed Data',
              link: '/closed',
            },
            {
              badge: closedInvestigation.name,
              name: closedInvestigation.summary,
            },
          ]);
        }
      }
    }
  }

  onTakePhoto(dataUri) {
    try {
      axios({
        method: 'post',
        url: createEventFromBase64(
          this.props.user.sessionId,
          this.props.match.params.investigationId
        ),
        data: { base64: dataUri },
      }).then(
        () => {
          alert('Uploaded Successfully');
          window.close();
        },
        (error) => {
          alert(error);
        }
      );
    } catch (e) {
      alert(e);
    }
  }

  onCameraError(error) {
    console.error('onCameraError', error);
  }

  onCameraStart() {
    console.log('onCameraStart');
  }

  onCameraStop() {
    console.log('onCameraStop');
  }

  render() {
    return (
      <Camera
        onTakePhoto={(dataUri) => {
          this.onTakePhoto(dataUri);
        }}
        onCameraError={(error) => {
          this.onCameraError(error);
        }}
        idealFacingMode={FACING_MODES.ENVIRONMENT}
        idealResolution={{
          width: 640,
          height: 480,
        }}
        imageCompression={0.97}
        isMaxResolution={false}
        isFullscreen={false}
        isImageMirror={false}
        isDisplayStartCameraError
        sizeFactor={1}
        onCameraStart={(stream) => {
          this.onCameraStart(stream);
        }}
        onCameraStop={() => {
          this.onCameraStop();
        }}
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user,
    investigations: state.investigations.data,
    myInvestigations: state.myInvestigations.data,
    releasedInvestigations: state.releasedInvestigations.data,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    setBreadCrumbs: (breadcrumbs) => dispatch(setBreadCrumbs(breadcrumbs)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(CameraPage);
