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

interface InputTimeFormStoryArgs {
  name?: string;
  placeholder?: string;
}

export function InputTimeFormControlled(
  props: Partial<InputTimeFormStoryArgs>,
) {
  return (
    <SafeAreaProvider>
      <AtlantisOverlayProvider>
        <Form
          initialValues={{ startTime: new Date("2023-07-21T16:36:34.873Z") }}
          onSubmit={value =>
            new Promise(resolve => {
              setTimeout(
                () =>
                  resolve(action("alert")(JSON.stringify(value, undefined))),
                1000,
              );
            })
          }
          onSubmitError={() => undefined}
          onSubmitSuccess={() => undefined}
        >
          <Content>
            <InputTime
              name={props.name ?? "startTime"}
              placeholder={props.placeholder}
            />
          </Content>
        </Form>
      </AtlantisOverlayProvider>
    </SafeAreaProvider>
  );
}