import { BreadcrumbNavigation } from "./index";

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

const meta: Meta<typeof BreadcrumbNavigation> = {
  title: "Contentful Blocks/Breadcrumb",
  component: BreadcrumbNavigation,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Breadcrumb navigation component used to display the user's location within the site hierarchy.",
      },
    },
  },
  args: {
    textColor: "dark",
    mobileTextColor: undefined,
    desktopTextColor: undefined,
    maxWidth: true,
    float: "desktop",
    links: [
      { buttonLabel: "Home", href: "/" },
      { buttonLabel: "Category", href: "/category" },
      { buttonLabel: "Current Page" },
    ],
  },
  argTypes: {
    links: { control: "object" },
    textColor: {
      control: "radio",
      options: ["dark", "light"],
    },
    mobileTextColor: {
      control: "radio",
      options: ["dark", "light"],
    },
    desktopTextColor: {
      control: "radio",
      options: ["dark", "light"],
    },
    maxWidth: { control: "boolean" },
    float: {
      control: "radio",
      options: ["none", "mobile", "desktop", "always"],
    },
  },
};

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

/* ---------------- Stories ---------------- */

export const Default: Story = {};

export const LightText: Story = {
  args: {
    textColor: "light",
  },
  parameters: {
    backgrounds: {
      default: "dark",
    },
  },
};

export const WithImages: Story = {
  args: {
    links: [
      {
        buttonLabel: "Home",
        href: "/",

        image: {
          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
          alt: "Home",
        },
      },
      {
        buttonLabel: "Category",
        href: "/category",

        image: {
          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
          alt: "Category",
        },
      },
      {
        buttonLabel: "Current Page",
      },
    ],
  },
};

export const SingleLink: Story = {
  args: {
    links: [{ buttonLabel: "Current Page" }],
  },
};

export const EmptyLinks: Story = {
  args: {
    links: [],
  },
};

export const FloatOnMobile: Story = {
  args: {
    float: "mobile",
  },
};

export const FloatOnDesktop: Story = {
  args: {
    float: "desktop",
  },
};

export const FloatAlways: Story = {
  args: {
    float: "always",
  },
};

export const MaxWidthDisabled: Story = {
  args: {
    maxWidth: false,
  },
};

export const MixedTextColors: Story = {
  args: {
    mobileTextColor: "light",
    desktopTextColor: "dark",
    float: "mobile",
  },
  parameters: {
    backgrounds: {
      default: "dark",
    },
  },
};