import React, {
  FC,
  ReactNode,
  useCallback,
  useMemo,
  useRef,
} from 'react';
import { useSharedValue } from 'react-native-reanimated';
import type { CarouselHandles } from '../types';
import { CarouselContext } from './useCarouselContext';
import { InternalCarouselContext } from './useInternalCarouselContext';

type Props = {
  children: ReactNode;
};

function CarouselContainer({ children }: Props) {
  const carouselHandlers = useRef<CarouselHandles>(null);
  const currentPage = useSharedValue(0);
  const totalPage = useSharedValue(0);

  const setCarouselHandlers = useCallback((handlers: CarouselHandles) => {
    carouselHandlers.current = handlers;
  }, []);

  const context = useMemo(() => {
    return {
      goNext: () => carouselHandlers.current?.goNext(),
      goPrev: () => carouselHandlers.current?.goPrev(),
      snapToItem: (index: number, animated: boolean) =>
        carouselHandlers.current?.snapToItem(index, animated),
      currentPage,
      totalPage,
    };
  }, []);

  const internalContext = useMemo(
    () => ({
      setCarouselHandlers,
    }),
    []
  );
  
  return (
    <CarouselContext.Provider value={context}>
      <InternalCarouselContext.Provider value={internalContext}>
        {children}
      </InternalCarouselContext.Provider>
    </CarouselContext.Provider>
  );
}

export default function withCarouselContext<T extends Record<string, unknown>>(Component: FC<T>) {
  return (props: T) => {
    return (
      <CarouselContainer>
        <Component {...props} />
      </CarouselContainer>
    );
  };
}