import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { action } from "storybook/actions";
import { Chip } from "@jobber/components-native";
import {
  ChipAccentExample,
  ChipBasicExample,
  ChipDismissableExample,
  ChipInactiveBackgroundColorExample,
} from "./docs";

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

export const Basic: Story = {
  render: ChipBasicExample,
  args: {
    label: "Active chip",
    onPress: () => action("alert")("hi!"),
    accessibilityLabel: "Active chip",
    isActive: true,
  },
};

export const Accent: Story = {
  render: ChipAccentExample,
  args: {
    label: "Select clients",
    accent: "client",
    icon: "clients",
    onPress: () => action("alert")("Clients"),
    accessibilityLabel: "Select clients",
    isActive: true,
  },
};

export const Dismissable: Story = {
  render: ChipDismissableExample,
  args: {
    label: "Test Chip",
    accent: "client",
    icon: "clients",
    onPress: () => action("alert")("Clients"),
    accessibilityLabel: "Select clients",
    isDismissible: true,
  },
};

export const InactiveBackgroundColor: Story = {
  render: ChipInactiveBackgroundColorExample,
  args: {
    label: "Inactive Chip",
    accent: "client",
    icon: "clients",
    onPress: () => action("alert")("Clients"),
    accessibilityLabel: "Select clients",
    inactiveBackgroundColor: "surface",
  },
};