import MenuList from '@composed-components/MenuList';
import ListItem from '@design-system/List/components/ListItem';
import MenuItem from '@design-system/Menu/components/MenuItem';
import { IconChevronRight } from '@tabler/icons-react';

import { type MenuListOptionProps } from './types';

const MenuListOption = ({
  option,
  onClick,
  onClose,
  minWidth,
  menuId,
  slotProps,
  ...rest
}: MenuListOptionProps) => {
  if (option?.options) {
    return (
      <MenuList
        options={option.options}
        minWidth={minWidth}
        onClose={() => {
          onClose?.();
        }}
        id={`${menuId}-sub-menu-${option.title}`}
        position="top-right"
        customButton={
          <ListItem
            component="div"
            text={{
              title: option.title,
              description: option?.description,
            }}
            onClick={() => undefined}
            sx={{
              '.MuiListItem-root': { p: 0 },
              justifyContent: 'center',
              ...(minWidth && { minWidth }),
              minHeight: 0,
              '.MuiIconButton-root': {
                ml: 2,
                p: 0,
              },
            }}
            avatar={option.Icon && { Icon: option.Icon }}
            action={{ Icon: IconChevronRight, disabled: true }}
            {...slotProps?.listItem}
          />
        }
      />
    );
  }

  return (
    <MenuItem
      key={option.title}
      onClick={onClick}
      disabled={option.disabled}
      {...rest}
    >
      <ListItem
        component="div"
        text={{
          title: option.title,
          description: option?.description,
        }}
        sx={{
          '.MuiListItem-root': { p: 0 },
          justifyContent: 'center',
          ...(minWidth && { minWidth }),
          minHeight: 0,
        }}
        avatar={option.Icon && { Icon: option.Icon }}
        {...slotProps?.listItem}
      />
    </MenuItem>
  );
};

export type { MenuListOptionProps };

export default MenuListOption;
