import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import Text from '../../components/Text';
import Signature from 'react-native-signature-canvas';
import {postSignatureImage} from '../../api/UserApi';
import { t } from '../../utils/i18n';

export default class SignaturePadScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signature: null,
      object_id: this.props.navigation.getParam('object_id','no-id')
    };
  }

  handleSignature = signature => {
    let param = {
      id: this.state.object_id,
      image: signature
    }
    console.log('-----------> handle signature')
    this.setState({ signature },() => {
      postSignatureImage(param)
      .then(res => {
        if(res.ok){
          Alert.alert(null,'บันทึกสำเร็จ',[{text: t('ok')}])
          this.props.navigation.navigate('Object')
        }else{
          Alert.alert(null,'บันทึกไม่สำเร็จ กรุณาลองอีกครั้ง',[{text: t('ok')}])
        }
      })
    });
  };

  render() {
    const signatureStyle = `.m-signature-pad--footer
    .button {
      background-color: #269A21;
      color: #FFF;
    }`;
    return (
      <View style={{flex:1}}>
        {/*image show signature when save*/}
        {/*<View style={styles.preview}>
          {this.state.signature ? (
              <Image
                  resizeMode={"contain"}
                  style={{ width: 335, height: 114 }}
                  source={{ uri: this.state.signature }}
              />
          ) : null}
        </View>*/}
        <Signature
            ref={(c) => { this._signature = c }}
            onOK={this.handleSignature}
            descriptionText="ลายเซ็น"
            clearText="ล้าง"
            confirmText="บันทึกรูป"
            webStyle={signatureStyle}
        />
        {/*<TouchableOpacity style={{margin:16,height: 40,backgroundColor:'#269A21',justifyContent:'center',alignItems:'center',borderRadius:5}}*/}
                      {/*onPress={() => {this._signature.onOK()}}>*/}
            {/*<Text style={{color:'white'}}>ยืนยัน</Text>*/}
          {/*</TouchableOpacity>*/}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  preview: {
    width: 335,
    height: 114,
    backgroundColor: "#F8F8F8",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 15
  },
  previewText: {
    color: "#FFF",
    fontSize: 14,
    height: 40,
    lineHeight: 40,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: "#69B2FF",
    width: 120,
    textAlign: "center",
    marginTop: 10
  }
});
