import React from 'react';
import {
    FlatList,
    Image,
    View,
    TouchableOpacity,
} from 'react-native';
import {
    RkText,
    RkCard, RkStyleSheet,
} from 'react-native-ui-kitten';
import axios from 'axios';
import {SocialBar} from '../../components';
import NavigationType from '../../config/navigation/propTypes';
import {HOST} from '../../constants'


export class Articles2 extends React.Component {
    static propTypes = {
        navigation: NavigationType.isRequired,
    };
    static navigationOptions = {
        title: 'Problems List'.toUpperCase(),
    };

    state = {
        articles: [],
        refreshing: false,
    };

    componentDidMount() {
        this.makeRemoteRequest()
    };

    makeRemoteRequest = () => {
        axios.get(`${HOST}/api/articles`)
            .then(res => {
                this.setState({
                    articles: res.data,
                    refreshing: false,
                });

            });
    };

    handleRefresh = () =>{
        this.setState({
            refreshing: true,
        }, () => {
            setTimeout(()=>{this.makeRemoteRequest()}, 500)

        })
    };

    extractItemKey = (item) => `${item.id}`;

    onItemPressed = (item) => {
        this.props.navigation.navigate('Article', {id: item.id});
    };

    renderItem = ({item}) => (
        <TouchableOpacity
            delayPressIn={70}
            activeOpacity={0.8}
            onPress={() => this.onItemPressed(item)}>
            <RkCard rkType='imgBlock' style={styles.card}>
                <Image rkCardImg source={{uri: `${item.image.toString().replace('http://127.0.0.1:8000/', '')}`}}/>
                <View rkCardImgOverlay rkCardContent style={styles.overlay}>
                    <RkText rkType='header4 inverseColor'>{item.title}</RkText>
                </View>
                <View rkCardFooter>
                    <SocialBar rkType='space' showLabel likes={item.rating} comments={item.n_comments}
                               is_solved={item.is_solved ? 'Solved' : "Doesn't solved"}/>
                </View>
            </RkCard>
        </TouchableOpacity>
    );

    render = () => (
        <FlatList
            data={this.state.articles}
            renderItem={this.renderItem}
            keyExtractor={this.extractItemKey}
            style={styles.container}
            refreshing={this.state.refreshing}
            onRefresh={this.handleRefresh}
        />
    );
}

const styles = RkStyleSheet.create(theme => ({
    container: {
        backgroundColor: theme.colors.screen.scroll,
        paddingVertical: 8,
        paddingHorizontal: 14,
    },
    card: {
        marginVertical: 8,
    },
    time: {
        marginTop: 5,
    },
}));