// @flow
import React from 'react';
import { Text, View } from 'react-native';
import type { storiesOf as StoriesOf } from '@storybook/react';
import { Container } from '../common/';
import { Icon } from '../../src/';

const iconNames = [
  'mode-edit',
  'arrow-back',
  'add',
  'group-add',
  'person-add',
  'chat',
  'send',
  'account-circle',
  'date-range',
  'location-on',
  'close',
  'menu',
  'phone',
  'web',
  'mail-outline',
];

export default function (storiesOf: StoriesOf) {
  storiesOf('Icons', module)
    .addDecorator(story => <Container>{story()}</Container>)
    .add('material icons', () => (
      <View>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
          {iconNames.map(iconName => (
            <View style={{ width: 100, margin: 12, alignItems: 'center' }} key={iconName}>
              <Icon name={iconName} />
              <Text style={{ marginTop: 12 }}>{iconName}</Text>
            </View>
          ))}
        </View>
        <Text style={{ margin: 12, marginTop: 58 }}>
          More icon names can be searched in:{' '}
          <Text
            accessibilityRole="link"
            href="https://material.io/icons/"
            style={{ color: 'blue' }}
            target="_blank"
          >
            https://material.io/icons/
          </Text>
        </Text>
      </View>
    ));
}
