import { clsx } from 'clsx';
import { forwardRef } from 'react';

import { TypeaheadOption } from '../Typeahead';
import Highlight from '../util/highlight';

export type TypeaheadOptionProps<T> = {
  option: TypeaheadOption<T>;
  selected?: boolean;
  onClick?: React.MouseEventHandler;
  query?: string;
  id?: string;
};

const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
  const { option, selected = false, onClick = () => {}, query = '', id } = props;
  const { label, note, secondary } = option;

  return (
    <li
      ref={ref}
      role="option"
      aria-selected={selected ? 'true' : 'false'}
      id={`option-${id}`}
      className={clsx('typeahead__option tw-dropdown-item clickable', {
        'tw-dropdown-item--focused': selected,
      })}
    >
      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
        <Highlight value={label} query={query} />
        {note && <span className="np-text-body-default m-l-1">{note}</span>}
        {secondary && (
          <Highlight
            className="np-text-body-default text-ellipsis"
            value={secondary}
            query={query}
          />
        )}
      </a>
    </li>
  );
});

export default Option;