/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import {
  Image,
  View,
  ScrollView,
} from 'react-native';
import { CheckBox } from 'react-native-elements';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';

type
  Props = {
  theme : Object,
};

function checkBoxPage(props : Props) {
  const { theme } = props;
  const [checked, setChecked] = useState(false);
  const onClick = () => {
    setChecked(!checked);
  }
  return (
    <View style={Styles.container}>
      <NavigationBar
        title="选择框"
        left={<BackButton />}
      />
      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }}>
        <View style={{
          flex: 1, justifyContent: 'center', alignItems: 'center',
        }}
        >
          <View style={{ margin: 10 }}>
            <CheckBox
              title="Click Here"
              checked={checked}
              onPress={onClick}
            />
          </View>
          <View style={{ margin: 10 }}>
            <CheckBox
              center
              title="Click Here"
              checked={checked}
              onPress={onClick}
            />
          </View>
          <View style={{ margin: 10 }}>

            <CheckBox
              center
              title="Click Here"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              checked={checked}
              onPress={onClick}
            />

          </View>
          <View style={{ margin: 10 }}>

            <CheckBox
              center
              title="Click Here to Remove This Item"
              iconRight
              iconType="material"
              checkedIcon="clear"
              uncheckedIcon="add"
              checkedColor="red"
              checked={checked}
              onPress={onClick}
            />
          </View>
          <View style={{ margin: 10 }}>
            <CheckBox
              checkedIcon={<Image source={require('./checked.png')} />}
              checkedColor={theme.ThemeColor}
              uncheckedIcon={<Image source={require('./unchecked.png')} />}
              uncheckedColor={theme.ThemeColor}
              checked={checked}
              onPress={onClick}
            />
          </View>
          <View style={{ margin: 10 }}>
            <CheckBox
              checkedColor="red"
              uncheckedColor="red"
              checked={checked}
              onPress={onClick}
            />
          </View>
        </View>
      </ScrollView>
    </View>
  );
}


function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
  };
}

function propsMapping({ theme }) {
  return {
    theme,
  };
}

export default connect(propsMapping, actionMapping)(checkBoxPage);
