import { useState } from 'react';

import { Stack, useTheme } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconBulb } from '@tabler/icons-react';

import List from '../List';
import ListItem from '../List/components/ListItem';

import Dropdown from '.';

const meta: Meta<typeof Dropdown> = {
  component: Dropdown,
  title: 'Design System/Dropdown',
  tags: ['autodocs'],
  argTypes: {
    label: {
      description: 'Label for the dropdown Button',
      control: 'text',
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    open: {
      description: 'Whether the menu is open (controlled mode)',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'undefined' },
      },
    },
    onOpen: {
      description: 'Callback fired on open',
      control: false,
      table: {
        type: { summary: '() => void' },
      },
    },
    onClose: {
      description: 'Callback fired on close',
      control: false,
      table: {
        type: { summary: '() => void' },
      },
    },
    buttonVariant: {
      description: 'Variant of the Button',
      control: 'radio',
      options: ['primary', 'secondary', 'tertiary'],
      table: {
        type: { summary: "'primary' | 'secondary' | 'tertiary'" },
        defaultValue: { summary: 'secondary' },
      },
    },
    buttonSize: {
      description: 'Size of the Button',
      control: 'radio',
      options: ['small', 'large'],
      table: {
        type: { summary: "ButtonProps['size']" },
        defaultValue: { summary: 'small' },
      },
    },
    position: {
      description: 'Position of the menu',
      control: 'radio',
      options: ['left', 'right', 'center'],
      table: {
        type: { summary: "'left' | 'right' | 'center'" },
        defaultValue: { summary: 'left' },
      },
    },
    hasIcon: {
      description: 'Whether to show the chevron icon',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'true' },
      },
    },
    onClick: {
      description: 'Callback fired on click',
      control: false,
      table: {
        type: {
          summary: '(event: React.MouseEvent<HTMLButtonElement>) => void',
        },
      },
    },
    sx: {
      description: 'Custom styles',
      control: 'object',
      table: {
        type: { summary: 'SxProps' },
        defaultValue: { summary: '{}' },
      },
    },
    buttonProps: {
      description: 'Props of the Button',
      control: 'object',
      table: {
        type: { summary: 'ButtonProps' },
        defaultValue: { summary: '{}' },
      },
    },
    children: {
      description: 'Content rendered inside the dropdown menu',
      control: false,
      table: {
        type: { summary: 'ReactNode' },
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof Dropdown>;

const TemplateContent = () => {
  const theme = useTheme();
  return (
    <Stack
      sx={{
        width: '400px',
        height: '200px',
        borderRadius: '8px',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: theme.palette.new.background.layout.tertiary,
        p: 2,
      }}
    >
      <Stack
        sx={{
          borderRadius: '8px',
          border: '1px dashed #CAD5FE',
          backgroundColor: '#EFF2FF',
          width: 1,
          height: 1,
        }}
      />
    </Stack>
  );
};

const BasicMenu = () => {
  const theme = useTheme();
  const items = [1, 2, 3, 4, 5];
  return (
    <Stack
      sx={{ backgroundColor: theme.palette.new.background.layout.tertiary }}
    >
      <List sx={{ width: '300px' }}>
        {items.map(item => (
          <ListItem
            key={item}
            avatar={{
              Icon: IconBulb,
              color: 'primary',
            }}
            text={{
              title: `Option ${item}`,
              description: `Description of the option ${item}`,
            }}
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              cursor: 'pointer',
              '&:hover': {
                backgroundColor:
                  theme.palette.new.action.background.neutral.hover,
              },
            }}
          />
        ))}
      </List>
    </Stack>
  );
};

export const DefaultStory: Story = {
  args: {
    label: 'Open',
    buttonVariant: 'secondary',
    position: 'left',
    children: <TemplateContent />,
  },
};

export const Left: Story = {
  args: {
    label: 'Open',
    buttonVariant: 'secondary',
    position: 'left',
    children: <BasicMenu />,
  },
};

export const Right: Story = {
  args: {
    label: 'Open',
    buttonVariant: 'secondary',
    position: 'right',
    children: <BasicMenu />,
  },
};

export const Center: Story = {
  args: {
    label: 'Open',
    buttonVariant: 'secondary',
    position: 'center',
    children: <BasicMenu />,
  },
};

export const TertiaryButton: Story = {
  args: {
    label: 'Open',
    buttonVariant: 'tertiary',
    position: 'left',
    children: <BasicMenu />,
  },
};

export const NoIcon: Story = {
  args: {
    label: 'Open',
    buttonVariant: 'tertiary',
    hasIcon: false,
    position: 'left',
    children: <BasicMenu />,
  },
};

export const Controlled: Story = {
  render: () => {
    const [dropdownOpen, setDropdownOpen] = useState(false);

    return (
      <Dropdown
        label="Controlled Dropdown"
        open={dropdownOpen}
        onOpen={() => setDropdownOpen(true)}
        onClose={() => setDropdownOpen(false)}
      >
        <BasicMenu />
      </Dropdown>
    );
  },
};