import { ListItemIcon, MenuItem, Menu, styled, type SvgIconProps } from '@mui/material';
import React from 'react';
import { UserMetadata } from '../../../@types';

interface StatusMenuItemProps {
  icon?: React.FC<SvgIconProps>;
  selected?: boolean;
  onClick: (e: React.MouseEvent<HTMLElement>) => void;
  children: React.ReactNode;
}

export default function StatusMenuItem({
  icon = undefined,
  selected = undefined,
  onClick,
  children,
}: StatusMenuItemProps) {
  return (
    <MenuItem onClick={onClick} className={selected ? 'selected' : ''}>
      {icon && (
        <ListItemIcon style={{ minWidth: '24px' }}>
          {React.createElement(icon, {
            style: { fontSize: '16px', width: '16px', height: '16px' },
          })}
        </ListItemIcon>
      )}
      {children}
    </MenuItem>
  );
}

export const StyledMenu = styled(Menu)`
  .MuiPaper-root {
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.15);
  }
  .MuiList-root {
    min-width: 160px;
  }
  .selected {
    background-color: ${({ theme }) => theme.palette.grey[50]};
  }
`;

export interface StatusItem {
  id: string;
  name: string;
  icon?: React.FC<SvgIconProps>;
  duration?: string;
  durationName?: string;
  children?: Array<StatusItem>;
}

export interface BaseStatusProps {
  selected: UserMetadata['status'];
  onSelect: (v: UserMetadata['status']) => void;
}
