import type React from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { action } from "storybook/actions";
import { ButtonGroup } from "@jobber/components-native";
import {
  ButtonGroupBasicExample,
  ButtonGroupPrimaryExample,
  ButtonGroupSecondaryExample,
} from "./docs";

const meta = {
  title: "Components/Actions/ButtonGroup",
  component: ButtonGroup,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
  subcomponents: {
    "ButtonGroup.PrimaryAction": ButtonGroup.PrimaryAction,
    "ButtonGroup.SecondaryAction": ButtonGroup.SecondaryAction,
  },
} satisfies Meta<typeof ButtonGroup>;
export default meta;

type ButtonGroupStory = StoryObj<
  Partial<React.ComponentProps<typeof ButtonGroup>>
>;
type PrimaryActionStory = StoryObj<
  React.ComponentProps<typeof ButtonGroup.PrimaryAction>
>;
type SecondaryActionStory = StoryObj<
  React.ComponentProps<typeof ButtonGroup.SecondaryAction>
>;

export const Basic: ButtonGroupStory = {
  render: ButtonGroupBasicExample,
  args: {},
};

export const Primary: PrimaryActionStory = {
  render: ButtonGroupPrimaryExample,
  args: {
    label: "Create",
    icon: "plus",
    onPress: () => action("console.log")("create"),
  },
};

export const Secondary: SecondaryActionStory = {
  render: ButtonGroupSecondaryExample,
  args: {
    label: "Create",
    icon: "plus",
    onPress: () => action("console.log")("create"),
  },
};