const myApiUrl = Config.urlApi;


export default class ProvidersScreen extends React.Component {

    constructor(props) {
        super(props);
        this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            isLoaded: false,
            refreshing: false,
            providersList: [],
        };
    }

    componentDidMount() {
        this.fetchData()
    }

    async fetchData() {
        try {
            const token = await AsyncStorage.getItem('appToken');
            if (token !== null) {
                fetch(`${myApiUrl}/providers?is_enabled=1`, {
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'mobile=' + Config.apiKeyMobile,
                        'X-AuthToken': token,
                    }
                })
                    .then((response) => response.json())
                    .then((responseJson) => {
                        this.setState({providersList: responseJson});
                        this.setState({isLoaded: true});
                        this.setState({refreshing: false});
                        this.fetchDataAddresses()
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            }
        } catch (error) {
            console.log('------ERROR TOKEN : ' + error);
        }
    }

    async fetchDataAddresses() {
        try {
            const token = await AsyncStorage.getItem('appToken');
            if (token !== null) {
                this.state.providersList.map((provider) => {
                    fetch(`${myApiUrl}/providers/` + provider.id + `/addresses`, {
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'mobile=' + Config.apiKeyMobile,
                            'X-AuthToken': token,
                        }
                    })
                        .then((response) => response.json())
                        .then((responseJson) => {
                            let address = responseJson;
                            console.log('PROVIDER:' + provider.name);
                            address.map((address) => {
                                console.log('CITY:' + address.city);
                                console.log('ZIP_CODE:' + address.zip_code);
                            });
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                });
            }
        } catch (error) {
            console.log('------ERROR TOKEN : ' + error);
        }
    }

    render() {
        if (!this.state.isLoaded) {
            return (
                <Container style={styles.spinner}>
                    <Spinner color='black'/>
                </Container>);
        }
        else {
            return (
                <Container>
                    <Content
                        refreshControl={<RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this.setState({refreshing: true});
                                this.fetchData();
                            }}
                            title={'Mise à jour…'}
                        />}
                    >
                        <List
                            dataSource={this.dataSource.cloneWithRows(this.state.providersList)}
                            renderRow={data =>
                                <ListItem onPress={() => console.log('Pressed!!!!!!')}>
                                    <Thumbnail source={logoImg} style={styles.thumbnail}/>
                                    <Content style={styles.contentProvider}>
                                        <Text>{data.name}</Text>
                                        <Text note>{data.ref}</Text>
                                    </Content>
                                </ListItem>}
                            renderLeftHiddenRow={data =>
                                <Button full onPress={() => this.openMap('Nancy')}>
                                    <Icon active ios="ios-pin" android="md-pin" style={{fontSize: 36}}/>
                                </Button>}
                            renderRightHiddenRow={data =>
                                <Button full success onPress={() => Linking.openURL('tel:' + data.tel1)}>
                                    <Icon active ios="ios-call" android="md-call" style={{fontSize: 36}}/>
                                </Button>}
                            leftOpenValue={75}
                            rightOpenValue={-75}
                        />
                    </Content>
                </Container>
            );
        }
    }
}