export default {
  name: "Virtual List",
  isPending: true,
  acceptsChildren: true,
  category: "Container",
  stylesProps: [],
  props: [
    {
      label: "Type",
      name: "type",
      type: { kind: "appType", isList: true },
      default: { kind: "null", isList: true },
      required: true,
      placeholder: "",
      help: "The type for the items in the list",
    },
    {
      label: "Data",
      name: "data",
      type: { kind: "dynamic", template: "type", isList: true },
      required: true,
      default: null,
      placeholder: "",
      help: "The data for the items in the list",
    },
    {
      label: "Estimated size",
      name: "estimatedSize",
      type: { kind: "number", isDynamic: false },
      required: true,
      isDefault: true,
      default: 32,
      placeholder: "",
      help: "The esitimated height in px of each item in the list",
    },
    {
      label: "Overscan",
      name: "overscan",
      type: { kind: "number", isDynamic: false },
      required: false,
      isDefault: false,
      default: 5,
      placeholder: "",
      help: "The number of items to render outside the visible area",
    },
    {
      label: "Has next pgage",
      name: "hasNextPage",
      type: { kind: "boolean", isDynamic: true },
      required: false,
      isDefault: false,
      default: false,
      placeholder: "",
      help: "Whether there is a next page of data to load",
    },
    {
      label: "Is loading more data",
      name: "isFetchingNextPage",
      type: { kind: "boolean", isDynamic: true },
      required: false,
      isDefault: false,
      default: false,
      placeholder: "",
      help: "Whether the next page of data is being fetched",
    },
    {
      label: "Preview items",
      name: "__length",
      type: { kind: "number", isDynamic: false },
      required: false,
      isDefault: true,
      default: 5,
      placeholder: "",
      help: "The number of items to show in preview",
    },
  ],
  events: [
    {
      label: "When needs more data",
      name: "fetchNextPage",
      help: "Triggered when the list needs more data, e.g. when the user scrolls to the bottom",
      isDefault: false,
    },
  ],
  defaultStyles: {
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "column",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "overflow-y": "auto",
      "overflow-x": "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
    },
  },
  sources: [
    {
      id: "data",
      name: "{{= it.component.name }}'s current data",
      description: "The current data of the list",
      template: "${{= it.component.id }}_data",
      instanceTemplate: `{{= it.component.name }}'s current data`,
      outputType: { kind: "dynamic", template: "type", isList: false },
      source: "Parent",
    },
    {
      id: "index",
      name: "{{= it.component.name }}'s current index",
      description: "The current index of the list",
      template: "${{= it.component.id }}_index",
      instanceTemplate: `{{= it.component.name }}'s current index`,
      outputType: { kind: "number" },
      source: "Parent",
    },
  ],
} as const;