/* @flow */
import React, { PureComponent } from 'react';
import { View } from 'react-native';
// $FlowFixMe
import ImagePicker from 'react-native-image-picker';
import { connect } from 'react-redux';

import type { Context, Dispatch, Narrow } from '../types';
import { showErrorAlert } from '../utils/info';
import { IconPlus, IconLeft, IconPeople, IconImage, IconCamera } from '../common/Icons';
import AnimatedComponent from '../animation/AnimatedComponent';
import { navigateToCreateGroup, uploadImage } from '../actions';
import { getNarrowToSendTo } from '../selectors';

type Props = {
  dispatch: Dispatch,
  expanded: boolean,
  narrow: Narrow,
  onExpandContract: () => void,
};

/**
 * In 2017, Apple adopted a new standard image format, HEIF, which stands
 * for High Efficiency File Format; Apple photos are named with the '.heic'
 * extension. When an image file with the extension '.heic' is uploaded to the
 * server,the image becomes unviewable within a message list. Interestingly,
 * the `file` command line utility reports that images saved under this format
 * are JPEG files, so there's likely some pecularity with how the server handles
 * file uploads based on the extension.
 *
 * If an image file name has the '.heic' extension, and the uri of the image on a
 * mobile device has an extension for the JPEG format, fixFileNameFromUri replaces
 * that extension with '.jpeg'.
 */
export const fixFileNameFromUri = (uri: string, fileName: string): string => {
  if (/\.jpe?g$/i.test(uri)) {
    return fileName.replace(/\.heic$/i, '.jpeg');
  }
  return fileName;
};

class ComposeMenu extends PureComponent<Props> {
  context: Context;
  props: Props;

  static contextTypes = {
    styles: () => null,
  };

  handleImagePickerResponse = (response: Object) => {
    if (response.didCancel) {
      return;
    }

    if (response.error) {
      showErrorAlert(response.error, 'Error');
      return;
    }

    const { dispatch, narrow } = this.props;
    dispatch(
      uploadImage(narrow, response.uri, fixFileNameFromUri(response.uri, response.fileName)),
    );
  };

  handleImageUpload = () => {
    ImagePicker.launchImageLibrary(
      {
        quality: 1.0,
        noData: true,
        storageOptions: {
          skipBackup: true,
          path: 'images',
        },
      },
      this.handleImagePickerResponse,
    );
  };

  handleCameraCapture = () => {
    const options = {
      storageOptions: {
        cameraRoll: true,
        waitUntilSaved: true,
      },
    };

    ImagePicker.launchCamera(options, this.handleImagePickerResponse);
  };

  render() {
    const { styles } = this.context;
    const { dispatch, expanded, onExpandContract } = this.props;
    return (
      <View style={styles.composeMenu}>
        <AnimatedComponent property="width" useNativeDriver={false} visible={expanded} width={120}>
          <View style={styles.composeMenu}>
            <IconPeople
              style={styles.composeMenuButton}
              size={24}
              onPress={() => dispatch(navigateToCreateGroup())}
            />
            <IconImage
              style={styles.composeMenuButton}
              size={24}
              onPress={this.handleImageUpload}
            />
            <IconCamera
              style={styles.composeMenuButton}
              size={24}
              onPress={this.handleCameraCapture}
            />
          </View>
        </AnimatedComponent>
        {!expanded && <IconPlus style={styles.expandButton} size={24} onPress={onExpandContract} />}
        {expanded && <IconLeft style={styles.expandButton} size={24} onPress={onExpandContract} />}
      </View>
    );
  }
}

export default connect((state, props) => ({
  narrow: getNarrowToSendTo(props.narrow)(state),
}))(ComposeMenu);

@@ -694,187 +694,190 @@
 %0A * 
-In 2017, Apple adopted a new standard image format, HEIF, which stands%0A * for High Efficiency File Format; Apple photos are named with the '.heic'%0A * extension. When an imag
+Adjust the fileName to reflect the real file format, according to uri.%0A *%0A * Photos in an iPhone's camera roll (taken since iOS 11) are typically in%0A * HEIF format and hav
 e file
+names
  wit
@@ -896,487 +896,448 @@
 ion 
-'.heic' is uploaded to the%0A * server,the image becomes unviewable within a message list. Interestingly,%0A * the %60file%60 command line utility reports that images saved under this format%0A * are JPEG files, so there's likely so
+%60.HEIC%60.  When the user%0A * selects one of these photos through the image picker, the file gets%0A * automatically converted to JPEG format... but the %60fileNa
 me
+%60
  p
-ecularity with how the server handles%0A * file uploads based on the extension.%0A *%0A * If an image file name has the '.heic' extension, and the uri of the image on a%0A * mobile device has an extension for the JPEG format, fixFileNameFromUri replaces%0A * that
+roperty in%0A * the react-native-image-picker response still has the %60.HEIC%60 extension.%0A *%0A * The Zulip server will infer the file format from the filename's%0A * extension, so we need to adjust the extension to match the format. The%0A * clue we get in the image-picker response is the
  ext
@@ -1347,20 +1347,22 @@
 ion 
-with '.jpeg'
+found in %60uri%60
 .%0A *

Revise jsdoc on fixFileNameFromUri.