import { computed } from 'vue';
import { ListDirection } from './list-types';
import type { ListProps, ListItemData } from './list-types';

export function useList(
  props: ListProps,
  emits: (event: 'select' | 'load-more', ...args: any[]) => void,
) {
  const LazyLoadThreshold = 50;
  const onItemClick = (item: ListItemData) => {
    if (item.disabled) {
      return;
    }
    for (let i = 0; i < props.data.length; i++) {
      props.data[i].active = props.data[i].value === item.value;
    }
    emits('select', { ...item });
  };

  const onListScroll = (e: Event) => {
    if (!props.enableLazyLoad || props.direction !== ListDirection.Vertical) {
      return;
    }
    const targetEl = e.target as HTMLElement;
    const scrollHeight = targetEl.scrollHeight;
    const clientHeight = targetEl.clientHeight;
    const scrollTop = targetEl.scrollTop;

    if (scrollHeight - clientHeight - scrollTop < LazyLoadThreshold) {
      emits('load-more', e);
    }
  };

  return { onItemClick, onListScroll };
}

export function useListRender(props: ListProps) {
  const listClasses = computed(() => ({
    'mc-list': true,
    'mc-list-horizontal': props.direction === ListDirection.Horizontal,
    'mc-list-nowrap': props.direction === ListDirection.Horizontal && !props.autoWrap,
  }));

  return { listClasses };
}