/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import Button from 'nuke-button';
import Layout from 'nuke-layout';
import Page from 'nuke-page';

const { MultiRow, Grid, Col } = Layout;
const gridData = [];
for (let i = 0; i < 8; i++) {
  gridData.push({ name: `cell${i}` });
}

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      gridData,
    };
  }
    renderGridCell = (item, index) => (<Touchable style={styles.gridcell}>
      <Text style={styles.funTitle}>{item.name}</Text>
    </Touchable>)

    render() {
      const self = this;
      return (
        <Page title="Layout">
          <Page.Intro main="Grid" />
          <Grid style={{ height: '300rem' }}>
            <Col style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}><Text>col1</Text></Col>
            <Col style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}><Text>col2</Text></Col>
            <Col style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'green' }}><Text>col3</Text></Col>
          </Grid>
          <Page.Intro main="MultiRow" />
          <View style={styles.lineWithMargin}>
            <MultiRow dataSource={self.state.gridData} rows={4} renderCell={this.renderGridCell} />
          </View>

        </Page>
      );
    }
};
const styles = {
  lineWithMargin: {
    marginLeft: '25rem',
    marginRight: '25rem',

  },
  gridcell: {
    height: '200rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#e8e8e8',
    marginTop: '-1rem',
    marginLeft: '-1rem',
  },

  sub: {
    color: '#999999',
  },

};
render(<App />);