import { styleProps } from "./Input";

export default {
  name: "ListBox",
  acceptsChildren: true,
  category: "Input",
  optionalLayers: [
    {
      id: "ListContent",
      name: "List Content",
      acceptsChildren: true,
      props: [],
      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",
        },
      ],
      optionalLayers: [
        {
          id: "ListItem",
          name: "List Item",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "": {
              position: "relative",
              "user-select": "none",
              display: "flex",
              "align-items": "center",
              gap: "8px",
              cursor: "option",
              "justify-content": "space-between",
              "border-radius": "var(--theme-radii-md)",
            },
            ":disabled": {
              opacity: 0.5,
              cursor: "not-allowed",
            },
            "[data-highlighted]": {
              "background-color":
                "color-mix(in oklch, var(--theme-bg-emphasized) 60%, transparent)",
            },
          },
          additionalStates: [
            {
              label: "is hightlighted",
              value: "[data-highlighted]",
            },
          ],
          optionalLayers: [
            {
              id: "ListItemText",
              name: "List Item Text",
              acceptsChildren: false,
              props: [],
              defaultStyles: {
                "": {
                  "flex-grow": "1",
                  "flex-shrink": "1",
                  "flex-basis": "0%",
                },
              },
            },
            {
              id: "ListItemIndicator",
              name: "List Item Indicator",
              acceptsChildren: true,
              props: [],
              defaultStyles: {
                "": {
                  display: "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  gap: "4px",
                },
                svg: {
                  width: "16px",
                  height: "16px",
                },
              },
            },
          ],
        },
      ],
    },
    {
      id: "ListInput",
      name: "List Input",
      acceptsChildren: false,
      styleProps: styleProps,
      props: [
        {
          label: "Is disabled",
          name: "disabled",
          type: { kind: "boolean", isDynamic: true },
          default: false,
          placeholder: "",
          help: "Whether the input is disabled",
        },
      ],
      defaultStyles: {
        ":focus-visible": {
          "outline-width": "1px",
          "outline-style": "solid",
          "outline-color": "var(--palette-ring)",
        },
        ":user-invalid": {
          "border-color": "var(--theme-border-error)",
        },
        ":disabled": {
          opacity: 0.5,
          cursor: "not-allowed",
        },
        "": {
          width: "100%",
          "min-width": "0",
          outline: "var(--theme-sizes-zero)",
          position: "relative",
          "text-align": "left",
          "border-radius": "var(--theme-radii-md)",
          "font-family": "var(--theme-fonts-body)",
          display: "inline-flex",
        },
      },
    },
  ],
  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: "Items",
      name: "items",
      type: { kind: "dynamic", template: "type", isList: true },
      required: true,
      default: null,
      placeholder: "",
      help: "The data for the items in the list",
    },
    {
      label: "Label",
      name: "itemToString",
      type: { kind: "text", isDynamic: true, isCallback: "list" },
      required: true,
      default: null,
      placeholder: "",
      help: "The values for the items in the select",
      additionalSources: [
        {
          id: "$$i",
          name: "options's current index",
          description: "The current index of the list",
          template: "$$i",
          instanceTemplate: `option's current index`,
          outputType: { kind: "number" },
        },
        {
          id: "$$d",
          name: "options's current data",
          description: "The current data of the list",
          template: "$$d",
          instanceTemplate: `option's current data`,
          outputType: {
            kind: "dynamic",
            template: "type",
            isList: false,
          },
          source: "List",
          sourceProp: "options",
        },
      ],
    },
    {
      label: "Initial Value",
      name: "initialValue",
      isDefault: true,
      type: {
        kind: "dynamic",
        template: "type",
        isList: true,
        isDynamic: true,
      },
      default: null,
      placeholder: "Enter a default value",
      help: "The listbox's default value",
    },
    {
      label: "Allow Multiple",
      name: "multiple",
      type: { kind: "boolean", isDynamic: true },
      required: false,
      isDefault: true,
      default: true,
      placeholder: "",
      help: "Whether the listbox allows multiple selections",
    },
    {
      label: "Loop focus",
      name: "loopFocus",
      type: { kind: "boolean", isDynamic: false },
      required: false,
      isDefault: false,
      default: false,
      placeholder: "",
      help: "Whether the focus should loop around when navigating through items",
    },
    {
      label: "Typeahead",
      name: "typeahead",
      type: { kind: "boolean", isDynamic: false },
      required: false,
      isDefault: false,
      default: true,
      placeholder: "",
      help: "Whether the listbox supports typeahead navigation",
    },
    {
      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: {
    "": {
      diplay: "flex",
      "flex-direction": "column",
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "6px",
      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)",
    },
  },
  events: [
    {
      label: "When changed",
      name: "onValueChange",
      help: "Select an action to run when listbox's value has changed",
      isDefault: true,
      additionalSources: [
        {
          id: "QcMxXrgXQdKQHEG7Bji6k",
          name: "New Value",
          instanceTemplate: "New Value",
          description: "The new value of the select",
          template: "$$payload",
          outputType: { kind: "dynamic", template: ".type", isList: true },
        },
      ],
    },
  ],
  sources: [
    {
      id: "selected items",
      name: "{{= it.component.name }}'s current value",
      provider: "StateProvider",
      description: "The current value of the select",
      template: "$get('{{= it.component.id}}', { value: [] }).value",
      instanceTemplate: `{{= it.component.name }}'s current value`,
      outputType: {
        kind: "dynamic",
        template: "type",
        isList: true,
      },
    },
  ],
  defaultChildren: [
    {
      kind: "ListBox$Brevity.ListContent",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "ListBox$Brevity.ListContent.ListItem",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "ListBox$Brevity.ListContent.ListItem.ListItemText",
              props: {},
              styleProps: {},
              children: [],
            },
            {
              kind: "ListBox$Brevity.ListContent.ListItem.ListItemIndicator",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Icon$Brevity",
                  props: {
                    children: {
                      fill: false,
                      icon: "check",
                      pack: "materialsymbolsoutlined",
                      __type: "icon",
                      weight: 400,
                    },
                  },
                  styleProps: {},
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    },
  ],
} as const;
