export default {
  name: "Combobox",
  acceptsChildren: false,
  category: "Input",
  props: [
    {
      label: "Placeholder",
      name: "placeholder",
      type: { kind: "text" },
      isDefault: true,
      default: "Enter some text...",
      placeholder: "Enter some text...",
      help: "The placeholder text to display",
    },
    {
      label: "Format",
      name: "type",
      type: { kind: "select" },
      isDefault: true,
      default: "text",
      options: [
        { label: "Text", value: "text" },
        { label: "Email", value: "email" },
        { label: "Password", value: "password" },
        { label: "Phone", value: "tel" },
        // TODO: Create seperate component for these
        // { label: "Date", value: "date" },
        // { label: "Time", value: "time" },
        { label: "Search", value: "search" },
        { label: "URL", value: "url" },
        { label: "Hidden", value: "hidden" },
      ],
      placeholder: "",
      help: "The type of input to use",
    },
  ],
  events: [
    {
      label: "When changed",
      name: "onChange",
      help: "Select an action to run when input's value has changed",
    },
  ],
  defaultStyles: {
    ":hover": {
      "border-color": "var(--theme-brand-neutral-300)",
    },
    ":focus": {
      "border-color": "var(--theme-brand-brand-ring)",
    },
    ":error": {
      "border-color": "var(--theme-border-error)",
    },
    "": {
      "font-family": "var(--theme-fonts-body)",
      "background-color": "transparent",
      "border-style": "none",
      "border-color": "var(--theme-border-default)",
      "border-width": "2px",
      "border-radius": "var(--theme-radii-md)",
      "box-shadow": "var(--theme-shadows-none)",
      "font-size": "var(--theme-fontSizes-md)",
      position: "relative",
      outline: "var(--theme-sizes-zero)",
      width: "var(--theme-sizes-full)",
      height: "40px",
      "min-width": "0",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "justify-content": "flex-start",
      "align-items": "center",
      "padding-left": "16px",
      "padding-right": "16px",
      "padding-top": "var(--theme-sizes-zero)",
      "padding-bottom": "var(--theme-sizes-zero)",
      "margin-left": "var(--theme-sizes-zero)",
      "margin-right": "var(--theme-sizes-zero)",
      "margin-top": "var(--theme-sizes-zero)",
      "margin-bottom": "var(--theme-sizes-zero)",
    },
  },
  sources: [
    {
      id: "value",
      name: "{{= it.component.name }}'s current value",
      provider: "StateProvider",
      description: "The current value of the input",
      template: "$get('b{{= it.component.id}}', { value: '' }).value",
      instanceTemplate: `{{= it.component.name }}'s current value`,
      outputType: { kind: "text" },
    },
  ],
  actions: [
    {
      id: "set",
      name: `Set "{{= it.component.name }}"'s value`,
      provider: "StateProvider",
      description: "Set the value of the state variable",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('b{{= it.component.id }}', { value: {{= it.stringify(it.data.value) }} });",
      instanceTemplate: `{{= it.stringify(it.data.value) }}`,
      props: [
        {
          label: "Value",
          name: "value",
          type: { kind: "text", isDynamic: true },
          placeholder: "Choose a value",
          required: true,
          default: null,
          help: "The value to set the state variable to",
        },
      ],
    },
    {
      id: "focus",
      name: `Focus "{{= it.component.name }}" input`,
      description: "Focus the input",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.focus();',
      instanceTemplate: `Focus input "{{= it.component.name }}"`,
      props: [],
    },
  ],
} as const;