import { func } from "prop-types";
import React from "react";
import imgUrl from "../../../images/pagination.png";
import BoxConstantProps from "../../layout/Box.constantProps";
import decorationStyles from "./Pagination.model.decorator.module.css";
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: "Pagination Component",
      imgUrl: imgUrl,
      description: "Use the Pagination component to show page navigation "
    },
    tabsList: ["default", "alignRight", "alignLeft", "alignBetween", "alignAround", "PreviousAndNext", "Href", "Functionality"],
    tabsDetail: {
      default: {
        displayName: "Default",
        description: "Default mode",
        componentsList: ["default"],
        componentsDetail: {
          default: {
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1,
              isSelected: true
            }]
          }
        }
      },
      alignRight: {
        displayName: "alignRight",
        description: "alignRight mode",
        componentsList: ["alignRight"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          alignRight: {
            justifyContent: BoxConstantProps.justifyContent.end,
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1,
              isSelected: true
            }]
          }
        }
      },
      alignLeft: {
        displayName: "alignLeft",
        description: "alignLeft mode",
        componentsList: ["alignLeft"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          alignLeft: {
            justifyContent: BoxConstantProps.justifyContent.start,
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1,
              isSelected: true
            }]
          }
        }
      },
      alignBetween: {
        displayName: "alignBetween",
        description: "alignBetween mode",
        componentsList: ["alignBetween"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          alignBetween: {
            justifyContent: BoxConstantProps.justifyContent.between,
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1,
              isSelected: true
            }]
          }
        }
      },
      alignAround: {
        displayName: "alignAround",
        description: "alignAround mode",
        componentsList: ["alignAround"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          alignAround: {
            justifyContent: BoxConstantProps.justifyContent.around,
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1,
              isSelected: true
            }]
          }
        }
      },
      PreviousAndNext: {
        displayName: "Previous and Next",
        description: "Previous and Next mode",
        componentsList: ["PreviousAndNext"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          PreviousAndNext: {
            isPrevious: true,
            isNext: true,
            justifyContent: BoxConstantProps.justifyContent.start,
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1,
              isSelected: true
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1
            }]
          }
        }
      },
      Href: {
        displayName: "Href",
        description: "Href mode",
        componentsList: ["Href"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          Href: {
            isPrevious: true,
            isNext: true,
            justifyContent: BoxConstantProps.justifyContent.start,
            options: [{
              name: "1",
              id: 1,
              href: "https://desk.zoho.com/"
            }, {
              name: "2",
              id: 1,
              href: "https://desk.zoho.com/"
            }, {
              name: "3",
              id: 1,
              isSelected: true,
              href: "https://desk.zoho.com/"
            }, {
              name: "4",
              id: 1,
              disabled: true,
              href: "https://desk.zoho.com/"
            }, {
              name: "5",
              id: 1,
              href: "https://desk.zoho.com/"
            }]
          }
        }
      },
      Functionality: {
        displayName: "Functionality",
        description: "Functionality mode",
        componentsList: ["Functionality"],
        $decoratorItemClassName: decorationStyles.dec_main,
        componentsDetail: {
          Functionality: {
            isPrevious: true,
            isNext: true,
            onClick: obj => {
              alert(JSON.stringify(obj));
            },
            onNextClick: () => {
              alert("next button");
            },
            onPreviousClick: () => {
              alert("Previous button");
            },
            justifyContent: BoxConstantProps.justifyContent.start,
            options: [{
              name: "1",
              id: 1
            }, {
              name: "2",
              id: 1
            }, {
              name: "3",
              id: 1,
              isSelected: true
            }, {
              name: "4",
              id: 1,
              disabled: true
            }, {
              name: "5",
              id: 1
            }]
          }
        }
      }
    }
  };
});