import { getClassNames } from '@websolutespa/bom-core';
import { useEventListener, useIsomorphicLayoutEffect } from '@websolutespa/bom-mixer-hooks';
import React, { ReactNode, useRef } from 'react';
import styled from 'styled-components';
import { Loading } from '../loading/loading';
import { UIComponent, UIStyledComponentProps } from '../types';
import { getCssResponsive } from '../utils';

type Props = {
  href?: string;
  onMore: () => void;
  children?: ReactNode;
};

export type InfiniteLoaderProps = UIStyledComponentProps<Props>;

export type InfiniteLoaderComponent<C extends React.ElementType = 'div'> = UIComponent<C, Props>;

export type StyledInfiniteLoaderProps = UIStyledComponentProps;

const StyledInfiniteLoader = styled.a<StyledInfiniteLoaderProps>`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  margin: 1rem 0;
  background-color: var(--color-primary-100);
  ${props => getCssResponsive(props)}
`;

export const InfiniteLoader: InfiniteLoaderComponent = ({
  children,
  as = 'a' as React.ElementType,
  href,
  onMore,
  ...props
}) => {
  const ref = useRef<HTMLDivElement | null>(null);

  const onScroll = () => {
    if (ref.current) {
      const rect = ref.current.getBoundingClientRect();
      // console.log('rect', rect);
      if (rect.top < window.innerHeight * 0.9) {
        onMore();
      }
    }
  };

  useEventListener('scroll', onScroll);

  // Set size at the first client-side load
  useIsomorphicLayoutEffect(() => {
    onScroll();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const classNames = getClassNames('infinite-loader');

  return (
    <StyledInfiniteLoader as={as} ref={ref} href={href} rel="next" className={classNames} {...props}>
      <Loading></Loading>
    </StyledInfiniteLoader>
  );
};