import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  TouchableOpacity,
  Image,
  Slider,
  Platform,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import NaviBar from '../../components/navi-bar';
import history from '../../common/history';
import ImagePicker from 'react-native-image-crop-picker';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import SliderWidget from '../../components/slider-widget';
import LoadingView from '../../common/loading';
import Icon from 'react-native-vector-icons/FontAwesome5';
import SignatureCapture from 'react-native-signature-capture';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import CommonTextInput from '../../components/commonTextInput';
import {inject, observer} from 'mobx-react';
import {observable} from 'mobx';
import BackHeader from '../../components/backHeader';
import {width, height} from '../../common/screen';
import Size from '../../common/size';
const size = new Size();

@inject('appStore')
@observer
export default class Signature extends Component {
  @observable
  signature = true;
  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.signature = this.props.navigation.state.params.signature;
  }
  saveSign() {
    this.refs['sign'].saveImage();
  }

  resetSign() {
    this.refs['sign'].resetImage();
  }

  _onSaveEvent(result, self) {
    //result.encoded - for the base64 encoded png
    //result.pathName - for the file path name
    console.log(result);
    if (Platform.OS == 'android') {
      result.pathName = `file://${result.pathName}`;
    }
    self.store.uploadsign(result.pathName, self);
  }

  uploadimage() {
    ImagePicker.openPicker({
      width: 500,
      height: 500,
      multiple: false,
      mediaType: 'photo',
      includeBase64: true,
      cropping: true,
    }).then(image => {
      this.store.uploadsign(image.path, this);
    });
  }
  _onDragEvent() {
    // This callback will be called when the user enters signature
    console.log('dragged');
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <LoadingView visible={this.store.loading} />
        <BackHeader instance={this} back={true} />

        <SignatureCapture
          style={[{flex: 1}, styles.signature]}
          ref="sign"
          onSaveEvent={result => {
            this._onSaveEvent(result, this);
          }}
          onDragEvent={this._onDragEvent}
          saveImageFileInExtStorage={false}
          showNativeButtons={false}
          showTitleLabel={false}
          viewMode={'portrait'}
        />

        <View style={{flex: 1}}>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.saveSign();
            }}>
            <Text style={styles.buttonText}>Save</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.uploadimage();
            }}>
            <Text style={styles.buttonText}>Upload Image</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.resetSign();
            }}>
            <Text style={styles.buttonText}>Reset</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  textView: {
    color: colors.textColor,
    fontFamily: Fonts.ubuntuL,
    fontSize: size.getSize(13),
  },
  buttonText: {
    color: '#fff',
  },

  buttonView: {
    backgroundColor: colors.mainColor,
    marginRight: 30,
    marginLeft: 30,
    marginTop: 10,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 15,
    fontFamily: Fonts.ubuntu,
    color: 'white',
  },
  signature: {
    flex: 1,
    borderColor: '#000033',
    borderWidth: 1,
  },
  buttonStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    backgroundColor: '#eeeeee',
    margin: 10,
  },
  gatewayBoxStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 120,
    height: 120,
    borderColor: colors.textColor,
    borderWidth: 1,
    borderRadius: 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
});
