import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react-native';
import { FieldArray, Formik } from 'formik';
import React from 'react';
import { FlatList, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { handleTextInput, withNextInputAutoFocusForm, withNextInputAutoFocusInput } from 'react-native-formik';
import { compose } from 'redux';

const TextField = compose(
  handleTextInput,
  withNextInputAutoFocusInput,
)(TextInput);

const NextInputAutoFocus = withNextInputAutoFocusForm(View);

const initialFormValues = { someList: ['first item', 'second item', 'third item'] };

storiesOf('fields', module).add('fieldArray', () => (
  <Formik initialValues={initialFormValues} onSubmit={action('submit')}>
    {({ handleSubmit }) => (
      <NextInputAutoFocus>
        <FieldArray name="someList">
          {() => (
            <FlatList
              data={initialFormValues.someList}
              renderItem={({ index }) => <TextField name={`someList[${index}]`} />}
              keyExtractor={(_item, index) => index.toString()}
            />
          )}
        </FieldArray>
        <TouchableOpacity onPress={handleSubmit}>
          <Text>Submit</Text>
        </TouchableOpacity>
      </NextInputAutoFocus>
    )}
  </Formik>
));