import CartRetentionBanner from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof CartRetentionBanner> = {
  title: "Contentful Blocks/CartRetentionBanner",
  component: CartRetentionBanner,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A cart retention banner that displays a modal or inline popup to encourage users to complete their checkout.",
      },
    },
  },
  argTypes: {
    fields: {
      control: { type: "object" },
      description:
        "Content fields including anchorId, mainHeading, description (rich-text), and cta.buttonLabel",
    },
    isInPopupContainer: {
      control: { type: "boolean" },
      description: "Renders inline popup content without the modal wrapper",
    },
    onClose: {
      action: "onClose",
      description: "Callback when the banner is closed",
    },
    onContinueCheckout: {
      action: "onContinueCheckout",
      description: "Callback when continue checkout is clicked",
    },
    checkShouldShowBanner: {
      control: false,
      description: "Function that determines whether the banner should show",
    },
    onBannerShown: {
      action: "onBannerShown",
      description: "Callback when the banner is displayed",
    },
  },
  args: {
    fields: {
      entryTitle: "Cart Retention Banner",
      anchorId: "cart-retention-banner",
      mainHeading: "Welcome back. Let's finish your order",
      description: {
        json: {
          nodeType: "document",
          data: {},
          content: [
            {
              nodeType: "paragraph",
              data: {},
              content: [
                {
                  nodeType: "text",
                  value:
                    "You have items waiting in your cart. Complete your order now!",
                  marks: [],
                  data: {},
                },
              ],
            },
          ],
        },
      },
      cta: {
        buttonLabel: "Continue checkout",
      },
    },
    checkShouldShowBanner: () => true,
    isInPopupContainer: false,
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// Default modal variant (checkShouldShowBanner returns true to open modal)
export const Default: Story = {};

// Inline popup container variant
export const InlinePopup: Story = {
  args: {
    isInPopupContainer: true,
  },
};

// Custom heading and CTA label
export const CustomHeadingAndCta: Story = {
  args: {
    isInPopupContainer: true,
    fields: {
      entryTitle: "Cart Retention Banner",
      anchorId: "cart-retention-custom",
      mainHeading: "Don't forget your items!",
      description: {
        json: {
          nodeType: "document",
          data: {},
          content: [
            {
              nodeType: "paragraph",
              data: {},
              content: [
                {
                  nodeType: "text",
                  value: "Your cart is waiting for you. Finish checkout today.",
                  marks: [],
                  data: {},
                },
              ],
            },
          ],
        },
      },
      cta: {
        buttonLabel: "Complete my order",
      },
    },
  },
};
// With description
export const WithDescription: Story = {
  args: {
    isInPopupContainer: true,
    fields: {
      entryTitle: "Cart Retention Banner",
      anchorId: "cart-retention-with-desc",
      mainHeading: "Welcome back. Let's finish your order",
      description: {
        json: {
          nodeType: "document",
          data: {},
          content: [
            {
              nodeType: "paragraph",
              data: {},
              content: [
                {
                  nodeType: "text",
                  value: "You have items waiting in your cart. ",
                  marks: [],
                  data: {},
                },
                {
                  nodeType: "text",
                  value: "Complete your order now",
                  marks: [],
                  data: {},
                },
              ],
            },
          ],
        },
      },
      cta: {
        buttonLabel: "Continue checkout",
      },
    },
  },
};