import Input from "./Input";

export default {
  name: "Select",
  acceptsChildren: false,
  category: "Input",
  styleProps: Input.styleProps.filter((sp: any) => sp?.value !== "flushed"),
  props: [
    {
      label: "Type",
      name: "type",
      required: true,
      type: { kind: "appType", isList: true },
      default: { kind: "null", isList: true },
      placeholder: "",
      help: "The (list) type for the items in the select",
    },
    {
      label: "Options",
      name: "options",
      required: true,
      type: { kind: "dynamic", template: "type", isList: true },
      default: null,
      placeholder: "",
      help: "The values for the items in the select",
    },
    {
      label: "Label",
      name: "getOptionLabel",
      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: "defaultValue",
      isDefault: true,
      type: {
        kind: "dynamic",
        template: "type",
        isList: false,
        isDynamic: true,
      },
      default: null,
      placeholder: "Enter a default value",
      help: "The select's default value",
    },
    {
      label: "Placeholder",
      name: "placeholder",
      type: { kind: "text", isDynamic: true },
      isDefault: true,
      default: "",
      placeholder: "Enter some text...",
      help: "The placeholder text to display",
    },
    {
      label: "Position",
      name: "position",
      type: { kind: "select" },
      default: "popper",
      options: [
        { label: "Popper", value: "popper" },
        { label: "Item Aligned", value: "item-aligned" },
      ],
      placeholder: "",
      help: "The placement of the dropdown menu",
    },
    {
      label: "Required",
      name: "required",
      type: { kind: "boolean" },
      default: false,
      isDefault: true,
      placeholder: "",
      help: "The is this value required by a form?",
    },
    {
      label: "Is disabled",
      name: "disabled",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "Whether the select is disabled",
    },
  ],
  events: [
    {
      label: "When changed",
      name: "onChange",
      help: "Select an action to run when select'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: false },
        },
      ],
    },
  ],
  defaultStyles: {
    ...Input.defaultStyles,
    "": {
      ...Input.defaultStyles[""],
      appearance: "none",
      "align-items": "center",
      "justify-content": "space-between",
      "user-select": "none",
    },
  },
  sources: [
    {
      id: "value",
      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: false,
      },
    },
  ],
  actions: [
    {
      id: "set",
      name: `Set "{{= it.component.name }}"'s value`,
      provider: "StateProvider",
      description: "Set the value of the select",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('{{= it.component.id }}', { value: {{= it.stringify(it.data.value) }} });",
      instanceTemplate: `{{= it.stringify(it.data.value) }}`,
      props: [
        {
          label: "Value",
          name: "value",
          type: {
            kind: "dynamic",
            template: "type",
            isList: false,
          },
          placeholder: "Choose a value",
          required: true,
          default: null,
          help: "The value to set the select to",
        },
      ],
    },
  ],
} as const;