import { ILazyComponent, ILazyableProps } from '@websolutespa/bom-mixer-models';
import dynamic from 'next/dynamic';
import React, { useEffect, useState } from 'react';

type LazyLoaderClientProps = {
  components: ILazyComponent[],
  initialIndex?: number;
};

const lazyLoadComponent = (component: ILazyComponent, index: number = 0): React.ReactElement => {
  const Component = dynamic<ILazyableProps<any>>(() =>
    import(`../${component.type}/${component.type}`).catch(() =>
      import('../not-found/not-found')
    )
  );
  return (
    <Component item={component} index={index} />
  );
};

export function LazyLoaderClient({ components, initialIndex = 0 }: LazyLoaderClientProps) {
  const [views, setViews] = useState<React.JSX.Element[]>([]);

  useEffect(() => {
    async function loadViews() {
      const componentPromises = components.map(async (component, index: number) => {
        const View: any = await lazyLoadComponent(component, initialIndex + index);
        return (
          <View key={index} />
        );
      });
      Promise.all(componentPromises).then(views => setViews(views));
    }
    loadViews();
  }, [components]);

  return (
    <React.Suspense fallback="Loading views...">
      {views}
    </React.Suspense>
  );
}