import React, { Component } from 'react';
import { View, Text, Alert } from 'react-native';
import ImageBackground from 'react-native-fast-image'
import SaveViewMeter from './SaveViewMeter';
import PopupMeter from './PopupMeter';
import ImagePicker from 'react-native-image-crop-picker'
import {postMeter, postMeterImage} from '../../api/UserApi';
import moment from 'moment';
import {t} from "../../utils/i18n";

export default class WaterMeter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      numberMeter: '',
      isLoading: false,
      isVisible: false,
      image: this.props.navigation.getParam('image','no-image'),
      image_send: {},
      image_preview: this.props.navigation.getParam('image_preview', 'no-image'),
      room_id: this.props.navigation.getParam('room_id','no-id'),
      isConfirm: false
    };

    this.onTextChanged = this.onTextChanged.bind(this)
    this.onConfirm = this.onConfirm.bind(this)
    this.onOK = this.onOK.bind(this)
    this.onPopup = this.onPopup.bind(this)
    this.onTakeCamera = this.onTakeCamera.bind(this)
    //this.postImageToOCR = this.postImageToOCR.bind(this)
  }

  componentDidMount = () => {
    this.setState({
      image_send: {
        uri: this.state.image.uri,
        width: this.state.image.width,
        height: this.state.image.height
        // name: `image_meter_${moment()}.jpg`,
      }
    }/*,() => {
      //this.postImageToOCR()
    }*/)
  };

  /*postImageToOCR(){
    let param = {
      image: this.state.image_send
    }
    postMeterImage(param)
    .then(res => {
      if(res.ok){
        console.log('response post meter image ------> ',res.data)
        this.setState({
          numberMeter: res.data.amount
        })
      }
    })
  }*/

  onTextChanged(text){
    this.setState({
      numberMeter: text
    },() => {
      if(this.state.numberMeter != ''){
        this.setState({
          isConfirm: true
        })
      }else{
        this.setState({
          isConfirm: false
        })
      }
    })
  }

  onTakeCamera() {
    ImagePicker.openCamera({
      cropping: true,
      width: 300,
      height: 100,
      includeExif: true,
      includeBase64: true
    }).then(image => {
      console.log('received image', image)
      let image_meter = {
        uri: image.path,
        type: image.mime,
        name: 'image_meter.jpg',
      }
      
      let image_data = { uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height };
      this.setState({
        image_url: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
        images: null,
      }, () => {
        this.setState({
          image: this.state.image_url,
          image_send: image_data
        }/*,() => {
          //this.postImageToOCR()
        }*/)
      })
    }).catch(e => {})
  }

  onConfirm(){
    this.onPopup()
  }

  onOK() {
    if (!this.state.isLoading) {
      this.setState({
        isLoading: true,
        isVisible: false
      }, () => {
        let param = {
          room_id: this.state.room_id,
          type: 'ค่าน้ำ',
          cost: 0,
          amount: parseInt(this.state.numberMeter),
          image: this.state.image_send
        }
        //send api
        postMeter(param)
        .then(res => {
          console.log('response post meter ------> ',res.data)
          if(res.data.success) {
            Alert.alert(t('save_success'), '', [
              {
                text: t('ok'),
                onPress: () => {
                  this.setState({ isLoading: false })
                  this.props.navigation.goBack()
                }
              }
            ])
          } else {
            Alert.alert(t('save_fail_and_try'), res.data.message ? res.data.message : '', [
              {
                text: 'ok',
                onPress: () => {
                    this.setState({
                    isLoading: false,
                    isVisible: false
                    })
                }
              }
            ], { cancelable: false })
          }
        })
        .catch(err => this.setState({ isLoading: false }))
      })
    }
  }

  onPopup(){
    this.setState({
      isVisible: !this.state.isVisible
    })
  }

  render() {
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{flex:1,backgroundColor:'#EEFFD7',paddingTop:16}}>
        <View style={{flex:1,padding:16}}>
          <SaveViewMeter amount={this.state.numberMeter} TypeName={'น้ำ'} TextChanged={this.onTextChanged} Confirm={this.onConfirm} ImageUri={this.state.image_preview.uri} onTakeCamera={this.onTakeCamera} canConfirm={this.state.isConfirm}/>
        </View>
        <PopupMeter modalVisible={this.state.isVisible} onOk={!this.state.isLoading ? this.onOK : null} onCancel={this.onPopup}/>
      </ImageBackground>
    );
  }
}
