import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { action } from "storybook/actions";
import { ActionItem } from "@jobber/components-native";
import {
  ActionItemActionAlignmentExample,
  ActionItemBasicExample,
  ActionItemInACardExample,
  ActionItemInteractiveChildrenExample,
  ActionItemMixedComponentsExample,
  ActionItemNoActionExample,
  ActionItemTitleOnlyExample,
} from "./docs";

const meta = {
  title: "Components/Layouts and Structure/ActionItem",
  component: ActionItem,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    backgrounds: {
      default: "surface background",
    },
  },
} satisfies Meta<typeof ActionItem>;
export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  render: ActionItemBasicExample,
  args: {
    icon: "work",
    onPress: () => action("alert")("👍"),
  },
};

export const InACard: Story = {
  render: ActionItemInACardExample,
  args: {
    onPress: () => action("alert")("👍"),
  },
};

export const MixedComponents: Story = {
  render: ActionItemMixedComponentsExample,
  args: {
    onPress: () => action("alert")("👍"),
    icon: "person",
    title: "Assigned to",
  },
};

export const ActionAlignment: Story = {
  render: ActionItemActionAlignmentExample,
  args: {
    onPress: () => action("alert")("👍"),
    actionIconAlignment: "flex-start",
    title: "Service Details",
  },
};

export const TitleOnly: Story = {
  render: ActionItemTitleOnlyExample,
  args: {
    title: "Add client",
    icon: "person",
    onPress: () => action("alert")("👍"),
    actionIcon: "add",
  },
};

export const InteractiveChildren: Story = {
  render: ActionItemInteractiveChildrenExample,
  args: {
    onPress: () => action("alert")("Tapped the entire action item"),
    icon: "presentation",
    actionIcon: "link",
  },
};

export const NoAction: Story = {
  render: ActionItemNoActionExample,
  args: {
    icon: "userSwitch",
    title: "Team",
  },
};