export default {
  name: "List",
  acceptsChildren: true,
  category: "Container",
  styleProps: [
    {
      label: "Divide",
      name: "data-divide",
      type: { kind: "select" },
      options: [
        {
          label: "None",
          value: "none",
          selector: "",
          styles: {},
        },
        {
          label: "Divide Y",
          value: "y",
          selector: '[data-divide="y"] > * + * > *',
          styles: {
            "": {
              "border-top-width": "1px",
              "border-top-color": "var(--theme-border-default)",
              "border-top-style": "solid",
            },
          },
        },
        {
          label: "Divide X",
          value: "x",
          selector: '[data-divide="x"] > * + * > *',
          styles: {
            "": {
              "border-right-width": "1px",
              "border-right-color": "var(--theme-border-default)",
              "border-right-style": "solid",
            },
          },
        },
      ],
      default: "none",
    },
  ],
  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: "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",
    },
  ],
  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",
      "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;