/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import { Image, View, Text, StyleSheet } from 'react-native';
import ImageEditor from '@react-native-community/image-editor';
import * as ImageManipulator from 'expo-image-manipulator';

import { Container, Button } from 'native-base';
import * as ImagePicker from 'expo-image-picker';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import HeaderCommon from '../../components/common/header';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {
}
export default class ImagePickerExample extends React.Component<Iprops> {
  state = {
    image: null,
    fontLoaded: false
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  async componentDidMount() {
    await Font.loadAsync({
      'montserrat': require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  render() {
    let { image, fontLoaded } = this.state;

    return (
      <Container>
        {fontLoaded ? [
          <HeaderCommon title='Image Cropper' toggleMenu={this.toggleMenu} key='header' />,
          <View style={styles.container} key='view'>
            <Text style={styles.paragraph}>In this app we are using ImagePicker API for picking images from your gallery.This API is pre-installed in managed apps. To use it in a bare React Native app, you have to install expo image picker plugin by this command `npm install expo-image-picker.`</Text>
            <Text style={styles.paragraph}>For Image Cropping we are using ImageEditor API.This API is preinstalled in all react-native apps</Text>
            <Button
              onPress={this._pickImage}
              style={styles.buttonCss}
            ><Text style={styles.textCssButton}>Pick</Text></Button>
            {image &&
              <Image source={{ uri: image }} style={styles.imageCss} />}
          </View>
        ] : null}

      </Container>
    );
  }

  _pickImage = async () => {
    let result: any = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });
    console.log('Result', result)
    if (result.cancelled) {
      console.log('got here');
      return;
    }
    const manipResult = await ImageManipulator.manipulateAsync(
      result.uri,
      [{ crop: { originX: 0, originY: 0, width: result.width, height: result.height } }],
    );
    console.log(manipResult);
    this.setState({ image: manipResult.uri });
    // ImageEditor.cropImage(result.uri,
    //   {
    //     offset: { x: 0, y: 0 },
    //     size: { width: result.width, height: result.height },
    //     displaySize: { width: 200, height: 200 },
    //     resizeMode: 'contain',
    //   }).then((resizedUri) => {
    //     console.log('ResizedURI==>', resizedUri);
    //     this.setState({ image: resizedUri });
    //   });

    // this gives you a rct-image-store URI or a base64 image tag that
    // you can use from ImageStore
  };
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 },
  paragraph: {
    fontFamily: 'montserrat',
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
    color: '#34495e',
  },
  textCssButton: {
    color: 'white',
    fontFamily: 'montserrat',
    width: '100%',
    textAlign: 'center'
  },
  buttonCss: {
    width: '100%'
  },
  imageCss: { width: 300, height: 225, resizeMode: 'cover' }
});