import { Cake, East } from '@mui/icons-material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import Breadcrumbs from '.';

const breadcrumbsChildren = [
  {
    title: 'Home',
    href: '#',
  },
  {
    title: 'Second',
    href: '#',
  },
  {
    title: 'Third',
    href: '#',
  },
  {
    title: 'Fourth',
    href: '#',
  },
];

const breadcrumbsChildrenCollapsed = [
  ...breadcrumbsChildren,
  {
    title: 'Fifth',
    href: '#',
  },
];

const meta: Meta<typeof Breadcrumbs> = {
  component: Breadcrumbs,
  title: 'Design System/Breadcrumbs',
  tags: ['autodocs'],
  argTypes: {},
  args: {
    links: breadcrumbsChildren,
  },
};

export default meta;

type Story = StoryObj<typeof Breadcrumbs>;

export const Default: Story = {
  args: {},
};

export const Collapsed: Story = {
  args: {
    links: breadcrumbsChildrenCollapsed,
  },
};

export const WithIcons: Story = {
  args: {
    links: breadcrumbsChildren.map((link, index) => ({
      ...link,
      icon: index === 0 ? East : Cake,
    })),
  },
};

export const Loading: Story = {
  args: {
    loading: true,
  },
};

export const LinkAsButton: Story = {
  args: {
    links: breadcrumbsChildren.map((link, index) => ({
      ...link,
      href: undefined,
      onClick: () => alert(`Clicked item #${index + 1}`),
      component: 'button',
    })),
  },
};

export const Presentational: Story = {
  args: {
    links: breadcrumbsChildren.map((link, index) => ({
      ...link,
      isPresentational: index === 0,
    })),
  },
};

export const LongItems: Story = {
  args: {
    links: [
      {
        title: 'HU Knowledge Libraries',
        href: '#',
      },
      {
        title:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
        href: '#',
      },
      {
        title: 'hijo',
        href: '#',
        isPresentational: true,
      },
    ],
  },
};