import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { action } from "storybook/actions";
import { InputPressable } from "@jobber/components-native";
import {
  InputPressableBasic,
  InputPressableClearable,
  InputPressableClickableSuffix,
  InputPressableDisabled,
  InputPressableInvalid,
  InputPressablePrefixOrSuffix,
} from "./docs";

const meta = {
  title: "Components/Forms and Inputs/InputPressable",
  component: InputPressable,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
} satisfies Meta<typeof InputPressable>;
export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  render: InputPressableBasic,
  args: {
    placeholder: "Placeholder",
    value: "Mango",
    onPress: () => action("alert")("👍"),
  },
};

export const PrefixOrSuffix: Story = {
  render: InputPressablePrefixOrSuffix,
  args: {
    placeholder: "Selected date",
    value: "2021-01-01",
    prefix: { icon: "calendar" },
    onPress: () => action("alert")("📅"),
  },
};

export const ClickableSuffix: Story = {
  render: InputPressableClickableSuffix,
};

export const Disabled: Story = {
  render: InputPressableDisabled,
  args: {
    placeholder: "Favourite fruit",
    disabled: true,
    value: "Mango",
  },
};

export const Invalid: Story = {
  render: InputPressableInvalid,
  args: {
    placeholder: "Favourite fruit",
    value: "Cucumber",
    invalid: "That isn't a fruit!",
  },
};

export const Clearable: Story = {
  render: InputPressableClearable,
  args: {
    placeholder: "Favourite fruit",
    clearable: "always",
  },
};