// @flow
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Text, View } from 'react-native';
import type { storiesOf as StoriesOf } from '@storybook/react';
import { Container } from '../common/';
import { Elevation } from '../../src/';

export default function (storiesOf: StoriesOf) {
  storiesOf('Elevation', module)
    .addDecorator(story => <Container>{story()}</Container>)
    .add('levels', () => (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        { (new Array(25)).fill('').map((item, index) => (
          <View style={{ width: 100, margin: 32 }} key={index}>
            <Text style={{ width: 100, marginBottom: 16, textAlign: 'center' }}>
              level {index}
            </Text>
            <Elevation level={index}>
              <View style={{ width: 100, height: 48 }} />
            </Elevation>
          </View>
        ))}
      </View>
    ));
}
