import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { action } from "storybook/actions";
import { Banner } from "@jobber/components-native";
import {
  BannerActionsInBannersExample,
  BannerBasicExample,
  BannerDismissibleActionExample,
  BannerDismissibleExample,
  BannerErrorDetailsExample,
  BannerErrorExample,
} from "./docs";

const meta = {
  title: "Components/Status and Feedback/Banner",
  component: Banner,
  args: {
    type: "notice",
    children: "Your import is in progress",
  },
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
} satisfies Meta<typeof Banner>;
export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  render: BannerBasicExample,
};

export const ActionsInBanners: Story = {
  render: BannerActionsInBannersExample,
  args: {
    type: "notice",
    children: "Your trial has been extended!",
    action: { label: "View Plans", onPress: () => action("alert")("Plans") },
  },
};

export const Dismissible: Story = {
  render: BannerDismissibleExample,
  args: {
    type: "notice",
    children: "Your import is in progress",
    dismissible: true,
    onDismiss: () => action("alert")("Banner dismissed"),
  },
};

export const DismissibleWithAction: Story = {
  render: BannerDismissibleActionExample,
  args: {
    type: "notice",
    children: "Your trial has been extended!",
    dismissible: true,
    action: { label: "View Plans", onPress: () => action("alert")("Plans") },
    onDismiss: () => action("alert")("Banner dismissed"),
  },
};

export const Error: Story = {
  render: BannerErrorExample,
  args: {
    type: "error",
    children: "Currently offline. Functionality is limited.",
    icon: "offline",
  },
};

export const ErrorDetails: Story = {
  render: BannerErrorDetailsExample,
  args: {
    type: "error",
    icon: "alert",
  },
};