import { FC } from 'react';
import { Row } from 'components/layout';
import { Fab, FabColorVariant, FabVariant } from 'components/fab';
import { Text } from 'components/text';

export const PaginationLeft: FC<PaginationLeftProps> = ({
  pages,
  hoverColorVariant,
  activePage,
}) => {
  const getVariant = (index: number): FabVariant => {
    return activePage === index + 1 ? ('outline' as FabVariant) : ('text' as FabVariant);
  };

  const arePagesOver = pages > 4;
  const initialArray = arePagesOver ? 3 : pages;
  const dots = arePagesOver && '...';

  return (
    <Row alignItems="center">
      <Row alignItems="center">
        {Array(initialArray)
          .fill(0)
          .map((item, index) => (
            <Fab
              mr="xs"
              onPress={() => {}}
              colorVariant="transparent"
              variant={getVariant(index)}
              hoverColorVariant={hoverColorVariant}
              sizeVariant="large"
              shapeVariant="round"
              centerElement={
                <Text variant="body" color="title">
                  {index + 1}
                </Text>
              }
            />
          ))}
        <Text mb="3xs" variant="body" color="title">
          {dots}
        </Text>
        <Text ml="l" variant="body" color="title">
          {pages}
        </Text>
      </Row>
    </Row>
  );
};

export interface PaginationLeftProps {
  pages: number;
  hoverColorVariant?: FabColorVariant;
  activePage: number;
}