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';
import SignaturePad from 'react-native-signature-pad';

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

    this.signPad = React.createRef();
  }

  handleSignature = signature => {
    if(signature === '' || !signature){
      Alert.alert(null, t('please_sign'), [{text: 'ok'}])
    }else {
      let param = {
        id: this.state.object_id,
        image: signature
      }
      console.log('-----------> handle signature', signature);
      this.setState({ signature },() => {
        postSignatureImage(param)
          .then(res => {
            if(res.ok){
              Alert.alert(null,t('save_success'),[{text: t('ok')}])
              this.props.navigation.navigate('Object')
            }else{
              Alert.alert(null,t('save_fail_and_try'),[{text: t('ok')}])
            }
          })
      });
    }

  };

  clearSignPad = () => {
    this.setState({
      keySign: this.state.keySign + 1
    })
  };

  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}*/}
        {/*/>*/}
        <View style={{flex: 0.95, marginVertical: 10, marginHorizontal: 15, borderWidth: 1, borderColor: '#e8e8e8'}}>
          <SignaturePad ref={this.signPad} key={this.state.keySign}/>
        </View>
        <View style={{flex: 0.05, flexDirection: 'row', alignItems: 'center', marginBottom: 15, marginHorizontal: 15, justifyContent: 'space-between'}}>
          <TouchableOpacity style={{backgroundColor:'#269A21',borderRadius:5, marginRight: 10, justifyContent: 'center', alignItems: 'center', paddingVertical: 5, paddingHorizontal: 35}}
                            onPress={() => { this.clearSignPad() }}>
            <Text style={{color:'white'}}>{t('clear_signature')}</Text>
          </TouchableOpacity>

          <Text style={{ opacity: 0.4 }}>{t('signature')}</Text>

          <TouchableOpacity style={{backgroundColor:'#269A21',borderRadius:5, marginLeft: 10, justifyContent: 'center', alignItems: 'center', paddingVertical: 5, paddingHorizontal: 20}}
                            onPress={() => { this.handleSignature(this.signPad.current.state.base64DataUrl) }}>
            <Text style={{color:'white'}}>{t('save_signature')}</Text>
          </TouchableOpacity>
        </View>

      </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
  }
});
