import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    FlatList,
    List,
    ListItem
} from 'react-native';
import {
    Container,
    Header,
    Item,
    Input,
    Button,
    StyleProvider,
    Icon,
    Body,
    Right,
    StatusBar,
    Card,
    CardItem,
    CheckBox,
    Left
} from 'native-base';



export default class UserList extends Component {


    constructor(props) {
        super(props);
        const {params} = this.props.navigation.state;
        this.state = {
            data: [],
            SelectedUserList: params.selectedUserID.slice(),
            SelectedUserListName: [],
            renderedListData: [],
            IsInArray: true,
            selectedUserID: params.selectedUserID,
            IsSelected: (new Map(): Map<string, boolean>)
        }
        console.log("selectedUserID" + JSON.stringify(this.state.selectedUserID))
        console.log("selectedCropName" + JSON.stringify(params.SelectedUserListName))
    }

    press = (hey) => {
        console.log('Press:'+this.state.SelectedUserList)
        this.state.renderedListData.map((item) => {
            if (item.id === hey.id) {
                item.check = !item.check
                if (item.check === true) {
                    this.state.SelectedUserList.push(item.id);
                    this.state.SelectedUserListName.push(item.name);
                    console.log('selected:' + item.name);
                    console.log(this.state.SelectedUserListName.includes(item.id))
                } else if (item.check === false) {
                    const i = this.state.SelectedUserList.indexOf(item)
                    const j = this.state.SelectedUserListName.indexOf(item)
                    if (1 != -1) {
                        this.state.SelectedUserList.splice(i, 1)
                        this.state.SelectedUserListName.splice(j, 1)
                        console.log('unselect:' + item.name)
                        return this.state.SelectedUserList
                    }
                }
            }
        })
        this.setState({data: this.state.data})
    }




    componentDidMount() {
        //Fetch Data From API
        ...
    }

    render() {
        return (
                    <View style={styles.container}>
                        <View style={styles.storyContainer}>
                            <FlatList data={this.state.renderedListData} keyExtractor={item => item.id.toString()}
                                      extraData={this.state}
                                      renderItem={({item}) => {
                                          return <TouchableOpacity style={{
                                              flexDirection: 'row',
                                              padding: 2
                                          }} onPress={() => {
                                              this.press(item)
                                          }}>
                                              <View style={{
                                                  flex: 3,
                                                  alignItems: 'flex-start',
                                                  justifyContent: 'center'
                                              }}>
                                                  {<Card
                                                      style={{
                                                          width: '100%',
                                                          height: 80,
                                                          alignItems: 'center'
                                                      }}>
                                                      <CardItem style={{height: '100%'}}>
                                                          <Left>
                                                              <View style={{
                                                                  flex: 1,
                                                                  flexDirection: 'row',
                                                                  alignItems: 'center'
                                                              }}>
                                                                  <CheckBox checked={(this.state.selectedUserID.includes(item.id) || item.check ) ? true : false}
                                                                            style={{marginRight: 15}}/>
                                                                  <View>
                                                                      <Text style={{
                                                                          color: "#24466B",
                                                                          fontSize: 16
                                                                      }}>
                                                                          {item.name}
                                                                      </Text>
                                                                  </View>
                                                              </View>
                                                          </Left>
                                                      </CardItem>
                                                  </Card>}
                                              </View>
                                          </TouchableOpacity>
                                      }}/>
                        </View>
                    </View>
        )
    }
};

SelectedUserList: params.selectedUserID.slice()