import { Card, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconEdit, IconTrash } from '@tabler/icons-react';

import ImgAvatar1 from '../../../../../../static/avatar1.png';

import {
  actionConfigs,
  avatarOptions,
  itemStates,
  sideContentOptions,
  textOptions,
} from './storyData';
import ListItem from '.';

const meta = {
  component: ListItem,
  title: 'Design System/List/ListItem',
  tags: ['autodocs'],
  argTypes: {
    divider: { control: 'boolean' },
    disabled: { control: 'boolean' },
    selected: { control: 'boolean' },
    loading: { control: 'boolean' },
    text: { control: false },
    avatar: { control: false },
    action: { control: false },
    action2: { control: false },
    sidePill: { control: false },
    sideText: { control: false },
    sideAvatars: { control: false },
    onClick: { control: false },
    sx: { control: false },
    slotProps: { control: false },
  },
  parameters: {
    layout: 'padded',
    docs: {
      controls: { expanded: true },
      source: 'code',
    },
  },
  decorators: [
    Story => (
      <Stack sx={{ maxWidth: 800, gap: 4, mx: 'auto', p: 2 }}>
        <Story />
      </Stack>
    ),
  ],
} satisfies Meta<typeof ListItem>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    text: {
      title: 'John Doe',
      description: 'Software Engineer at Tech Corp',
      date: new Date().toLocaleDateString(),
    },
    action: {
      Icon: IconTrash,
      onClick: () => alert('Delete'),
      'aria-label': 'Delete item',
    },
    action2: {
      Icon: IconEdit,
      onClick: () => alert('Edit'),
      'aria-label': 'Edit item',
    },
    avatar: { src: ImgAvatar1 },
    sidePill: { label: 'Active' },
  },
  render: args => (
    <Card>
      <ListItem {...args} />
    </Card>
  ),
};

export const Minimal: Story = {
  args: {
    text: {
      title: 'Simple List Item',
    },
  },
  render: args => (
    <Card>
      <ListItem {...args} />
    </Card>
  ),
};

export const textVariations: Story = {
  render: () => (
    <>
      {textOptions.map(item => (
        <Stack
          key={item.id}
          sx={{ gap: 1 }}
        >
          <Typography
            variant="subtitle2"
            color="text.secondary"
          >
            {item.id}
          </Typography>
          <Card>
            <ListItem text={item} />
          </Card>
        </Stack>
      ))}
    </>
  ),
};

export const avatarVariations: Story = {
  args: {
    text: {
      title: 'John Doe',
      description: 'Software Engineer at Tech Corp',
    },
  },
  render: args => (
    <>
      {avatarOptions.map(item => (
        <Stack
          key={item.id}
          sx={{ gap: 1 }}
        >
          <Typography
            variant="subtitle2"
            color="text.secondary"
          >
            {item.id}
          </Typography>
          <Card>
            <ListItem
              avatar={item}
              {...args}
            />
          </Card>
        </Stack>
      ))}
    </>
  ),
};

export const sideContentVariations: Story = {
  args: {
    text: {
      title: 'John Doe',
      description: 'Software Engineer at Tech Corp',
    },
  },
  render: args => (
    <>
      {sideContentOptions.map(item => (
        <Stack
          key={item.id}
          sx={{ gap: 1 }}
        >
          <Typography
            variant="subtitle2"
            color="text.secondary"
          >
            {item.id}
          </Typography>
          <Card>
            <ListItem
              {...args}
              sidePill={item.sidePill}
              sideText={item.sideText}
              sideAvatars={item.sideAvatars}
            />
          </Card>
        </Stack>
      ))}
    </>
  ),
};

export const actionVariations: Story = {
  args: {
    text: {
      title: 'John Doe',
      description: 'Software Engineer at Tech Corp',
    },
  },
  render: args => (
    <>
      {actionConfigs.map((config, index) => (
        <Stack
          key={index}
          sx={{ gap: 1 }}
        >
          <Typography
            variant="subtitle2"
            color="text.secondary"
          >
            {config.id}
          </Typography>
          <Card>
            <ListItem
              {...args}
              {...config.actions}
            />
          </Card>
        </Stack>
      ))}
    </>
  ),
};

export const listItemStates: Story = {
  args: {
    ...Default.args,
    onClick: () => alert('Item clicked!'),
  },
  render: args => (
    <>
      {itemStates.map(item => (
        <Stack
          key={item.id}
          sx={{ gap: 1 }}
        >
          <Typography
            variant="subtitle2"
            color="text.secondary"
          >
            {item.id}
          </Typography>
          <Card>
            <ListItem
              {...args}
              {...item}
            />
          </Card>
        </Stack>
      ))}
    </>
  ),
};
