import React, { useState } from 'react';
import {
  StyleSheet,
  KeyboardAvoidingView,
  Text,
  View,
  Platform,
} from 'react-native';
import { TextInput, Button, Checkbox } from 'react-native-paper';


export class FormCheckBoxScreen extends React.Component {
  state = {
    check1: false,
    check2: false,
  };
  onClick(name:string, checked: boolean){
    console.log(name);
    if(name === 'check1'){
      this.setState({ check1: checked });
    }
    if(name === 'check2'){
      this.setState({ check2: checked });
    }
  }
  render() {
// console.log(this.state);
    return (
    <View style={styles.container}>
      <Text style={[styles.text_base, styles.text_top]}>Welcome, Test</Text>
      <Text style={[styles.text_base, { marginBottom: 0 }]}
      >Check1:</Text>        
      <Checkbox
        status={this.state.check1 ? 'checked' : 'unchecked'}
        onPress={() => {
          this.onClick("check1", !this.state.check1)
        }}
      />
      <Text style={[styles.text_base, { marginBottom: 0 }]}
      >Check2:</Text>        
      <Checkbox
      status={this.state.check2 ? 'checked' : 'unchecked'}
      onPress={() => {
        this.onClick("check2", !this.state.check2)
      }}
      />
    </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
  text_base: {
    fontSize: 24,
  },
  text_top: {
    color: '#00FF00',
    fontSize: 24,
    marginBottom: 8,
  }
});