import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  TouchableOpacity,
  Image,
  Slider,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import NaviBar from '../../components/navi-bar';
import history from '../../common/history';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import SliderWidget from '../../components/slider-widget';
import ImagePicker from 'react-native-image-crop-picker';
import Icon from 'react-native-vector-icons/FontAwesome5';
import SignatureCapture from 'react-native-signature-capture';
import {colors} from '../../assets/styles/colors-theme';
import LoadingView from '../../common/loading';
import Toast, {DURATION} from 'react-native-easy-toast';
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 SignatureView extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  renderImage(signature) {
    if (signature) {
      if (this.store.loginUserData.data.member.hasOwnProperty('sign')) {
        return (
          <Image
            style={{width: 200, height: 200,backgroundColor:'white'}}
            resizeMode={'contain'}
            source={{uri: this.store.signUri}}
          />
        );
      } else {
        return <Icon name="signature" color="white" size={50} />;
      }
    } else {
      if (this.store.loginUserData.data.member.hasOwnProperty('stamp')) {
        return (
          <Image
            style={{width: 200, height: 200}}
            resizeMode={'contain'}
            source={{uri: this.store.stampUri}}
          />
        );
      } else {
        return <Icon name="stamp" color="white" size={50} />;
      }
    }
  }

  textReturn(signature) {
    if (signature) {
      if (this.store.loginUserData.data.member.hasOwnProperty('sign')) {
        return this.store.text.change;
      } else {
        return this.store.text.upload;
      }
    } else {
      if (this.store.loginUserData.data.member.hasOwnProperty('stamp')) {
        return this.store.text.change;
      } else {
        return this.store.text.upload;
      }
    }
  }

  uploadimage(){
    ImagePicker.openPicker({
      width: 500,
      height: 500,
      multiple:false,
      mediaType:'photo',
      cropping: true
    }).then(image => {
      this.store.uploadStamp(image.path,this)
    });
  }

  render() {
    console.log(this.store.stampUri)
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <LoadingView visible={this.store.loading} />
        <BackHeader instance={this} back={true} />
        <Text
          style={{
            fontFamily: Fonts.ubuntu,
            color: colors.mainColor,
            fontSize: 20,
            marginTop: 10,
            marginLeft: 10,
          }}>
          {this.store.text.signatureText}
        </Text>
        <View
          style={{
            height: 210,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'white',
            marginTop: 20,
          }}>
          <TouchableOpacity
            style={{
              width: 200,
              height: 200,
              alignItems: 'center',
              backgroundColor: colors.mainColor,
            }}
            onPress={() => {
              history.push(this, '/signature', {signature: true});
            }}>
            {this.renderImage(true)}
          </TouchableOpacity>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              history.push(this, '/signature', {signature: true});
            }}>
            <Text style={styles.buttonText}>{this.textReturn(true)}</Text>
          </TouchableHighlight>
        </View>
        <Text
          style={{
            fontFamily: Fonts.ubuntu,
            color: colors.mainColor,
            fontSize: 20,
            marginTop: 40,
            marginLeft: 10,
          }}>
          {this.store.text.corporateSeal}
        </Text>
        <View
          style={{
            height: 210,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'white',
            marginTop: 20,
          }}>
          <TouchableOpacity
            style={{
              width: 200,
              height: 200,
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: colors.mainColor,
            }}
            onPress={() => {
              this.uploadimage()
            }}>
            {this.renderImage(false)}
          </TouchableOpacity>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
             this.uploadimage()
            }}>
            <Text style={styles.buttonText}>{this.textReturn(false)}</Text>
          </TouchableHighlight>
        </View>

        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={100}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        />
      </View>
    );
  }
}

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

  buttonView: {
    backgroundColor: colors.mainColor,
    height: 30,
    width: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  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,
  },
});
