import React from "react";

import { AnchoredBottomBanner } from "./index";

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

const meta: Meta<typeof AnchoredBottomBanner> = {
  title: "Contentful Blocks/AnchoredBottomBanner",
  component: AnchoredBottomBanner,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A fixed-position bottom banner with an optional countdown timer, icon, and CTA link.",
      },
    },
  },
  decorators: [
    Story => (
      <>
        <style>{`
          #anchored-banner .fixed > a > div > div {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: nowrap;
          }
          #anchored-banner .material-symbols-rounded {
            flex-shrink: 0;
          }
        `}</style>
        <Story />
      </>
    ),
  ],
  argTypes: {
    ctaSuffixText: { control: "text" },
    backgroundColor: {
      control: "select",
      options: ["navy", "yellow", "green", "purple", "blue", "white"],
    },
    iconName: { control: "text" },
    boxShadow: { control: "boolean" },
    ctaButtonLabel: { control: "text" },
    ctaButtonLink: { control: "text" },
    ctaButtonTarget: {
      control: "select",
      options: ["_self", "_blank"],
    },
    anchorId: { control: "text" },
    enableCountdownTimer: { control: "boolean" },
    countdownStartDateTime: {
      control: "date",
      description: "Timer becomes visible after this time",
    },
    countdownEndDateTime: {
      control: "date",
      description: "Timer counts down to this time",
    },
  },
  render: args => {
    const { countdownStartDateTime, countdownEndDateTime, ...rest } = args;
    return (
      <AnchoredBottomBanner
        {...rest}
        countdownStartDateTime={
          typeof countdownStartDateTime === "number" &&
          Number.isFinite(countdownStartDateTime)
            ? new Date(countdownStartDateTime).toISOString()
            : (countdownStartDateTime as string | undefined)
        }
        countdownEndDateTime={
          typeof countdownEndDateTime === "number" &&
          Number.isFinite(countdownEndDateTime)
            ? new Date(countdownEndDateTime).toISOString()
            : (countdownEndDateTime as string | undefined)
        }
      />
    );
  },
  args: {
    ctaSuffixText: "to order Kinetic today",
    backgroundColor: "yellow",
    iconName: "call",
    boxShadow: true,
    ctaButtonLabel: "call (866) 445-8084",
    ctaButtonLink: "tel:+1-866-445-8084",
    ctaButtonTarget: "_blank",
    anchorId: "anchored-banner",
    enableCountdownTimer: false,
    countdownStartDateTime: "2026-07-10T00:00:00.000Z",
    countdownEndDateTime: "2026-12-31T23:59:59.000Z",
  },
};

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

export const Default: Story = {};

export const WithCountdownTimer: Story = {
  args: {
    enableCountdownTimer: true,
    countdownStartDateTime: new Date("2026-07-10T00:00:00.000Z").getTime() as unknown as string,
    countdownEndDateTime: new Date("2026-12-31T23:59:59.000Z").getTime() as unknown as string,
  },
};

export const WithIcon: Story = {
  args: {
    iconName: "call",
    ctaButtonLabel: "call (866) 445-8084",
    ctaButtonLink: "tel:+1-866-445-8084",
    backgroundColor: "green",
    enableCountdownTimer: false,
  },
};

export const WithSuffixText: Story = {
  args: {
    ctaSuffixText: "to order Kinetic today",
    ctaButtonLabel: "call (866) 445-8084",
    ctaButtonLink: "tel:+1-866-445-8084",
    backgroundColor: "navy",
  },
};

export const BackgroundNavy: Story = {
  args: { backgroundColor: "navy" },
};

export const BackgroundYellow: Story = {
  args: { backgroundColor: "yellow" },
};

export const BackgroundGreen: Story = {
  args: { backgroundColor: "green" },
};

export const BackgroundPurple: Story = {
  args: { backgroundColor: "purple" },
};

export const BackgroundBlue: Story = {
  args: { backgroundColor: "blue" },
};

export const BackgroundWhite: Story = {
  args: { backgroundColor: "white", boxShadow: true },
};