import { DefaultChild } from "@brevity-builder/models";

export default {
  name: "Data Table",
  acceptsChildren: false,
  category: "Data",
  optionalLayers: [
    {
      id: "ValueColumn",
      name: "Value Column",
      acceptsChildren: true,
      props: [
        {
          label: "Header",
          name: "header",
          type: { kind: "text", isDynamic: true },
          default: "Header",
          isDefault: true,
          required: true,
          placeholder: "enter some text",
          help: "The text that displays in the button",
        },
        {
          label: "Value",
          name: "accessorFn",
          type: { kind: "value" },
          default: null,
          isDefault: true,
          required: true,
          placeholder: "enter some text",
          help: "The text that displays in the button",
          additionalSources: [
            {
              id: "row",
              name: "Row Data",
              instanceTemplate: "Row data",
              description: "The data of the current row",
              template: "row",
              outputType: { kind: "dynamic", template: "data.parentRef.type" },
              callback: ["row"],
            },
          ],
        },
      ],
      defaultStyles: {
        "": {
          height: "3rem",
          padding: "0 1rem",
          "font-weight": "500",
          "letter-spacing": "var(--theme-letterSpacings-wider)",
          color: "var(--theme-fg-default)",
          "padding-top": "16px",
          "padding-bottom": "16px",
          "padding-right": "16px",
          "padding-left": "16px",
        },
      },
      sources: [
        {
          id: "row",
          name: "current rows's data",
          description: "The data of the current row",
          template: "rowData",
          instanceTemplate: `current row's data`,
          outputType: {
            kind: "dynamic",
            template: "data.parentRef.type",
            isList: false,
          },
          source: "Parent",
        },
      ],
    },
    {
      id: "DisplayColumn",
      name: "Display Column",
      acceptsChildren: true,
      props: [
        {
          label: "Header",
          name: "header",
          type: { kind: "text", isDynamic: true },
          isDefault: true,
          default: "Header",
          required: true,
          placeholder: "enter some text",
          help: "The text that displays in the button",
        },
      ],
      defaultStyles: {
        "": {
          height: "3rem",
          padding: "0 1rem",
          "font-weight": "500",
          "letter-spacing": "var(--theme-letterSpacings-wider)",
          color: "var(--theme-brand-neutral-600)",
          "padding-top": "16px",
          "padding-bottom": "16px",
          "padding-right": "16px",
          "padding-left": "16px",
        },
      },
      sources: [
        {
          id: "row",
          name: "current rows's data",
          description: "The data of the current row",
          template: "rowData",
          instanceTemplate: `current row's data`,
          outputType: {
            kind: "dynamic",
            template: "data.parentRef.type",
            isList: false,
          },
          source: "Parent",
        },
      ],
    },
    {
      id: "CheckboxColumn",
      name: "Checkbox Column",
      acceptsChildren: true,
      dependsOn: ["Checkbox$Brevity"],
      props: [
        {
          label: "Unique Id",
          name: "id",
          isDefault: true,
          type: { kind: "text", isDynamic: true },
          default: "select",
          required: true,
          placeholder: "enter some text",
          help: "The text that displays in the button",
        },
      ],
      defaultStyles: {
        "": {
          height: "3rem",
          padding: "0 1rem",
          "font-weight": "500",
          "letter-spacing": "var(--theme-letterSpacings-wider)",
          color: "var(--theme-brand-neutral-600)",
          "padding-top": "16px",
          "padding-bottom": "16px",
          "padding-right": "16px",
          "padding-left": "16px",
        },
      },
      sources: [
        {
          id: "row",
          name: "current rows's data",
          description: "The data of the current row",
          template: "rowData",
          instanceTemplate: `current row's data`,
          outputType: {
            kind: "dynamic",
            template: "data.parentRef.type",
            isList: false,
          },
          source: "Parent",
        },
      ],
    },
  ],
  props: [
    {
      label: "Type",
      name: "type",
      required: true,
      type: { kind: "appType", isList: true },
      default: { kind: "null", isList: true },
      placeholder: "",
      help: "The type for the items in the list",
    },
    {
      label: "Data",
      name: "data",
      required: true,
      type: { kind: "dynamic", template: "type", isList: true },
      default: null,
      placeholder: "",
      help: "The data for the items in the list",
    },
    {
      label: "Search Term",
      name: "searchTerm",
      type: { kind: "text", isDynamic: true },
      isDefault: true,
      default: null,
      placeholder: "",
      help: "A search term to filter the data",
    },
    {
      label: "Initial Page Size",
      name: "initialPageSize",
      type: { kind: "number", isDynamic: true },
      default: {
        __type: "value",
        source: {
          data: {
            number: 10,
          },
          kind: "Static Number",
          kindId: "334724058357694537",
        },
        transforms: [],
      },
      placeholder: "",
      help: "The initial page size",
    },
    {
      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: [],
  defaultStyles: {
    "": {
      "border-style": "solid",
      "border-width": "1px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "var(--theme-radii-md)",
    },
  },
  sources: [
    {
      id: "selectedRows",
      name: "{{= it.component.name }}'s selected rows",
      provider: "StateProvider",
      description: "The current selected rows of the table",
      template:
        "$get('{{= it.component.id}}', { selectedRows: [] }).selectedRows",
      instanceTemplate: `{{= it.component.name }}'s selected rows`,
      outputType: { kind: "dynamic", template: "type", isList: true },
    },
  ],
  actions: [],
  defaultChildren: [
    {
      kind: "DataTable$Brevity.ValueColumn",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "DataTable$Brevity.ValueColumn",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "DataTable$Brevity.ValueColumn",
      props: {},
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
};