import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withKnobs, number, boolean as _boolean, text } from "@storybook/addon-knobs";
import PaginationControls from "./index.js";
var totalPages = 43;
var buttonStories = storiesOf("Navigation|PaginationControls/Using Buttons (no href)", module);
buttonStories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, React.createElement("p", {
    className: "push-quad--bottom"
  }, "Use the ", React.createElement("strong", null, "currentPage"), " knob to see the various states of the PaginationControls."), story());
});
buttonStories.add("Default", function () {
  return React.createElement(PaginationControls, {
    currentPage: number("currentPage", 1),
    totalPages: number("totalPages", totalPages),
    goToPage: action("page changed")
  });
}).add("Loading", function () {
  return React.createElement(PaginationControls, {
    currentPage: number("currentPage", 1),
    totalPages: number("totalPages", totalPages),
    goToPage: action("page changed"),
    isLoading: _boolean("isLoading", true)
  });
}).add("Customize totalSlots", function () {
  return React.createElement(PaginationControls, {
    currentPage: number("currentPage", 20),
    totalSlots: number("totalSlots ( >= 7)", 11),
    totalPages: number("totalPages", totalPages),
    goToPage: action("page changed")
  });
});
var linkStories = storiesOf("Navigation|PaginationControls/Using Links (with href)", module);
linkStories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, React.createElement("p", {
    className: "push-quad--bottom"
  }, "Use the ", React.createElement("strong", null, "currentPage"), " knob to see the various states of the PaginationControls."), story());
});
linkStories.add("With an hrefBaseUrl supplied", function () {
  return React.createElement("div", null, React.createElement("p", {
    className: "push-double--bottom"
  }, "When using hrefs to navigate between pages, supply an ", React.createElement("code", null, "hrefBaseUrl"), " that includes the string", " ", React.createElement("code", {
    className: " soft-half background--light-blue-100"
  }, "[pageNumber]"), ", which will be replaced by the appropriate page number."), React.createElement(PaginationControls, {
    currentPage: number("currentPage", 1),
    totalPages: number("totalPages", totalPages),
    goToPage: action("page changed"),
    hrefBaseUrl: text("hrefBaseUrl", "https://www.optimizely.com/projects/page-[pageNumber]")
  }));
});