import { EmailInputBlock } from "./index";

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

const meta: Meta<typeof EmailInputBlock> = {
  title: "Contentful Blocks/EmailInputBlock",
  component: EmailInputBlock,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Contentful EmailInputBlock component. Renders a full-width email sign-up section with a title, description, email input field, and submit button. Supports multiple background color themes and displays validation errors and a success message after valid submission.",
      },
    },
  },
  argTypes: {
    backgroundColor: {
      control: { type: "select" },
      options: ["green", "white", "yellow", "blue", "navy"],
      description: "Background color theme of the block",
    },
    title: {
      control: { type: "text" },
      description: "Main heading displayed at the top of the block",
    },
    subTitle: {
      control: { type: "text" },
      description: "Secondary heading displayed below the title",
    },
    emailInputDescription: {
      control: { type: "text" },
      description: "Descriptive paragraph shown above the email input",
    },
    inputPlaceholder: {
      control: { type: "text" },
      description: "Placeholder text shown inside the email input field",
    },
    ctaText: {
      control: { type: "text" },
      description: "Label text for the submit button",
    },
    successFeedback: {
      control: { type: "text" },
      description:
        "Message shown below the input after a successful form submission",
    },
    anchorId: {
      control: { type: "text" },
      description: "HTML id attribute on the section element, used for scroll-to-section links",
    },
    caption: {
      control: { type: "text" },
      description: "Optional disclaimer or caption text rendered below the colored block",
    },
    onSubmit: {
      action: "submitted",
      description: "Callback fired with the submitted email value when the form is valid",
    },
  },
  args: {
    title: "Stay in the know",
    emailInputDescription: "Sign up for updates, tips, and exclusive offers from Kinetic.",
    inputPlaceholder: "Enter your email here",
    ctaText: "Sign me up",
    backgroundColor: "green",
    anchorId: "email-input",
  },
};

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

// ─── Default ──────────────────────────────────────────────────────────────────

export const Default: Story = {};

// ─── Background Color Variants ────────────────────────────────────────────────

export const GreenBackground: Story = {
  args: {
    backgroundColor: "green",
  },
  parameters: {
    docs: {
      description: {
        story: "EmailInputBlock with a green background. Text is white.",
      },
    },
  },
};

export const WhiteBackground: Story = {
  args: {
    backgroundColor: "white",
  },
  parameters: {
    docs: {
      description: {
        story: "EmailInputBlock with a white background. Text is dark.",
      },
    },
  },
};

export const YellowBackground: Story = {
  args: {
    backgroundColor: "yellow",
  },
  parameters: {
    docs: {
      description: {
        story: "EmailInputBlock with a yellow background. Text is dark.",
      },
    },
  },
};

export const BlueBackground: Story = {
  args: {
    backgroundColor: "blue",
  },
  parameters: {
    docs: {
      description: {
        story: "EmailInputBlock with a blue background. Text is white.",
      },
    },
  },
};

export const NavyBackground: Story = {
  args: {
    backgroundColor: "navy",
  },
  parameters: {
    docs: {
      description: {
        story: "EmailInputBlock with a navy background. Text is white.",
      },
    },
  },
};

// ─── Success Feedback ─────────────────────────────────────────────────────────

export const WithSuccessFeedback: Story = {
  args: {
    successFeedback: "Thanks! You're signed up for updates from Kinetic.",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Demonstrates the success message after a valid email is submitted. Enter a valid email address (e.g. user@example.com) and click 'Sign me up' to see the successFeedback message appear below the input.",
      },
    },
  },
};

// ─── Validation States ────────────────────────────────────────────────────────

export const ValidationStates: Story = {
  args: {
    successFeedback: "You're all set! Welcome to Kinetic updates.",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Use this story to interactively test validation states on the canvas:\n\n" +
          "**Empty field error:** Click 'Sign me up' without entering anything → shows *'Email is required'*\n\n" +
          "**Invalid email error:** Type a malformed email (e.g. `hello` or `hello@`) and click 'Sign me up' → shows *'Invalid email address'*\n\n" +
          "**Success state:** Enter a valid email (e.g. `user@example.com`) and click 'Sign me up' → shows the success message.",
      },
    },
  },
};