import type { Meta, StoryObj } from "@storybook/react";
import { Home, MoreHorizontal, Settings } from "lucide-react";
import { Sidebar } from ".";

import { InternalLink } from "../Link";
import "./story.css";

// Define the metadata for the Sidebar component
const meta: Meta<typeof Sidebar> = {
  title: "Components/Sidebar",
  component: Sidebar,
  tags: ["autodocs"],
  argTypes: {
    side: {
      control: "select",
      options: ["left", "right"],
      description: "Position of the sidebar",
    },
    variant: {
      control: "select",
      options: ["sidebar", "floating", "inset"],
      description: "Visual style of the sidebar",
    },
    collapsible: {
      control: "select",
      options: ["offcanvas", "icon", "none"],
      description: "Collapsible behavior of the sidebar",
    },
  },
};

export default meta;

type Story = StoryObj<typeof Sidebar>;

// Default story showcasing the Sidebar components together
// Default story showcasing the Sidebar components together
const Template: Story = (args) => (
  <Sidebar data-component="Sidebar$Brevity" {...args}>
    {/* Main Sidebar component with configurable props */}
    <Sidebar.Sidebar data-component="Sidebar$Brevity.Sidebar" {...args}>
      <Sidebar.Sidebar.Header data-component="Sidebar$Brevity.Sidebar.Header">
        <h1>Sidebar</h1>
      </Sidebar.Sidebar.Header>
      <Sidebar.Sidebar.Content data-component="Sidebar$Brevity.Sidebar.Content">
        {/* Navigation Group */}
        <Sidebar.Sidebar.Group data-component="Sidebar$Brevity.Sidebar.Group">
          <Sidebar.Sidebar.Group.GroupLabel data-component="Sidebar$Brevity.Sidebar.Group.GroupLabel">
            Navigation
          </Sidebar.Sidebar.Group.GroupLabel>
          <Sidebar.Sidebar.Group.GroupAction data-component="Sidebar$Brevity.Sidebar.Group.GroupAction">
            <MoreHorizontal />
          </Sidebar.Sidebar.Group.GroupAction>
          <Sidebar.Sidebar.Group.GroupContent data-component="Sidebar$Brevity.Sidebar.Group.GroupContent">
            <Sidebar.Sidebar.Menu data-component="Sidebar$Brevity.Sidebar.Menu">
              <Sidebar.Sidebar.Menu.MenuItem data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem">
                <Sidebar.Sidebar.Menu.MenuItem.MenuButton
                  tooltip="Home"
                  data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton"
                >
                  <Home />
                  <span>Home</span>
                </Sidebar.Sidebar.Menu.MenuItem.MenuButton>
                <Sidebar.Sidebar.Menu.MenuItem.MenuAction data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuAction">
                  <MoreHorizontal />
                </Sidebar.Sidebar.Menu.MenuItem.MenuAction>
              </Sidebar.Sidebar.Menu.MenuItem>
              <Sidebar.Sidebar.Menu.MenuItem data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem">
                <Sidebar.Sidebar.Menu.MenuItem.MenuButton data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton">
                  <InternalLink
                    href="/about"
                    data-component="InternalLink$Brevity"
                  >
                    <Settings />
                    <span>Settings</span>
                  </InternalLink>
                </Sidebar.Sidebar.Menu.MenuItem.MenuButton>
                <Sidebar.Sidebar.Menu.MenuItem.MenuBadge data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuBadge">
                  5
                </Sidebar.Sidebar.Menu.MenuItem.MenuBadge>
                <Sidebar.Sidebar.Menu.MenuItem.MenuSub data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuSub">
                  <Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubItem data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuSub.MenuSubItem">
                    <Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubButton data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuSub.MenuSubButton">
                      General
                    </Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubButton>
                  </Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubItem>
                  <Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubItem data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuSub.MenuSubItem">
                    <Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubButton data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuSub.MenuSubButton">
                      Account
                    </Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubButton>
                  </Sidebar.Sidebar.Menu.MenuItem.MenuSub.MenuSubItem>
                </Sidebar.Sidebar.Menu.MenuItem.MenuSub>
              </Sidebar.Sidebar.Menu.MenuItem>
            </Sidebar.Sidebar.Menu>
          </Sidebar.Sidebar.Group.GroupContent>
        </Sidebar.Sidebar.Group>
        <Sidebar.Sidebar.Separator data-component="Sidebar$Brevity.Sidebar.Separator" />
        {/* Loading Group with Skeleton */}
        <Sidebar.Sidebar.Group data-component="Sidebar$Brevity.Sidebar.Group">
          <Sidebar.Sidebar.Group.GroupLabel data-component="Sidebar$Brevity.Sidebar.Group.GroupLabel">
            Loading Group
          </Sidebar.Sidebar.Group.GroupLabel>
          <Sidebar.Sidebar.Group.GroupContent data-component="Sidebar$Brevity.Sidebar.Group.GroupContent">
            <Sidebar.Sidebar.Menu>
              <Sidebar.Sidebar.Menu.MenuSkeleton
                showIcon
                data-component="Sidebar$Brevity.Sidebar.Menu.MenuSkeleton"
              />
              <Sidebar.Sidebar.Menu.MenuSkeleton
                showIcon
                data-component="Sidebar$Brevity.Sidebar.Menu.MenuSkeleton"
              />
            </Sidebar.Sidebar.Menu>
          </Sidebar.Sidebar.Group.GroupContent>
        </Sidebar.Sidebar.Group>
      </Sidebar.Sidebar.Content>
      <Sidebar.Sidebar.Footer data-component="Sidebar$Brevity.Sidebar.Footer">
        <Sidebar.Sidebar.Menu data-component="Sidebar$Brevity.Sidebar.Menu">
          <Sidebar.Sidebar.Menu.MenuItem data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem">
            <Sidebar.Sidebar.Menu.MenuItem.MenuButton data-component="Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton">
              <Settings />
              <span>Settings</span>
            </Sidebar.Sidebar.Menu.MenuItem.MenuButton>
          </Sidebar.Sidebar.Menu.MenuItem>
        </Sidebar.Sidebar.Menu>
      </Sidebar.Sidebar.Footer>
    </Sidebar.Sidebar>
    {/* Main content area */}
    <Sidebar.Inset data-component="Sidebar$Brevity.Inset">
      <Sidebar.Trigger data-component="Sidebar$Brevity.Trigger" />
      <h1>Main Content</h1>
      <p>This is the main content area.</p>
    </Sidebar.Inset>
  </Sidebar>
);

export const Default: Story = Template.bind({});
Default.args = {
  side: "left",
  variant: "sidebar",
  collapsible: "offcanvas",
};

// Variant stories for specific configurations
export const RightSidebar = Template.bind({});
RightSidebar.args = {
  side: "right",
};

export const FloatingVariant = Template.bind({});
FloatingVariant.args = {
  variant: "floating",
};

export const InsetVariant = Template.bind({});
InsetVariant.args = {
  variant: "inset",
};

export const CollapsedToIcons = Template.bind({});
CollapsedToIcons.args = {
  collapsible: "icon",
};