import { Fab, FabColorVariant } from 'components/fab';
import { Container } from 'components/layout';
import { Ellipse } from 'icons';
import { FC, useCallback } from 'react';
import { FlexDirectionVariant } from 'types/styles';

export const Dots: FC<DotsProps> = ({
  count,
  size = 20,
  selectedIndex,
  flexDirectionVariant,
  hoverColorVariant,
  setSelectedIndex,
}) => {
  const getColorVariant = useCallback(
    (index: number) => {
      return index === selectedIndex ? 'base-06' : 'base-03';
    },
    [selectedIndex]
  );

  return (
    <Container flexDirection={flexDirectionVariant}>
      {Array(count)
        .fill(0)
        .map(({}, index) => (
          <Fab
            key={index}
            onPress={() => setSelectedIndex(index)}
            variant="plain"
            size={size}
            shapeVariant="circle"
            colorVariant="transparent"
            hoverColorVariant={hoverColorVariant}
            centerElement={<Ellipse colorVariant={getColorVariant(index)} />}
          />
        ))}
    </Container>
  );
};

export interface DotsProps {
  flexDirectionVariant: FlexDirectionVariant;
  count: number;
  size?: number;
  hoverColorVariant?: FabColorVariant;
  selectedIndex: number;
  setSelectedIndex: (index: number) => void;
}