import { Box, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import {
  IconFiles,
  IconPhoto,
  IconSettings,
  IconUsers,
} from '@tabler/icons-react';

import CollapsibleInfoSidebar from '.';

const MainContent = () => (
  <Stack sx={{ flex: 1, p: 3, backgroundColor: '#f5f5f5' }}>
    <Typography variant="h6">Main Content Area</Typography>
    <Typography
      variant="body2"
      color="text.secondary"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </Typography>
  </Stack>
);

const RightSidebarDecorator = (Story: React.ComponentType) => (
  <>
    <MainContent />
    <Story />
  </>
);

const LeftSidebarDecorator = (Story: React.ComponentType) => (
  <>
    <Story />
    <MainContent />
  </>
);

const meta: Meta<typeof CollapsibleInfoSidebar> = {
  component: CollapsibleInfoSidebar,
  title: 'Composed Components/CollapsibleInfoSidebar',
  tags: ['autodocs'],
  decorators: [
    Story => (
      <Stack
        sx={{
          height: '500px',
          width: '100%',
          flexDirection: 'row',
          border: '1px solid #e0e0e0',
          position: 'relative',
        }}
      >
        <Story />
      </Stack>
    ),
  ],
  argTypes: {
    position: {
      control: 'select',
      options: ['left', 'right'],
      description: 'Position of the sidebar',
    },
    contentWidth: {
      control: { type: 'number', min: 200, max: 500 },
      description: 'Width of the expanded content area',
    },
    alwaysExpanded: {
      control: 'boolean',
      description: 'If true, sidebar cannot be collapsed',
    },
  },
};

export default meta;

type Story = StoryObj<typeof CollapsibleInfoSidebar>;

const DocumentsContent = () => (
  <Stack sx={{ gap: 2, p: 2 }}>
    <Typography
      variant="globalS"
      fontWeight="fontWeightSemiBold"
    >
      Documentos
    </Typography>
    <Stack sx={{ gap: 1 }}>
      {[1, 2, 3, 4].map(i => (
        <Box
          key={i}
          sx={{
            width: '100%',
            height: 120,
            backgroundColor: '#fff',
            border: '1px solid #e0e0e0',
            borderRadius: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Typography
            variant="body2"
            color="text.secondary"
          >
            Page {i}
          </Typography>
        </Box>
      ))}
    </Stack>
  </Stack>
);

const PhotosContent = () => (
  <Stack sx={{ gap: 2, p: 2 }}>
    <Typography
      variant="globalS"
      fontWeight="fontWeightSemiBold"
    >
      Fotos
    </Typography>
    <Stack
      sx={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: 1,
      }}
    >
      {Array.from({ length: 8 }).map((_, i) => (
        <Box
          key={i}
          sx={{
            aspectRatio: '1',
            backgroundColor: '#e3f2fd',
            borderRadius: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <IconPhoto
            size={24}
            color="#1976d2"
          />
        </Box>
      ))}
    </Stack>
  </Stack>
);

const SettingsContent = () => (
  <Stack sx={{ gap: 2, p: 2 }}>
    <Typography
      variant="globalS"
      fontWeight="fontWeightSemiBold"
    >
      Configuración
    </Typography>
    <Typography
      variant="body2"
      color="text.secondary"
    >
      Aquí puedes configurar las opciones del documento.
    </Typography>
  </Stack>
);

const UsersContent = () => (
  <Stack sx={{ gap: 2, p: 2 }}>
    <Typography
      variant="globalS"
      fontWeight="fontWeightSemiBold"
    >
      Usuarios
    </Typography>
    <Typography
      variant="body2"
      color="text.secondary"
    >
      Lista de usuarios con acceso al documento.
    </Typography>
  </Stack>
);

const sampleItems = [
  {
    Icon: IconFiles,
    content: <DocumentsContent />,
    collapseButtonText: 'Colapsar documentos',
  },
  {
    Icon: IconPhoto,
    content: <PhotosContent />,
    collapseButtonText: 'Colapsar fotos',
  },
  {
    Icon: IconSettings,
    content: <SettingsContent />,
  },
  {
    Icon: IconUsers,
    content: <UsersContent />,
  },
];

export const Default: Story = {
  args: {
    items: sampleItems,
    position: 'right',
  },
  decorators: [RightSidebarDecorator],
};

export const PositionLeft: Story = {
  args: {
    items: sampleItems,
    position: 'left',
  },
  decorators: [LeftSidebarDecorator],
};

export const DefaultExpanded: Story = {
  args: {
    items: sampleItems,
    position: 'right',
    defaultExpandedIndex: 0,
  },
  decorators: [RightSidebarDecorator],
};

export const AlwaysExpanded: Story = {
  args: {
    items: sampleItems,
    position: 'right',
    defaultExpandedIndex: 0,
    alwaysExpanded: true,
  },
  decorators: [RightSidebarDecorator],
};

export const CustomWidth: Story = {
  args: {
    items: sampleItems,
    position: 'right',
    contentWidth: 450,
  },
  decorators: [RightSidebarDecorator],
};

export const SingleItem: Story = {
  args: {
    items: [sampleItems[0]],
    position: 'right',
  },
  decorators: [RightSidebarDecorator],
};