import React from 'react';
import { __ } from '../../Transforms';
import { Observer } from 'mobx-react';
import { MenuContainer, MenuItem, MenuModal } from '../../Components/Menu/Menu';
import PropTypes from 'prop-types';
import colors from '../../Themes/Colors';
import TaggunAPI, { getExpenseDataFromTaggunResult, mergeExpense } from '../../Services/TaggunAPI';
import { DocumentPicker } from 'expo';
import { logEvent } from '../../Analytics/AmplitudeAnalytics';
import {
  USER_CLICKED_MANUALLY_INPUT_EXPENSE_FROM_GALLERY,
  USER_CLICKED_SCAN_EXPENSE_FROM_EXPENSE_SCREEN,
  USER_CLICKED_UPLOAD_PDF_FROM_EXPENSE_SCREEN
} from '../../Analytics/AmplitudeConstants';
import { Platform } from "react-native";

export default class AttachToExpenseMenu extends React.Component {
  static propTypes = {
    navigation: PropTypes.shape({
      navigate: PropTypes.func.isRequired,
    }).isRequired,
    goBack: PropTypes.func,
    scanCustomCallback: PropTypes.func, // This will be called instead of opening the expense to scan if provided
    onPDFProcessStarted: PropTypes.func, // An optional callback for when the PDF processing started
    onPDFProcessStopped: PropTypes.func, // An optional callback for when the PDF processing is finished
    color: PropTypes.string, // Custom color theme (default is invoices)
    scanCustomPdf: PropTypes.func,

  };

  static defaultProps = {
    onPDFProcessStarted: () => {
    },
    onPDFProcessStopped: () => {
    },
    goBack: () => {

    },
    color: colors.expenses,
    scanCustomCallback: null,
  };

  state = {
    expense: null,
  };

  open = expense => {
    this.setState({ expense });
    this.menuModal.open();
  };

  close = () => {
    this.menuModal.close();
  };

  addPhotoScan = () => {
    logEvent(USER_CLICKED_SCAN_EXPENSE_FROM_EXPENSE_SCREEN);
    this.props.navigation.navigate('expense', {
      onClose: this.props.goBack,
      expense: this.state.expense,
      scan: true,
    });
  };

  addPhotoGalery = () => {
    logEvent(USER_CLICKED_MANUALLY_INPUT_EXPENSE_FROM_GALLERY);
    this.props.navigation.navigate('expense', {
      onClose: this.props.goBack,
      expense: this.state.expense,
      uploadToExpense: true,
    });
  };

  uploadPDF = userStore => {
    logEvent(USER_CLICKED_UPLOAD_PDF_FROM_EXPENSE_SCREEN);
    let expense = { ...this.state.expense };
    this.close();
    // Show a document picker to choose a PDF file
    setTimeout(() => DocumentPicker.getDocumentAsync()
      .then(
        doc => {
          // Use cancel the picker, stop everything
          if (doc.type === 'cancel') return;

          // Render that we are processing the PDF
          this.props.onPDFProcessStarted();

          // Upload the PDF to the server
          userStore.uploadPDF(doc.uri)
            .then(pdfUrl => {
              // Create a new empty expense
              expense.photoSrc = pdfUrl;
              TaggunAPI.getOCRFromFile(doc.uri)
                .then(result => {
                  // Indicate that we have stopped processing the PDF
                  this.props.onPDFProcessStopped();
                  expense = {
                    ...expense,
                    ...getExpenseDataFromTaggunResult(result, userStore, expense)
                  };
                  expense.isImportedFromPDF = true;

                  this.props.scanCustomPdf(expense);

                  // Open the expense form view, passing the expense data
                  this.props.navigation.navigate('expense', {
                    expense,
                    isImportedFromPDF: true, // Indicate that the expense has been imported from PDF, used for title and menus
                    onClose: this.props.goBack,
                  });
                });
            })
            .then(response => {
                //    if (response === []) {
                this.props.onPDFProcessStarted();
                // }
              }
            );
        }), 500);
        // This is mistake function, maybe modal make problem on IOS, this way is workaround resolve
  };

  render() {
    const { color } = this.props;
    return (
      <MenuModal ref={m => this.menuModal = m}>
        <MenuContainer>
          <MenuItem onPress={this.addPhotoGalery} bold color={color}>
            {__('upload_from_gallery')}
          </MenuItem>
          <MenuItem onPress={this.addPhotoScan} bold color={color}>
            {__('scan_an_expense')}
          </MenuItem>
          {/* Inject the user store for the upload PDF button */}
          <Observer
            inject={(stores) => ({ userStore: stores.userStore })}
            render={props => (
              <MenuItem
                onPress={() => this.uploadPDF(props.userStore)} bold color={color}
                        closeMenu={this.close} last>
                {__('upload_pdf')}
              </MenuItem>
            )}
          />
        </MenuContainer>
        <MenuContainer>
          <MenuItem last>
            {__('cancel')}
          </MenuItem>
        </MenuContainer>
      </MenuModal>
    );
  }
};