import { getClassNames } from '@websolutespa/bom-core';
import React from 'react';
import styled from 'styled-components';
import { PaginationItem } from './pagination-item';

type Props = {
  'aria-label'?: string;
  isBefore?: boolean;
  onClick?: (e: React.MouseEvent) => void;
};

const StyledPaginationItem = styled(PaginationItem)`
  svg {
    color: currentColor;
    stroke: currentColor;
    width: 1em;
    height: 1em;
  }

  .pagination-ellipsis__more {
    &.before {
      transform: rotate(180deg);
    }
  }

  &:hover {
    .pagination-ellipsis__ellipsis {
      display: none;
    }
  }

  &:not(:hover) {
    .pagination-ellipsis__more {
      display: none;
    }
  }
`;

export const PaginationEllipsis = ({
  isBefore,
  onClick,
  ...props
}: Props) => {
  const moreClassNames = getClassNames('pagination-ellipsis__more', { before: isBefore });
  return (
    <StyledPaginationItem
      className="pagination-ellipsis"
      aria-label={props['aria-label']}
      onClick={(event) => onClick && onClick(event)}
    >
      <svg
        className="pagination-ellipsis__ellipsis"
        viewBox="0 0 24 24"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
        shapeRendering="geometricPrecision">
        <circle cx="12" cy="12" r="1" fill="currentColor" />
        <circle cx="19" cy="12" r="1" fill="currentColor" />
        <circle cx="5" cy="12" r="1" fill="currentColor" />
      </svg>
      <svg
        className={moreClassNames}
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
        shapeRendering="geometricPrecision">
        <path d="M13 17l5-5-5-5" />
        <path d="M6 17l5-5-5-5" />
      </svg>
    </StyledPaginationItem>
  );
};

PaginationEllipsis.displayName = 'PaginationEllipsis';