import type { ComponentProps } from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { InputFieldWrapper } from "@jobber/components-native";
import {
  InputFieldWrapperBasic,
  InputFieldWrapperClearable,
  InputFieldWrapperDisabled,
  InputFieldWrapperInvalid,
  InputFieldWrapperPrefixAndSuffix,
} from "./docs";

const meta = {
  title: "Components/Private/InputFieldWrapper",
  component: InputFieldWrapper,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
} satisfies Meta<typeof InputFieldWrapper>;
export default meta;
type Story = StoryObj<typeof meta>;
type ClearableStory = StoryObj<
  Pick<ComponentProps<typeof InputFieldWrapper>, "showClearAction">
>;

export const Basic: Story = {
  render: InputFieldWrapperBasic,
  args: {
    placeholder: "Enter a value in cents",
    prefix: { icon: "invoice" },
  },
};

export const PrefixAndSuffix: Story = {
  render: InputFieldWrapperPrefixAndSuffix,
  args: {
    placeholder: "Invoice Total",
    prefix: { label: "$", icon: "invoice" },
    placeholderMode: "mini",
  },
};

export const Disabled: Story = {
  render: InputFieldWrapperDisabled,
  args: {
    placeholder: "Enter a value in cents",
    prefix: { icon: "invoice" },
    disabled: true,
  },
};

export const Invalid: Story = {
  render: InputFieldWrapperInvalid,
  args: {
    placeholder: "Enter a value in cents",
    prefix: { icon: "invoice" },
    invalid: true,
  },
};

export const Clearable: ClearableStory = {
  render: InputFieldWrapperClearable,
  args: {
    showClearAction: true,
  },
};