import React, { Component } from 'react'
import {  StyleSheet } from 'react-native'
import { NavigationActions } from 'react-navigation'
import {
  Container, Content,
  Text,
  Form,
  Item, Segment,
  Input, Spinner, Thumbnail, Icon, Button,
  Label, H1, ListItem, Radio, Right, Left
} from 'native-base'
import { connect } from 'react-redux'
import axios, { post } from 'axios'
import ImagePicker from 'react-native-image-picker'
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button'

class createKuisioner extends Component {

  constructor(){
    super();
    this.state = {
      imageSource: null,
      name: "",
      no_hp: "",
      pendidikan: "",
      q1: "",
      q2: "",
      q3: "",
      q4: "",
      q5: "",
      isValid: false
    }

    this.handleRadio = this.handleRadio.bind(this);
  }

  handleRadio(value){
    this.setState({q5 : value});
  }

  handleSend(e){
    const self = this;

    var photo = {
      uri: this.state.imageSource.uri,
      type: 'image/jpeg',
      name: 'photo.jpg',
    };

    var body = new FormData();
    body.append('authToken', 'ut8lsei984oekjjdioure45jli09g80cfd798u4');
    body.append('picture', photo);
    body.append('name', this.state.name);
    body.append('no_hp', this.state.no_hp);
    body.append('pendidikan', this.state.pendidikan);
    body.append('q1', this.state.q1);
    body.append('q2', this.state.q2);
    body.append('q3', this.state.q3);
    body.append('q4', this.state.q4);
    body.append('q5', this.state.q5);

    const config = {
      headers: { 'content-type': 'multipart/form-data' }
    }
    const url = 'http://10.0.3.2/kuisionerapi/index.php/kuisioner/post';
    axios.post(url, body, config)
      .then(function(response) {
          // console.log(response);
          alert('Kuisioner anda berhasil dikirim!');
      })
      .catch(function(error) {
          // console.log(error);
          alert('Kuisioner gagal dikirim...');
      });

  }



  handleImage(){
    // var ImagePicker = require('react-native-image-picker');

    var options = {
      title: 'Pilih Foto',
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      }
      else if(response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else {
        let source = { uri:response.uri };

        // let source = { uri: 'data:image/jpeg;base64,' + response.data };

        this.setState({
          imageSource: source,
        });

        // console.log(source);
      }

      this._checkIsValid();
    });
  }

  _checkIsValid(){
    const self = this;
    setTimeout(()=>{
      const {name, no_hp, pendidikan, q1, q2, q3, q4, q5, imageSource} = self.state;
      if(name != "" && no_hp != "" && pendidikan != "" && q1!="" && q2!="" && q3!="" && q4!="" && q5!=="" && imageSource!=null){
        self.setState({isValid: true});
      }else{
        self.setState({isValid: false});
      }

    }, 1000);

    console.log(self.state.q5);

  }




  render() {
    const {isValid} = this.state;

    return (
      <Container style={styles.container} >
        <Content>
        <Form>

          <ListItem itemDivider>
            <Text>Biodata Anda</Text>
          </ListItem>

          <Item stackedLabel>
            <Label>Nama</Label>
            <Input onChangeText={(text)=> {
              this.setState({name: text});
              this._checkIsValid();
            }}/>
          </Item>

          <Item stackedLabel>
            <Label>No. Handphone / Whatsapp</Label>
            <Input onChangeText={(text)=> {
              this.setState({no_hp: text});
              this._checkIsValid();
            }}/>
          </Item>

          <Item stackedLabel>
            <Label>Pendidikan Terakhir</Label>
            <Input onChangeText={(text)=> {
              this.setState({pendidikan: text});
              this._checkIsValid();
            }}/>
          </Item>

          <ListItem>
            <Label>Foto Selfie Anda</Label>
          </ListItem>

          <ListItem>
            <Button light onPress={()=> this.handleImage()}>
              <Icon name='image' />
            </Button>

            <Thumbnail square
              source={this.state.imageSource} style={{ width: 200, height: 200 }}
            />
          </ListItem>



          <ListItem itemDivider>
            <Text>Jawab Pertanyaan Berikut</Text>
          </ListItem>

          <Item stackedLabel>
            <Label>1. Siapa Nama Presiden Indonesia?</Label>
            <Input onChangeText={(text)=> {
              this.setState({q1: text});
              this._checkIsValid();
            }}/>
          </Item>

          <Item stackedLabel>
            <Label>2. Siapa Nama Gubernur Kalimantan Selatan?</Label>
            <Input onChangeText={(text)=> {
              this.setState({q2: text});
              this._checkIsValid();
            }}/>
          </Item>

          <Item stackedLabel>
            <Label>3. Siapa Nama Bupati Kabupaten Banjar?</Label>
            <Input onChangeText={(text)=> {
              this.setState({q3: text});
              this._checkIsValid();
            }}/>
          </Item>

          <Item stackedLabel>
            <Label>4. Siapa Nama Kepala Dinas Kominfo Kab. Banjar?</Label>
            <Input onChangeText={(text)=> {
              this.setState({q4: text});
              this._checkIsValid();
            }}/>
          </Item>

          <ListItem>
            <Label>5. Apakah anda setuju radikalisme dan hoax?</Label>
          </ListItem>

          <ListItem
            onPress={() => {
              // this.setState({ q5: 1 });
              this.handleRadio(1);
              this.handleRadio(1);
              this._checkIsValid();
            }}
          >
            <Left>
              <Text>Setuju</Text>
            </Left>
            <Right>
              <Radio selected={this.state.q5 === 1 }/>
            </Right>
          </ListItem>

          <ListItem
            onPress={() => {
              // this.setState({ q5: 0 });
              this.handleRadio(0);
              this.handleRadio(0);
              this._checkIsValid();
            }}
          >
            <Left>
              <Text>Tidak Setuju</Text>
            </Left>
            <Right>
              <Radio selected={this.state.q5 === 0 }/>
            </Right>
          </ListItem>




          {
            isValid?
            (
              <Button block info onPress={()=> this.handleSend()}>
                <Text>Kirim</Text>
              </Button>
            ):
            (
              <Button block light>
                <Text style={{color: '#D0D0D0'}}>Kirim</Text>
              </Button>
            )
          }

        </Form>
        </Content>
      </Container>
    )
  }
}

export default connect()(createKuisioner);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  }
})