import React, { Component } from 'react';
import AutoResponsive  from 'autoresponsive-react-native';

import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  Dimensions
} from 'react-native';

let styles = StyleSheet.create({
  container: {
    backgroundColor: '#301711',
  },
  title: {
    paddingTop: 20,
    paddingBottom: 20,
  },
  titleText: {
    color: '#d0bbab',
    textAlign: 'center',
    fontSize: 36,
    fontWeight: 'bold',
  },
  text: {
    textAlign: 'center',
    fontSize: 60,
    fontWeight: 'bold',
    color: 'rgb(58, 45, 91)',
  }
});

const SCREEN_WIDTH = Dimensions.get('window').width;

export default class Sample extends Component {
  state = {
    array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  }

  getChildrenStyle() {
    return {
      width: (SCREEN_WIDTH - 18) / 2,
      height: parseInt(Math.random() * 20 + 12) * 10,
      backgroundColor: 'rgb(92, 67, 155)',
      paddingTop: 20,
      borderRadius: 8,
    };
  }

  getAutoResponsiveProps() {
    return {
      containerWidth: Dimensions.get('window').width,
      itemMargin: 8,
    };
  }

  renderChildren() {
    return this.state.array.map((i, key) => {
      return (
        <View style={this.getChildrenStyle()} key={key}>
          <Text style={styles.text}>{i}</Text>
        </View>
      );
    }, this);
  }

  onPressTitle = () => {
    this.setState({
      array: [...this.state.array, parseInt(Math.random() * 30)],
    });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.title}>
          <Text onPress={this.onPressTitle} style={styles.titleText}>autoresponsive</Text>
        </View>
        <AutoResponsive {...this.getAutoResponsiveProps()}>
          {this.renderChildren()}
        </AutoResponsive>
      </ScrollView>
    );
  }
}