import { useState } from "react";
import { Playground, Props } from "@slytrunk/docs";
import { Text } from "../Text";
import { Button } from "../Button";
import { View } from "../View";
import FormArray from "./FormArray";
import { Formik, Form } from "formik";

# FormArray

Form Array

<Props of={FormArray} />

## Basic usage

<Playground>
  {() => {
    const [count, setCount] = useState(3);
    return (
      <View>
        <Formik
          initialValues={{ values: ["Item 1", "Item 2", "Item 3"] }}
          onSubmit={({ values }, actions) => {
            alert(JSON.stringify(values));
          }}
        >
          {({ values: { values }, handleSubmit }) => {
            return (
              <Form>
                <FormArray
                  name="values"
                  value={values}
                  onAdd={({ push }) => {
                    setCount((val) => val + 1);
                    push(`Item ${count + 1}`);
                  }}
                  renderItem={({ item, index }) => (
                    <Text style={{ height: 32 }}>{item}</Text>
                  )}
                />
                <Button
                  variant="primary"
                  onPress={handleSubmit}
                  title="Submit"
                />
              </Form>
            );
          }}
        </Formik>
      </View>
    );
  }}
</Playground>