import React from "react";
import style from "./Pagination.module.css";
import Box from "../layout/Box";

import Button from "../button/Button";
import BoxConstantProps from "../layout/Box.constantProps";
import Link from "../link/Link";
export default function Pagination(props) {
  let {
    options,
    onClick,
    onNextClick,
    onPreviousClick,
    dataId,
    justifyContent,
    isStretch,
    isNext,
    isPrevious,
    previousButtonOptions,
    nextButtonOptions
  } = props;

  return (
    <Box
      tagName={"ul"}
      tagAttributeProps={{ "data-id": dataId }}
      isCover={false}
      direction={BoxConstantProps.direction.row}
      justifyContent={justifyContent}
      isContainer={true}
      customClassName={style.base}
    >
      {isPrevious ? (
        <Button
          onClick={onPreviousClick && onPreviousClick}
          {...previousButtonOptions}
        />
      ) : null}

      {options.length &&
        options.map((obj, i) => {
          let extraStyle = `${
            obj.isSelected ? style.itemHighlight : style.item
          } ${obj.disabled ? style.disabled : ""}`;
          return (
            <Box
              key={i}
              tagName={"li"}
              customClassName={extraStyle}
              flexible={isStretch}
              tagAttributeProps={{
                onClick: onClick && onClick.bind(this, obj)
              }}
            >
              {obj.href ? (
                <Link text={obj.name} target="_blank" href={obj.href} />
              ) : (
                obj.name
              )}
            </Box>
          );
        })}

      {isNext ? (
        <Button onClick={onNextClick && onNextClick} {...nextButtonOptions} />
      ) : null}
    </Box>
  );
}
