import React from "react";
import PropTypes from "prop-types";
import cn from "classnames";
import { IPageItemProps } from "./pagination.d";

const PageItem = (props: IPageItemProps) => {
  const { children, onClick, active = false, disabled = false } = props;

  const onLinkClick = (e: React.SyntheticEvent) => {
    e.preventDefault();
    onClick();
  };

  return (
    <li
      className={cn("page-item text-center", { active, disabled })}
      style={{ cursor: disabled ? "inherit" : "pointer", WebkitUserSelect: "none" }}
      data-testid={props["data-testid"]}
    >
      {disabled || active ? (
        <div
          className="page-link"
          aria-label={props["aria-label"]}
          aria-hidden={props["aria-label"] ? "true" : "false"}
          data-testid={`${props["data-testid"]}-link`}
        >
          {children}
        </div>
      ) : (
        <a
          onClick={onLinkClick}
          className="page-link"
          href="#/"
          aria-label={props["aria-label"]}
          data-testid={`${props["data-testid"]}-link`}
        >
          <div aria-hidden={props["aria-label"] ? "true" : "false"}>{children}</div>
        </a>
      )}
    </li>
  );
};

PageItem.displayName = "Pagination Item";

PageItem.defaultProps = {
  active: false,
  disabled: false
};

PageItem.propTypes = {
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  onClick: PropTypes.func
};

export default PageItem;