import { getSearchReg } from '@vev/utils';
import { isEqual, isUndefined } from 'lodash';
import React, {
  Children,
  ReactNode,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { useFormField, useInterval, useParentScroll, useWindowResize } from '../../hooks';
import { SilkeBox } from '../silke-box';
import { SilkeDivider } from '../silke-divider';
import { FormValidator } from '../silke-form';
import { SilkeIcon } from '../silke-icon';
import { PopoverOrigin } from '../silke-popover';
import { SilkePopoverNative } from '../silke-popover-native';
import type { PopoverPlacement } from '../silke-popover-native/types';
import { SilkeTextSmall } from '../silke-text';
import { SilkeTextField, SilkeTextFieldItem } from '../silke-text-field';
import { useTextFieldContext } from '../silke-text-field/text-field-context';
import AutocompleteItem from './autocomplete-item';
import { Data, Entry } from './autocomplete-types';
import styles from './silke-autocomplete-field.scss';
import { SilkeAutocompleteFieldProps } from './silke-autocomplete-field';
import { SilkeButton } from '../silke-button';

/**
 * Converts PopoverOrigin to PopoverPlacement
 */
function convertOriginToPlacement(
  anchorOrigin?: PopoverOrigin,
  targetOrigin?: PopoverOrigin,
): PopoverPlacement {
  // Default to bottom-start (equivalent to bottom-left anchor, top-left target)
  if (!anchorOrigin && !targetOrigin) return 'bottom-start';

  // Map common combinations
  if (anchorOrigin?.startsWith('bottom-')) {
    if (anchorOrigin === 'bottom-left') return 'bottom-start';
    if (anchorOrigin === 'bottom-center') return 'bottom';
    if (anchorOrigin === 'bottom-right') return 'bottom-end';
  }
  if (anchorOrigin?.startsWith('top-')) {
    if (anchorOrigin === 'top-left') return 'top-start';
    if (anchorOrigin === 'top-center') return 'top';
    if (anchorOrigin === 'top-right') return 'top-end';
  }

  return 'bottom-start';
}

/**
 * Props for autocomplete popup
 */
type SilkeAutocompletePopupNativeProps<T = any> = SilkeAutocompleteFieldProps<T> & {
  containerRef?: React.RefObject<HTMLDivElement>;
  searchPlaceholder?: string;
  onRequestClose?: () => void;
  hide?: boolean;
};

const autocompleteValidator: FormValidator<SilkeAutocompletePopupNativeProps> = (props, value) => {
  if (props.multiple) {
    const len = value?.length || 0;
    if (len > (props.maxItems || 1000)) return `To many item, max ${props.maxItems}`;
    if (len < (props.minItems || 0)) return `To few item, min ${props.minItems}`;
  }
  if (props.required && !value && value !== 0) return 'Required';

  return undefined;
};

/**
 * Checks if any of an `Entry`'s fields match the query
 */
const filter = ({ label, subLabel, value }: Entry<any>, search: RegExp): boolean =>
  (value && value.toString && search.test(value.toString() + '')) ||
  (label ? search.test(label) : false) ||
  (subLabel ? search.test(subLabel) : false);

const normalizeString = (str?: string | number): string =>
  str ? str.toString().toLowerCase() : '';

const filterString = ({ label, subLabel, value }: Entry<any>, searchString: string): boolean => {
  const normalizedSearchString = normalizeString(searchString);
  return (
    normalizeString(label).startsWith(normalizedSearchString) ||
    normalizeString(value).startsWith(normalizedSearchString) ||
    normalizeString(subLabel).startsWith(normalizedSearchString)
  );
};

const sorter: SilkeAutocompletePopupNativeProps<any>['sort'] = () => 0;

const putMatchingItemsOnTop = (filteredItems: Entry<any>[], searchString: string): Entry<any>[] => {
  const itemsWithMatch = filteredItems.filter((item) => filterString(item, searchString));
  const itemsWithNoMatch = filteredItems.filter((item) => !filterString(item, searchString));
  return [...itemsWithMatch, ...itemsWithNoMatch];
};

export const useMatchingItemsOnTop = (
  filteredItems: Entry<any>[],
  searchString?: string,
  selectedLabel?: string,
): Entry<any>[] => {
  return useMemo(
    () =>
      !searchString || searchString === selectedLabel
        ? filteredItems
        : putMatchingItemsOnTop(filteredItems, searchString),
    [searchString, filteredItems, selectedLabel],
  );
};

export function SilkeAutocompletePopupNative<T>(props: SilkeAutocompletePopupNativeProps<T>) {
  const {
    disableSearch,
    disableAddFromList,
    selectedVariableKey,
    containerRef,
    items,
    onAdd,
    renderItem: ItemRender,
    sort = sorter,
    label,
    anchorOrigin,
    targetOrigin,
    maxDisplayedItems = 150,
    dropDownMinWidth,
    dropDownMaxWidth,
    onSearch,
    onClose,
    onRequestClose,
    buttonRight,
    searchPlaceholder,
    hide = false,
    ...form
  } = useFormField(props, autocompleteValidator);
  const context = useTextFieldContext();
  const size = form.size || context.size || 'base';

  const inputField = useRef<HTMLDivElement>();
  const isSelected = (value: T): boolean => {
    if (form.multiple) {
      const values = Array.isArray(form.value) ? form.value : [];
      for (const v of values) {
        if (isEqual(v, value) || isEqual(value, selectedVariableKey)) return true;
      }
      return false;
    }
    return isEqual(value, form.value) || isEqual(value, selectedVariableKey);
  };

  function getIndexInDir(
    currentIndex: number,
    listLength: number,
    dir: 'ArrowUp' | 'ArrowDown',
  ): number {
    if (dir === 'ArrowUp') {
      return currentIndex === 0 ? listLength - 1 : currentIndex - 1;
    }
    return currentIndex === listLength - 1 ? 0 : currentIndex + 1;
  }

  const [selectedLabel] = useMemo((): [label?: string] => {
    if (form.multiple) return [];
    const entry = items.find((entry) => !entry.divider && isEqual(entry.value, form.value));
    return [entry?.label || (form.value && form.value.toString()) || ''];
  }, [items, form.multiple, form.value]);

  const [searchText, _setSearchText] = useState<undefined | string>();
  const [prevSearchText, setPrevSearchText] = useState(searchText);
  const inputRef = useRef<HTMLInputElement>();
  const dropdownRef = useRef<HTMLElement>();
  const [highlight, setHighlight] = useState<undefined | number>(undefined);

  const before: ReactNode[] = [];
  const after: ReactNode[] = [];
  Children.forEach(form.children, (child) => {
    if (React.isValidElement(child) && child.type === SilkeTextFieldItem && child.props.before) {
      before.push(child);
    } else {
      after.push(child);
    }
  });

  const setSearchText = useCallback((value: string | undefined) => {
    _setSearchText((previousValue) => {
      setPrevSearchText(previousValue);
      return value;
    });
  }, []);

  const resetSearchText = useCallback(() => {
    setSearchText('');
  }, []);

  useEffect(() => {
    if (!form.multiple && !isUndefined(form.value)) {
      resetSearchText();
    }
  }, [form.multiple, resetSearchText, form.value]);

  useEffect(() => {
    if (highlight !== undefined) {
      dropdownRef.current?.children.item(highlight)?.scrollIntoView(false);
    }
  }, [highlight]);

  const handleChange = (nuValue: T | undefined) => {
    if (form.multiple) {
      form.onChange([...(Array.isArray(form.value) ? form.value : []), nuValue]);
    } else {
      form.onChange(nuValue as any);
    }
  };

  const handleRemoveSingle = (remove: T) => {
    if (form.multiple && form.value) {
      const value = Array.isArray(form.value) ? form.value.filter((v: T) => remove !== v) : [];
      if (!isEqual(value, form.value)) form.onChange(value);
    }
  };

  const searchReg = useMemo(() => {
    return searchText && searchText !== selectedLabel ? getSearchReg(searchText) : undefined;
  }, [searchText, selectedLabel]);

  const filteredItems = useMemo(() => {
    return searchReg ? items.filter((entry) => filter(entry, searchReg)) : items;
  }, [searchReg, items]);

  const itemsWithMatchingOnTop = useMatchingItemsOnTop(filteredItems, searchText, selectedLabel);

  const [displayedItems, isHidingResults]: [Entry<T>[], boolean] = useMemo(() => {
    return [
      itemsWithMatchingOnTop.slice(0, maxDisplayedItems),
      itemsWithMatchingOnTop.length > maxDisplayedItems,
    ];
  }, [itemsWithMatchingOnTop, maxDisplayedItems]);

  const filteredDataEntries = displayedItems.filter((entry) => !entry.divider) as Data<T>[];

  const isItemSelected = (item: string): boolean => {
    return (
      Array.isArray(form.value) &&
      form.value.map((s) => String(s).toUpperCase()).includes(item.trim().toUpperCase())
    );
  };

  const findItem = (item: string) => {
    return filteredItems.find((listItem) => {
      return (listItem.label || listItem.value).toUpperCase() === item.toUpperCase().trim();
    });
  };

  const [overridePlacement, setOverridePlacement] = useState<PopoverPlacement | undefined>();

  const updatePlacement = () => {
    if (containerRef && containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      const height = window.innerHeight;
      const spaceUnderElement = height - rect.top - rect.height;
      if (spaceUnderElement < 300) {
        setOverridePlacement('top-start');
      } else {
        setOverridePlacement(undefined);
      }
    }
  };

  useInterval(updatePlacement, 1000);
  useParentScroll(containerRef, updatePlacement);
  useWindowResize(updatePlacement);

  const getIndexOfFirstSelectedItem = () => {
    for (let i = 0; i < filteredItems.length; i++) {
      if (isSelected(filteredItems[i].value)) {
        return i;
      }
    }
    return 0;
  };

  useEffect(() => {
    if (highlight === undefined) {
      const indexOfFirstSelectedItem = getIndexOfFirstSelectedItem();
      setHighlight(indexOfFirstSelectedItem);
    }
  }, []);

  const handleSelect = (item?: Entry<T>) => {
    inputField?.current?.focus();
    if (!item) {
      resetSearchText();
    } else if (!item.divider) {
      if (form.multiple) {
        if (isSelected(item.value)) handleRemoveSingle(item.value);
        else handleChange(item.value);
        resetSearchText();
      } else {
        resetSearchText();
        handleChange(item.value);
        onRequestClose && onRequestClose();
        onClose && onClose();
        setHighlight(undefined);
      }
    }
  };

  const handleKeyUp = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'Backspace': {
        if (prevSearchText?.length === 1) {
          setPrevSearchText('');
        } else if (form.multiple && form.value && !searchText) {
          if (Array.isArray(form.value)) form.onChange(form.value.slice(0, -1));
        }
        break;
      }
      case 'Enter': {
        if (form.multiple && onAdd && searchText) {
          if (!isItemSelected(searchText)) {
            const item = findItem(searchText);
            if (!item) {
              onAdd(searchText);
            } else {
              handleChange(item.value);
            }
          }
          setSearchText('');
          setPrevSearchText('');
        } else {
          const item = highlight !== undefined && filteredDataEntries[highlight];
          if (item) {
            handleSelect(item);
          } else {
            if (onAdd && searchText) {
              onAdd(searchText);
            }
          }
        }
        inputField.current?.focus();
        onRequestClose && onRequestClose();
        onClose && onClose();
        break;
      }
      case 'ArrowUp':
      case 'ArrowDown': {
        e.preventDefault();
        e.stopPropagation();
        const { key } = e;
        setHighlight((value) => getIndexInDir(value || 0, filteredDataEntries.length, key));
        break;
      }
      case 'Escape': {
        inputField.current?.focus();
        onRequestClose && onRequestClose();
        onClose && onClose();
        break;
      }
    }
  };

  const dataCy = props['data-cy'] || undefined;
  const iconFontSize = size === 's' ? '12px' : undefined;

  const matchAnchorWidth =
    !dropDownMinWidth ||
    (!!containerRef?.current && containerRef?.current?.clientWidth > dropDownMinWidth);

  const placement = overridePlacement || convertOriginToPlacement(anchorOrigin, targetOrigin);

  const handleRequestClose = () => {
    onRequestClose && onRequestClose();
    onClose && onClose();
  };

  return (
    <SilkePopoverNative
      offsetY={1}
      anchor={containerRef}
      placement={placement}
      matchWidth={matchAnchorWidth}
      hideBackdrop
      hide={hide}
      animate
      onRequestClose={handleRequestClose}
    >
      <SilkeBox
        role="listbox"
        rounded={size === 's' ? 'tiny' : 'small'}
        shadow="level3"
        data-cy={dataCy ? dataCy + '-dropdown' : undefined}
        bg="neutral-10"
        column
        style={{
          maxHeight: 300,
          minWidth: dropDownMinWidth,
          maxWidth: dropDownMaxWidth,
          border: '1px solid var(--color-surface-2)',
        }}
        gap={disableSearch ? undefined : 'xs'}
        vPad="xs"
        value={form.value as any}
        onKeyUp={handleKeyUp}
        ref={dropdownRef}
      >
        <SilkeBox hPad="xs">
          <SilkeTextField
            gap={size === 's' ? 'xxs' : 'xs'}
            inline="label-inside"
            label={<SilkeIcon icon="search" />}
            aria-label={'Search for ' + label}
            autoFocus
            size={size}
            className={disableSearch ? styles.hiddenSearch : undefined}
            placeholder={searchPlaceholder || 'Search'}
            kind="ghost"
            onFocus={(e) => {
              inputRef.current = e.currentTarget as HTMLInputElement;
              if (props.onFocus) props.onFocus(e);
            }}
            onBlur={(e) => {
              if (props.onBlur) props.onBlur(e);
            }}
            onChange={(text: string) => {
              onSearch?.(text);
              setHighlight(0);
              setSearchText(text);
            }}
            onKeyUp={handleKeyUp}
            onKeyDown={(e: React.KeyboardEvent) => {
              if (e.key === 'Tab') {
                inputField.current?.focus();
              }
              if (['Enter', 'ArrowUp', 'ArrowDown', 'Escape'].includes(e.key)) {
                e.preventDefault();
                e.stopPropagation();
              }
            }}
            value={searchText}
          >
            {props.showAddIcon && onAdd && (
              <SilkeTextFieldItem hPad="xs">
                <SilkeButton icon="add" kind="ghost" size="s" onClick={() => onAdd('variable')} />
              </SilkeTextFieldItem>
            )}
            {buttonRight && <div onClick={() => onRequestClose?.()}>{buttonRight}</div>}
          </SilkeTextField>
        </SilkeBox>
        {!disableSearch && <SilkeDivider dark />}
        <SilkeBox column scroll flex>
          {displayedItems.length === 0 && (
            <SilkeBox hPad="s" height={size} vAlign="center">
              <SilkeTextSmall color="neutral-60">No results</SilkeTextSmall>
            </SilkeBox>
          )}
          {(() => {
            const sortedItems = displayedItems.sort(sort);
            const groupedItems: { groupLabel?: string; items: Entry<T>[] }[] = [];
            let currentGroup: { groupLabel?: string; items: Entry<T>[] } | null = null;

            sortedItems.forEach((item) => {
              const itemGroupLabel = !item.divider ? (item as Data<T>).groupLabel : undefined;
              if (!currentGroup || currentGroup.groupLabel !== itemGroupLabel) {
                currentGroup = { groupLabel: itemGroupLabel, items: [] };
                groupedItems.push(currentGroup);
              }
              currentGroup.items.push(item);
            });

            let itemIndex = 0;

            return groupedItems.map((group, groupIdx) => (
              <React.Fragment key={`group-${groupIdx}`}>
                {group.groupLabel && (
                  <SilkeBox hPad="s" vPad="s">
                    <SilkeTextSmall color="neutral-60" weight="strong">
                      {group.groupLabel}
                    </SilkeTextSmall>
                  </SilkeBox>
                )}
                {group.items.map((item) => {
                  const currentItemIndex = itemIndex++;
                  return item.divider ? (
                    <SilkeDivider dark vSpace="xs" key={`hr-${currentItemIndex}`} />
                  ) : (
                    <SilkeBox
                      key={`group-${groupIdx}-item-${itemIndex}`}
                      flex
                      fill
                      column
                      hPad="xs"
                    >
                      <AutocompleteItem
                        ItemRender={ItemRender}
                        size={size}
                        iconFontSize={iconFontSize}
                        item={item}
                        highlight={currentItemIndex === highlight || isSelected(item.value)}
                        selected={isSelected(item.value)}
                        multiple={form.multiple}
                        onMouseDown={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          if (!item.divider && !item.disabled) handleSelect(item);
                        }}
                      />
                    </SilkeBox>
                  );
                })}
              </React.Fragment>
            ));
          })()}
          {onAdd && !disableAddFromList && searchText && (
            <AutocompleteItem
              size={size}
              iconFontSize={iconFontSize}
              highlight={!displayedItems.length}
              item={{
                label: `+ Add item "${searchText}"`,
                value: undefined,
              }}
              onMouseDown={(e) => {
                e.preventDefault();
                onAdd(searchText);
                setSearchText('');
              }}
            />
          )}
          {isHidingResults
            ? props.maxDisplayedItemsLabel || (
                <>
                  <SilkeDivider dark vSpace="xs" />
                  <SilkeBox pad="l">
                    Currently displaying the {maxDisplayedItems} first results, please enter a more
                    specific query to see the rest
                  </SilkeBox>
                </>
              )
            : null}
        </SilkeBox>
      </SilkeBox>
    </SilkePopoverNative>
  );
}