import React, { useEffect, useRef } from 'react';
import { BoxSize, SilkeBox } from '../silke-box';
import { SilkeCheckbox } from '../silke-checkbox';
import { SilkeText, SilkeTextMicro } from '../silke-text';
import { Data, Entry } from './autocomplete-types';
import styles from './silke-autocomplete-field.scss';
import { SilkeIcon } from '../silke-icon';
import { EmojiType } from '@vev/utils';

export interface AutocompleteRenderItemProps<U> {
  item: U;
  highlight?: boolean;
  selected?: boolean;
  isDisabled?: boolean;
}

export interface AutocompleteItemProps<T, U extends Entry<T>> {
  item: U;
  highlight?: boolean;
  selected?: boolean;
  multiple?: boolean;
  size?: BoxSize;
  iconFontSize?: string;
  onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
  ItemRender?: React.FC<AutocompleteRenderItemProps<U>>;
}

export default function AutocompleteItem<T, U extends Entry<T>>({
  item,
  selected,
  multiple,
  highlight,
  size,
  iconFontSize,
  onMouseDown,
  ItemRender,
}: AutocompleteItemProps<T, U>) {
  const label = (item.label || item.value || 'missing label') as string;
  const isDisabled = (item as Data<T>).disabled;
  const ref = useRef<HTMLDivElement>(null);

  const cl = styles.autocompleteItem;

  useEffect(() => {
    const el = ref.current;
    if (highlight) (el as any)?.scrollIntoViewIfNeeded?.();
  }, [highlight]);

  let iconSize: BoxSize = size || 'm';
  if (size === 'm') iconSize = 'base';
  if (size === 'base') iconSize = 's';
  if (size === 's') iconSize = 'xs';

  // For items with sublabel we need more space
  let boxSize: BoxSize = size || 'm';
  if (item.subLabel && (size === 's' || size === 'xs')) boxSize = 'base';

  return (
    <SilkeBox
      ref={ref}
      role="option"
      height={boxSize}
      hPad={ItemRender || item.icon || item.image ? undefined : 's'}
      bg={highlight ? 'surface-2' : undefined}
      bgHover={isDisabled ? undefined : 'surface-2'}
      vAlign="center"
      gap={item.icon || item.image ? 'xxs' : 'xs'}
      rounded={size === 's' ? 'tiny' : 'small'}
      className={cl}
      onMouseDown={
        isDisabled ? (e: React.MouseEvent<HTMLButtonElement>) => e.preventDefault() : onMouseDown
      }
    >
      {ItemRender ? (
        <ItemRender highlight={highlight} selected={selected} item={item} isDisabled={isDisabled} />
      ) : (
        <>
          {multiple && (
            <SilkeBox size="s" align="center">
              <SilkeCheckbox value={selected} style={{ pointerEvents: 'none' }} />
            </SilkeBox>
          )}

          {item.image && (
            <SilkeBox size={iconSize} align="center" pad="xs">
              <SilkeIcon icon={{ type: EmojiType.upload, value: { url: item.image } }} />
            </SilkeBox>
          )}

          {item.icon && (
            <SilkeBox size={iconSize} align="center">
              <SilkeIcon icon={item.icon} style={{ fontSize: iconFontSize }} />
            </SilkeBox>
          )}

          <SilkeBox column>
            <SilkeText
              size={size === 's' ? 'small' : undefined}
              tag={size === 's' ? 'small' : undefined}
              overflow
              color={isDisabled ? 'neutral-40' : undefined}
            >
              {label}
            </SilkeText>
            {item.subLabel && (
              <SilkeTextMicro overflow color="neutral-60">
                {item.subLabel}
              </SilkeTextMicro>
            )}
          </SilkeBox>
        </>
      )}
    </SilkeBox>
  );
}