import PropTypes from "prop-types";
import tagAttributeProps, {
  tagAttributePropsName
} from "../../propTypes/htmlAttributes.propTypes";
import customClassProps, {
  customClassPropName
} from "../../propTypes/customClassName.propTypes";
import automationProps, {
  automationPropsName
} from "../../propTypes/automation.propTypes";
import defaultCustomIds from "./Pagination.customIds";
import ButtonConstantProps from "../button/Button.constantProps";
import BoxConstantProps from "../layout/Box.constantProps";

export default {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      id: PropTypes.number.isRequired,
      isSelected: PropTypes.bool,
      disabled: PropTypes.bool
    })
  ),
  previousButtonOptions: PropTypes.shape({
    text: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired,
    variant: PropTypes.string,
    size: PropTypes.string,
    shape: PropTypes.string
  }),
  nextButtonOptions: PropTypes.shape({
    text: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired,
    variant: PropTypes.string,
    size: PropTypes.string,
    shape: PropTypes.string
  }),
  onClick: PropTypes.func,
  onNextClick: PropTypes.func,
  justifyContent: PropTypes.oneOf([
    BoxConstantProps.justifyContent.start,
    BoxConstantProps.justifyContent.end,
    BoxConstantProps.justifyContent.around,
    BoxConstantProps.justifyContent.between
  ]),
  onPreviousClick: PropTypes.func,
  dataId: PropTypes.object,
  isStretch: PropTypes.bool,

  isNext: PropTypes.bool,
  isPrevious: PropTypes.bool,

  ...customClassProps,
  ...automationProps,
  ...tagAttributeProps
};

export const defaultProps = {
  nextButtonOptions: {
    text: "Next",
    color: ButtonConstantProps.color.primary,
    variant: ButtonConstantProps.variant.contained,
    size: ButtonConstantProps.size.large,
    shape: ButtonConstantProps.shape.square
  },
  previousButtonOptions: {
    text: "Previous",
    color: ButtonConstantProps.color.primary,
    variant: ButtonConstantProps.variant.contained,
    size: ButtonConstantProps.size.large,
    shape: ButtonConstantProps.shape.square
  },
  [automationPropsName]: defaultCustomIds,
  [customClassPropName]: {},
  [tagAttributePropsName]: {}
};

export const propsDescription = {
  options: "To show page count",
  onClick: "To listen page count click",
  onNextClick: "To listen next button click",
  onPreviousClick: "To listen Previous button click",
  dataId: "To add data-id attribute",
  justifyContent: "To align elements",
  isStretch: "To show button as stretch",
  isNext: "To show or disable next button",
  isPrevious: "To show or disable previous button",
  previousButtonOptions: "To modify previous button UI changes",
  nextButtonOptions: "To modify next button UI changes"
};
