import type React from 'react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';

/**
 * Props for LoadMore component
 */
interface LoadMoreProps {
  // visible?: boolean;
  /** Callback function triggered when the component is clicked */
  onClick?: () => void;
  /** Callback function triggered when the component becomes visible in viewport */
  onVisible?: () => void;
  /** Additional class names for styling */
  className?: string | undefined;
  /** Additional inline style */
  style?: React.CSSProperties | undefined;
  /** Children to render */
  children: React.ReactNode;
}

const LoadMore = (props: LoadMoreProps) => {
  const {
    onClick,
    onVisible,
    children,
    className,
    style,
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const handleVisible = () => {
    onVisible?.();
  };

  const targetRef = useIntersectionObserver<HTMLDivElement>({
    root: document.getElementById('message-list-container'),
    onIntersect: handleVisible,
    enabled: !!onVisible,
    threshold: 1,
  });

  return (
    <View
      ref={targetRef}
      className={cs(
        className,
      )}
      style={style}
      onClick={handleClick}
    >
      {children}
    </View>
  );
};

export { LoadMore };
export type { LoadMoreProps };