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

export default {
  name: "Command",
  acceptsChildren: true,
  category: "Input",
  props: [
    {
      label: "Initial Value",
      name: "defaultValue",
      isDefault: true,
      type: { kind: "text", isDynamic: true },
      default: "",
      placeholder: "Enter some text...",
      help: "The input's default value",
    },
  ],
  events: [
    {
      label: "When changed",
      name: "onValueChange",
      help: "Select an action to run when item is selected",
      additionalSources: [
        {
          id: "UMFd6Pexb48GergJbE4WX",
          name: "Selected Value",
          instanceTemplate: "Selected Value",
          description: "The value of the selected item",
          template: "$$payload",
          outputType: { kind: "text", isDynamic: true },
        },
      ],
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      height: "100%",
      width: "100%",
      "flex-direction": "column",
      "overflow-x": "hidden",
      "overflow-y": "hidden",
      "border-radius": "var(--theme-radii-md)",
      "background-color": "white",
    },
  },
  sources: [],
  actions: [],
  optionalLayers: [
    {
      id: "CommandInput",
      name: "Command Input",
      acceptsChildren: false,
      props: [
        {
          label: "Placeholder",
          name: "placeholder",
          type: { kind: "text" },
          isDefault: true,
          default: "Enter some text...",
          placeholder: "Enter some text...",
          help: "The placeholder text to display",
        },
      ],
      defaultStyles: {
        ":disabled": {
          opacity: 0.5,
          cursor: "not-allowed",
        },
        "": {
          display: "flex",
          height: "44px",
          width: "100%",
          "border-bottom-width": "1px",
          "background-color": "transparent",
          "padding-top": "12px",
          "padding-bottom": "12px",
          "padding-left": "12px",
          "padding-right": "12px",
          "font-size": "var(--theme-fontSizes-sm)",
          outline: "none",
        },
      },
      events: [
        {
          label: "When changed",
          name: "onChange",
          help: "Select an action to run when input's value has changed",
        },
        {
          label: "When focused",
          name: "onFocus",
          help: "Select an action to run when input's has focused",
        },
        {
          label: "When blurred",
          name: "onBlur",
          help: "Select an action to run when input's has blurred",
        },
      ],
      sources: [
        {
          id: "value",
          name: "{{= it.component.name }}'s current value",
          provider: "StateProvider",
          description: "The current value of the input",
          template: "$get('{{= 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 input",
          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: "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: ``,
          props: [],
        },
        {
          id: "blur",
          name: `Blur "{{= it.component.name }}" input`,
          description: "Blur the input",
          async: false,
          template:
            // eslint-disable-next-line no-template-curly-in-string
            'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.blur();',
          instanceTemplate: ``,
          props: [],
        },
      ],
    },
    {
      id: "CommandList",
      name: "Command List",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {
          "max-height": "300px",
          "overflow-y": "auto",
          "overflow-x": "hidden",
        },
      },
    },
    {
      id: "CommandEmpty",
      name: "Command Empty",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {
          "padding-top": "24px",
          "padding-bottom": "24px",
          "text-align": "center",
          "font-size": "var(--theme-fontSizes-sm)",
        },
      },
    },
    {
      id: "CommandItem",
      name: "Command Item",
      acceptsChildren: true,
      props: [
        {
          label: "Value",
          name: "value",
          type: { kind: "text", isDynamic: true },
          isDefault: true,
          default: "",
          placeholder: "Enter a value...",
          help: "The items's value",
        },
        {
          label: "Is disabled",
          name: "disabled",
          type: { kind: "boolean", isDynamic: true },
          default: false,
          placeholder: "",
          help: "Whether the item is disabled",
        },
      ],
      events: [
        {
          label: "When selected",
          name: "onSelect",
          help: "Select an action to run when item is selected",
          isDefault: true,
          additionalSources: [
            {
              id: "UMFd6Pexb48GergJbE4WX",
              name: "Selected Value",
              instanceTemplate: "Selected Value",
              description: "The value of the selected item",
              template: "$$payload",
              outputType: { kind: "text", isDynamic: true },
            },
          ],
        },
      ],
      defaultStyles: {
        "[aria-selected='true']": {
          "background-color": "var(--theme-border-default)",
        },
        "[data-disabled='true']": {
          opacity: 0.5,
          "pointer-events": "none",
        },
        "": {
          position: "relative",
          display: "flex",
          cursor: "default",
          "user-select": "none",
          "align-items": "center",
          "border-radius": "var(--theme-radii-sm)",
          "padding-left": "8px",
          "padding-right": "8px",
          "padding-top": "6px",
          "padding-bottom": "6px",
          "font-size": "var(--theme-fontSizes-sm)",
          outline: "none",
        },
      },
      additionalStates: [
        {
          label: "Is Selected",
          value: "[aria-selected='true']",
        },
        {
          label: "Is disabled",
          value: "[data-disabled='true']",
        },
      ],
    },
    {
      id: "CommandGroup",
      name: "Command Group",
      acceptsChildren: true,
      props: [
        {
          label: "Heading",
          name: "heading",
          type: { kind: "text", isDynamic: true },
          isDefault: true,
          default: "",
          placeholder: "Group heading...",
          help: "The groups's name",
        },
      ],
      defaultStyles: {
        "": {
          "overflow-x": "hidden",
          "overflow-y": "hidden",
          "padding-top": "4px",
          "padding-bottom": "4px",
          "padding-left": "4px",
          "padding-right": "4px",
          color: "var(--theme-fg-default)",
        },
      },
    },
    {
      id: "CommandSeparator",
      name: "Command Separator",
      acceptsChildren: false,
      props: [],
      defaultStyles: {
        "": {
          height: "1px",
          "margin-left": "-4px",
          "margin-right": "-4px",
          "background-color": "var(--theme-border-default)",
        },
      },
    },
    {
      id: "CommandLoading",
      name: "Command Loading",
      acceptsChildren: false,
      props: [],
      defaultStyles: {
        "": {},
      },
    },
  ],
  defaultChildren: [
    {
      kind: "Command$Brevity.CommandInput",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "Command$Brevity.CommandGroup",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "Command$Brevity.CommandList",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Command$Brevity.CommandItem",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Item 1",
                  },
                  styleProps: {
                    size: "inherit",
                    variant: "inherit",
                  },
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      kind: "Command$Brevity.CommandEmpty",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "Text$Brevity",
          props: {
            value: "No data",
          },
          styleProps: {
            size: "inherit",
            variant: "inherit",
          },
          children: [],
        },
      ],
    },
  ] satisfies DefaultChild[],
} as const;