import React from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { action } from "storybook/actions";
import {
  AtlantisOverlayProvider,
  Content,
  Form,
  InputText,
} from "@jobber/components-native";
import type { FormProps } from "@jobber/components-native";

type FormStoryArgs = Pick<
  FormProps<{ firstName: string; lastName: string; nickName: string }, unknown>,
  "initialValues" | "secondaryActions"
>;

export function FormBasic(props: Partial<FormStoryArgs>) {
  return (
    <SafeAreaProvider>
      <AtlantisOverlayProvider>
        <Form
          initialValues={
            props.initialValues ?? {
              firstName: "Greatest",
              lastName: "Ever",
              nickName: "",
            }
          }
          secondaryActions={props.secondaryActions}
          onSubmit={value =>
            new Promise(resolve => {
              setTimeout(
                () =>
                  resolve(action("alert")(JSON.stringify(value, undefined))),
                1000,
              );
            })
          }
          onSubmitError={() => undefined}
          onSubmitSuccess={() => undefined}
        >
          <Content>
            <InputText
              name="firstName"
              placeholder="First name"
              validations={{ required: "Please add a first name" }}
            />
            <InputText
              name="lastName"
              placeholder="Last name"
              validations={{ required: "Please add a last name" }}
            />
            <InputText
              name="nickName"
              placeholder="Nick name"
              validations={{ required: "Please add a nick name" }}
            />
          </Content>
        </Form>
      </AtlantisOverlayProvider>
    </SafeAreaProvider>
  );
}