import { getClassNames } from '@websolutespa/bom-core';
import React from 'react';
import styled from 'styled-components';
import { Button } from '../button/button';

type Props = {
  href?: string;
  active?: boolean;
  disabled?: boolean;
  onClick?: (e: React.MouseEvent) => void;
};

type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;

export type PaginationItemProps = NativeAttrs & Props;

const StyledPaginationItem = styled.li`
  margin-right: 0.428em;
  display: inline-block;

  button, a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pagination-size);
    min-width: var(--pagination-size);
    user-select: none;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font-size: inherit;
    text-transform: capitalize;
    box-shadow: none;
    outline: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-600);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-100);
    transition: all linear 200ms 0ms;

    &:hover {
      background-color: var(--color-primary-100);
    }

    :global(svg) {
      width: 1.3em;
      height: 1.3em;
    }

    &.active {
      font-weight: 700;
      background-color: var(--color-primary-600);
      color: var(--color-neutral-100);
      box-shadow: var(--shadow-xs);
    }

    &.active:hover {
      background-color: var(--color-primary-900);
      box-shadow: var(--shadow-sm);
    }

    &.disabled {
      color: var(--color-neutral-400);
      cursor: not-allowed;
    }

    &.disabled:hover {
      background-color: var(--color-neutral-200);
    }
  }
`;

export const PaginationItem = ({
  href,
  className,
  children,
  active,
  disabled,
  onClick,
  ...props
}: PaginationItemProps) => {

  const onClick_ = (event: React.MouseEvent) => {
    if (href) {
      event.preventDefault();
    }
    if (disabled) {
      return;
    }
    onClick && onClick(event);
  };

  const classNames = getClassNames('pagination-item', className, { active, disabled });
  return (
    <StyledPaginationItem>
      <Button
        aria-label={props['aria-label']}
        className={classNames}
        onClick={onClick_}
        {...(href ? { as: 'a', href } : {})}
        {...props}
      >
        {children}
      </Button>
    </StyledPaginationItem>
  );
};

PaginationItem.displayName = 'PaginationItem';