'use client';

import { useEffect } from 'react';
import { Menu, MenuItem } from 'react-aria-components';
import { twMerge } from 'tailwind-merge';

import Avatar from '@/components/image/Avatar';
import { useMentionSearch } from '@/hooks/useComments';

export type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
  query?: string | null;
  priorityUserHandles?: string[];
  onSelect: (value: string, displayValue: string) => void;
  onSuggestion: (value: string, displayValue: string) => void;
};

const MentionSuggestions: React.FC<Props> = (props) => {
  const {
    className,
    query,
    priorityUserHandles,
    onSelect,
    onSuggestion,
    ...restProps
  } = props;

  const { suggestedUsers } = useMentionSearch(query, priorityUserHandles);

  useEffect(() => {
    if (onSuggestion && suggestedUsers.length) {
      const { handle, displayName } = suggestedUsers[0];
      if (handle) {
        onSuggestion(handle, displayName || `@${handle}`);
      }
    }
  }, [suggestedUsers, onSuggestion]);

  if (!suggestedUsers.length) {
    return null;
  }

  return (
    <Menu
      className={twMerge(
        'relative z-10 flex flex-col items-stretch justify-start gap-2 rounded-md py-1',
        'max-h-60 overflow-y-auto',
        'bg-(--comment-input-bg,var(--color-background-secondary))',
        className
      )}
      aria-label='@mention suggestions'
      selectionMode='none'
      {...restProps}
    >
      {suggestedUsers.map(({ handle, displayName, avatarImageUrl }) =>
        handle ? (
          <MenuItem
            key={handle}
            className='flex cursor-pointer flex-row items-center gap-2 px-3 py-1 hover:bg-overlay-on-primary'
            onAction={() => onSelect(handle, displayName || `@${handle}`)}
          >
            <Avatar
              className='h-8 w-8'
              src={avatarImageUrl || null}
              alt='User avatar'
              // size={avatarSize}
            />
            <div className='min-w-0 flex-1 text-sm leading-tight text-foreground-primary'>
              <div>{displayName}</div>
              <div className='text-foreground-tertiary'>{handle}</div>
            </div>
          </MenuItem>
        ) : null
      )}
    </Menu>
  );
};

export default MentionSuggestions;