import { FC, useEffect, useRef } from 'react';

import { useGetRefMaps } from '@cleartrip/ct-design-scroll-container';

import { Container as ContainerComponent, ContainerRef, IContainer } from '@cleartrip/ct-design-container';

const IDContainer: FC<Omit<IContainer, 'id'> & { id: string }> = (props) => {
  const ref = useRef<ContainerRef>(null);
  const refs = useGetRefMaps();
  /**
   * Assign the ref to the ref map
   */
  useEffect(() => {
    // @ts-expect-error - TODO: fix this
    refs[props.id] = ref;
  }, [props.id, refs]);
  return <ContainerComponent ref={ref} {...props} />;
};

IDContainer.displayName = 'IDContainer';

export const Container = IDContainer;