import { commonProps } from "../../utils/storybook";
import { Flex } from "../flex";
import { Text } from "../text";
import { Link } from "../link";
import { NavigationMenu } from ".";
import type { StoryObj, Meta } from "@storybook/react";

/**
 * A collection of links for navigating websites.
 */
const meta: Meta<typeof NavigationMenu> = {
  title: "NavigationMenu",
  component: NavigationMenu,
  tags: ["autodocs"],
  args: {
    items: [
      {
        label: "Content",
        content: (
          <Flex direction="column">
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Items</Text>
            </Link>
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Collections</Text>
            </Link>
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Projects</Text>
            </Link>
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Users</Text>
            </Link>
          </Flex>
        ),
      },
      {
        label: (
          <Link
            css={{ color: "$light-off-white", textDecoration: "none !important" }}
            href="google.com"
          >
            Content w/ Link
          </Link>
        ),
        content: (
          <Flex direction="column">
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Collections</Text>
            </Link>
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Projects</Text>
            </Link>
            <Link css={{ color: "$light-off-white", textDecoration: "none" }} href="">
              <Text variant="body3">Users</Text>
            </Link>
          </Flex>
        ),
      },
      {
        label: (
          <Link
            css={{ color: "$light-off-white", textDecoration: "none !important" }}
            href="google.com"
          >
            Link
          </Link>
        ),
      },
    ],
  },
  argTypes: {
    items: {
      description: "Sets the items that are rendered in the menu.",
    },
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof NavigationMenu>;

export const Default: Story = {
  render: (args) => <NavigationMenu {...args} />,
};

export const OnlyLinks: Story = {
  render: () => (
    <NavigationMenu
      items={[
        {
          label: (
            <Link variant="ghost" css={{ color: "$light-off-white" }} href="https://chromaway.com/">
              Chromaway
            </Link>
          ),
        },
        {
          label: (
            <Link variant="ghost" css={{ color: "$light-off-white" }} href="https://chromia.com/">
              Chromia
            </Link>
          ),
        },
        {
          label: (
            <Link
              variant="ghost"
              css={{ color: "$light-off-white" }}
              href="https://docs.chromia.com/"
            >
              Docs
            </Link>
          ),
        },
      ]}
    />
  ),
};