import { useRef, useState } from 'react';

import { Button, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import { MenuItem } from './components/MenuItem';
import { type MenuProps } from './types';
import { Menu } from '.';

const defaultOptions = [
  'Option 1',
  'Option 2 - very long text to test overflow',
  'Option 3',
];

const manyOptions = [
  'Option 1',
  'Option 2',
  'Option 3',
  'Option 4',
  'Option 5',
  'Option 6',
  'Option 7',
  'Option 8',
];

const meta: Meta<typeof Menu> = {
  title: 'Design System/Menu',
  tags: ['autodocs'],
  args: {
    header: null,
    footer: null,
    fixedDimensions: false,
  },
  argTypes: {
    fixedDimensions: {
      description: 'Fixed dimensions or taken from children',
      control: 'boolean',
    },
    header: {
      description: 'Menu header content',
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    footer: {
      description: 'Menu footer content',
      table: {
        type: { summary: 'ReactNode' },
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

const renderStory = (options: string[]) =>
  function Component(args: MenuProps) {
    const anchorRef = useRef(null);
    const [open, setOpen] = useState(false);
    const [selectedIndex, setSelectedIndex] = useState(1);

    const handleOpen = () => setOpen(true);

    const handleClose = () => setOpen(false);

    const handleMenuItemClick = (optionIndex: number) => {
      setSelectedIndex(optionIndex);
      setOpen(false);
    };

    return (
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'flex-start',
        }}
      >
        <Menu
          {...args}
          open={open}
          anchorEl={anchorRef.current}
          onClose={handleClose}
        >
          {options.map((option, optionIndex) => (
            <MenuItem
              key={option}
              disabled={optionIndex === 0}
              selected={optionIndex === selectedIndex}
              onClick={() => handleMenuItemClick(optionIndex)}
            >
              <Typography
                variant="inherit"
                noWrap
              >
                {option}
              </Typography>
            </MenuItem>
          ))}
        </Menu>
        <Button
          focusRipple
          onClick={handleOpen}
          variant="secondary"
          ref={anchorRef}
        >
          Open menu
        </Button>
      </Stack>
    );
  };

const Footer = () => (
  <>
    <Button sx={{ flexGrow: 1 }}>Delete</Button>
    <Button
      sx={{ flexGrow: 1 }}
      variant="primary"
    >
      Apply
    </Button>
  </>
);

const Header = () => (
  <>
    <Typography
      variant="globalS"
      fontWeight={'fontWeightSemiBold'}
      sx={{ mx: 'auto', p: 2 }}
    >
      Header
    </Typography>
  </>
);

// TODO: Fix types
export const Default: Story = {
  render: renderStory(defaultOptions),
  args: {},
};

export const WithFooter: Story = {
  render: renderStory(defaultOptions),
  args: {
    footer: <Footer />,
  },
};

export const WithHeaderAndFooter: Story = {
  render: renderStory(defaultOptions),
  args: {
    header: <Header />,
    footer: <Footer />,
  },
};

export const ManyOptions: Story = {
  render: renderStory(manyOptions),
  args: {},
};

export const ManyOptionsAndFooter: Story = {
  render: renderStory(manyOptions),
  args: {
    footer: <Footer />,
  },
};

export const LeftAlign: Story = {
  render: renderStory(manyOptions),
  args: {
    footer: <Footer />,
    position: 'left',
  },
};

export const RightAlign: Story = {
  render: renderStory(manyOptions),
  args: {
    footer: <Footer />,
    position: 'right',
  },
};