import React from "react";

import theme from "../config/themes";

import { Text, View, TouchableOpacity, FlatList, Image } from 'react-native';

export default class HomeScreen extends React.Component {
  state = {
    dataSource: [],
    debug: "deeeebug"
  };
  handleScroll = e => {
    const el = e.nativeEvent;
    this.setState({
      debug: `${el.contentOffset.y.toFixed(2)}px`
    });
  };
  handleLayout = e => {
    console.log(e.nativeEvent.layout);
  };

  async componentDidMount() {
    const res = await (await fetch("https://dev.f0ck.me/api/p?eps=54")).json();
    const items = res.items.map(e => ({
      id: e.id,
      src: `https://f0ck.me/t/${e.id}.png`
    }));

    this.setState({
      dataSource: items
    });
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: theme.background }}>
        <Image source={{ uri: theme.logo }} style={{ width: 112, height: 28, marginTop: 16 }} />
        <Text style={{ color: "#fff", fontWeight: "bold", textAlign: "right" }}>{this.state.debug}</Text>
        
        <FlatList
          data={this.state.dataSource}
          onScroll={this.handleScroll}
          onLayout={this.handleLayout}
          renderItem={({ item }) => (
            <View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
              <TouchableOpacity key={item.id} style={{ flex: 1 }} >
                <Image style={{ height: 128, width: 128 }} source={{ uri: item.src }} />
              </TouchableOpacity>
            </View>
          )}
          numColumns={4}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}