import { StyleSheet, Text, View,Button,FlatList,Alert,ScrollView } from 'react-native';
import { ListItem,Overlay} from 'react-native-elements';
import React from 'react';
import api from '../../config/api';
import server from '../../config/server';
import * as SecureStore from 'expo-secure-store';
import Modal from "react-native-modal";
import axios from 'axios';
class UsersList extends  React.Component {
    constructor(props){
        super(props);
        this.state = {
          users: [],
          error: '',
          isVisible: false,
          refershing: false,
          loading: false
        };
        this._onUserPress = this._onUserPress.bind(this);
      }
    async componentDidMount() {
        const accessToken = await SecureStore.getItemAsync('accessToken');
        if(accessToken) {
          axios.get(`${api.user.list}?access-token=${accessToken}`, {
            params: {
              'access-token': accessToken
            }
          })
        .then((response) => {
          const {users} = response.data;

          this.setState({ error: '', loading: false,users:users});
        })
        .catch((error) => {
            Alert.alert('Ошибка получения данных');
        });
        }else {
          this.props.navigation.navigate('Login');
        }
    }
    _onUserPress() {
        this.setState({
            isVisible:true
        });
    }
    keyExtractor = (item, index) => item.Id

    renderItem = ({ item }) => (
    <ListItem
        title={item.ShortName}
        onPress={this._onUserPress}
        subtitle={item.position}
        leftAvatar={{ source:{ uri: `${server.prefix}${server.host}/${item.photo_card}` }}}
    />
    )
    toggleModal = () => {
        this.setState({ isVisible: !this.state.isVisible });
      };
    render () {
        const {users} = this.state;

       return (
           <View>
                         <Modal isVisible={this.state.isVisible}>
            <View style={{ flex: 1 }}>
            <Button title="Hide modal" onPress={this.toggleModal} />
                <Text>I am the modal content!</Text>
            </View>
        </Modal>
           <ScrollView>

                <FlatList
                                keyExtractor={this.keyExtractor}

                                data={users}
                                renderItem={this.renderItem}
                    />
               </ScrollView>
               </View>



       )
    }
}
const styles = StyleSheet.create({
    item: {
      color: '#000000'
    },
  });
export default UsersList;