import type { ComponentProps } from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { action } from "storybook/actions";
import { Form } from "@jobber/components-native";
import { FormBasic } from "./docs";

const meta = {
  title: "Components/Forms and Inputs/Form",
  component: Form,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
} satisfies Meta<typeof Form>;
export default meta;

interface NativeFormStoryArgs {
  initialValues?: {
    firstName: string;
    lastName: string;
    nickName: string;
  };
  secondaryActions?: ComponentProps<typeof Form>["secondaryActions"];
}
type Story = StoryObj<NativeFormStoryArgs>;

export const Basic: Story = {
  render: FormBasic,
  args: {
    initialValues: {
      firstName: "Greatest",
      lastName: "Ever",
      nickName: "",
    },
  },
};

export const WithSecondaryActions: Story = {
  render: FormBasic,
  args: {
    initialValues: {
      firstName: "Test",
      lastName: "Secondary",
      nickName: "Actions!",
    },
    secondaryActions: [
      {
        label: "Base",
        handleAction: {
          onSubmit: () =>
            new Promise(resolve => {
              setTimeout(() => resolve(action("alert")("Base Case")), 1000);
            }),
        },
        icon: "email",
      },
      {
        label: "Destructive Delete",
        handleAction: {
          onSubmit: () =>
            new Promise(resolve => {
              setTimeout(() => resolve(action("alert")("Base Case")), 1000);
            }),
        },
        icon: "trash",
        destructive: true,
      },
    ],
  },
};