import { MemoryRouter } from 'react-router-dom';

import Title from '@design-system/Title';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { type Meta, type StoryObj } from '@storybook/react';

import { type SidebarContentLayoutProps } from './types';
import SidebarContentLayout from './index';

const meta: Meta<typeof SidebarContentLayout> = {
  title: 'Composed Components/SidebarContentLayout',
  component: props => (
    <MemoryRouter>
      <SidebarContentLayout {...props} />
    </MemoryRouter>
  ),
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;

type Story = StoryObj<typeof SidebarContentLayout>;

const sidebarOptions = [
  { label: 'Home', to: '/' },
  { label: 'Projects', to: '/projects' },
  { label: 'Team', to: '/team' },
];

export const Default: Story = {
  args: {
    slotProps: {
      sidebar: {
        buttonLabel: 'Navigation',
        options: sidebarOptions,
      },
      root: {
        sx: {
          height: '500px',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        },
      },
    },
    children: (
      <Stack sx={{ p: 3 }}>
        <Title title="SidebarContentLayout Content" />
        <Typography>
          This area can contain the page content. The sidebar is collapsible and
          displays navigation options.
        </Typography>
      </Stack>
    ),
  } as SidebarContentLayoutProps,
};

export const Loading: Story = {
  args: {
    loading: true,
    slotProps: {
      sidebar: {
        buttonLabel: 'Navigation',
        options: sidebarOptions,
      },
      root: {
        sx: {
          height: '500px',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        },
      },
    },
    children: (
      <Stack sx={{ p: 3 }}>
        <Title title="SidebarContentLayout Content" />
        <Typography>Content area while sidebar is loading.</Typography>
      </Stack>
    ),
  } as SidebarContentLayoutProps,
};

export const WithCustomSidebarLabel: Story = {
  args: {
    slotProps: {
      sidebar: {
        buttonLabel: 'Custom Sidebar',
        options: sidebarOptions,
      },
      root: {
        sx: {
          height: '400px',
          backgroundColor: theme => theme.palette.new.background.layout.default,
        },
      },
    },
    children: (
      <Stack sx={{ p: 3 }}>
        <Title title="Another Content Example" />
        <Typography>
          This layout is reusable. The sidebar accepts dynamic options and you
          can customize props.
        </Typography>
      </Stack>
    ),
  } as SidebarContentLayoutProps,
};