import React from 'react';
import { useCarousel } from './hooks/useCarousel';
import {
  CarouselContainer,
  CarouselWrapper,
  CarouselContent,
  CardsRow,
  PageControl
} from './styles';
import { DefaultNavigationArrow } from './DefaultNavigationArrow';
import { DefaultPageDot } from './DefaultPageDot';
import { CarouselComponentProps } from './types';

export const CarouselComponent: React.FC<CarouselComponentProps> = ({
  items,
  options,
  showArrows = true,
  showDots = true,
  arrowComponent: CustomArrow,
  dotComponent: CustomDot,
  className
}) => {
  const {
    currentPage,
    totalPages,
    carouselRef,
    handlePrevious,
    handleNext,
    scrollToPage,
    handleMouseDown,
    handleMouseUp,
    handleMouseLeave,
    handleTouchStart,
    handleTouchMove,
    handleTouchEnd
  } = useCarousel(items.length, options);

  const ArrowComponent = CustomArrow || DefaultNavigationArrow;
  const DotComponent = CustomDot || DefaultPageDot;

  return (
    <CarouselContainer className={className}>
      <CarouselWrapper>
        {showArrows && (
          <ArrowComponent
            direction="left"
            onClick={handlePrevious}
            disabled={currentPage === 0}
          />
        )}

        <CarouselContent>
          <CardsRow
            ref={carouselRef}
            onMouseDown={handleMouseDown}
            onMouseUp={handleMouseUp}
            onMouseLeave={handleMouseLeave}
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}
          >
            {items}
          </CardsRow>
        </CarouselContent>

        {showArrows && (
          <ArrowComponent
            direction="right"
            onClick={handleNext}
            disabled={currentPage >= totalPages - 1}
          />
        )}
      </CarouselWrapper>

      {showDots &&
        totalPages > 1 && (
          <PageControl>
            {Array.from({ length: totalPages }).map((_, pageIndex) => (
              <DotComponent
                key={pageIndex}
                active={pageIndex === currentPage}
                onClick={() => scrollToPage(pageIndex)}
                index={pageIndex}
              />
            ))}
          </PageControl>
        )}
    </CarouselContainer>
  );
};

export { CarouselItem } from './CarouselItem';