const buttonDefaultStyles = {
  ":hover": {
    "background-color": "var(--theme-border-default)",
  },
  ":active": {
    "background-color": "var(--theme-border-emphasized)",
  },
  ":focus": {
    outline: "none",
  },
  ":focus-visible": {
    "box-shadow": "var(--theme-shadows-outline)",
  },
  ":disabled": {
    opacity: 0.4,
    cursor: "not-allowed",
    "box-shadow": "none",
  },
  "": {
    "font-family": "var(--theme-fonts-body)",
    "font-weight": "var(--theme-fontWeights-semibold)",
    "font-size": "1rem",
    color: "var(--theme-fg-default)",
    "text-align": "center",
    "flex-grow": "0",
    "flex-shrink": "1",
    "flex-basis": "auto",
    display: "inline-flex",
    "flex-direction": "row",
    "justify-content": "center",
    "align-items": "center",
    gap: "8px",
    width: "auto",
    height: "40px",
    "min-width": "auto",
    "min-height": "auto",
    "max-width": "100%",
    "max-height": "100%",
    "padding-right": "16px",
    "padding-left": "16px",
    "padding-top": "0px",
    "padding-bottom": "0px",
    "border-color": "var(--theme-border-default)",
    "border-radius": "var(--theme-radii-md)",
    "border-width": "0px",
    "border-style": "solid",
    "background-color": "var(--theme-bg-muted)",
    "box-shadow": "var(--theme-shadows-none)",
    cursor: "pointer",
  },
};

export default {
  name: "Pagination",
  acceptsChildren: false,
  category: "Other",
  optionalLayers: [
    {
      id: "PrevTrigger",
      name: "Previous Trigger",
      acceptsChildren: true,
      props: [],
      defaultStyles: buttonDefaultStyles,
    },
    {
      id: "NextTrigger",
      name: "Next Trigger",
      acceptsChildren: true,
      props: [],
      defaultStyles: buttonDefaultStyles,
    },
    {
      id: "PageList",
      name: "Page List",
      acceptsChildren: false,
      props: [],
      defaultStyles: {
        "": {
          display: "flex",
          "flex-direction": "row",
          gap: "8px",
        },
      },
      layers: [
        {
          id: "item",
          name: "Item",
          defaultStyles: buttonDefaultStyles,
        },
        {
          id: "ellipsis",
          name: "Ellipsis",
          defaultStyles: {
            "": {
              display: "flex",
              "justify-content": "center",
              "align-items": "center",
              width: "40px",
              height: "40px",
            },
          },
        },
      ],
    },
  ],
  props: [
    {
      label: "Count",
      name: "count",
      type: { kind: "number", isDynamic: true },
      default: null,
      placeholder: "Total number of items",
      help: "The total number of items",
      required: true,
    },
    {
      label: "Page size",
      name: "pageSize",
      type: { kind: "number", isDynamic: true },
      default: 25,
      placeholder: "Total number of items in a page",
      help: "The number of items in a page",
      required: true,
    },
    {
      label: "Sibling count",
      name: "siblingCount",
      type: { kind: "number", isDynamic: true },
      default: 1,
      placeholder: "Number of siblings to show",
      help: "Number of siblings to show",
    },
    {
      label: "Initial Page",
      name: "page",
      type: { kind: "number", isDynamic: true },
      default: 1,
      placeholder: "Initial page number",
      help: "The initial page number",
    },
  ],
  events: [
    {
      label: "When page changed",
      name: "onPageChange",
      help: "Select an action to run when page is changed",
      isDefault: true,
      additionalSources: [
        {
          id: "kmxnjgTMiH4VeyWHiYJWb",
          name: "New Page Number",
          instanceTemplate: "New Page Number",
          description: "The selected page",
          template: "$$payload",
          outputType: { kind: "number" },
        },
      ],
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "row",
      gap: "8px",
    },
  },
  sources: [],
  actions: [],
};