// @flow
import React, { useState } from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { CheckBox } from 'react-native-elements';
import ListItem from '../ListItem';
import Text from '../Text';


export default function CheckBoxGroup(props) {
  const [select, setSelect] = useState(props.selectIndex);
  return (
    <View>
      {props.data.map((item, index) => (
        <ListItem
          style={{
            borderBottomColor: '#ccc',
            height: 74,
          }}
          leftElement={() => (
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <FastImage
                style={{
                  width: 44,
                  height: 44,
                  margin: 15,
                  marginLeft: 0,
                }}
                source={{
                  uri: item.imgUrl,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.stretch}
              />
              <View>
                <Text>{item.title}</Text>
                <Text>{item.detail}</Text>
              </View>
            </View>
          )}
        >
          <CheckBox
            checked={index === select}
            onPress={() => {
              if (props.onSelect) {
                props.onSelect(index);
              }
              setSelect(index);
            }}
          />
        </ListItem>
      ))

      }
    </View>
  );
}
