export default {
  name: "OTP",
  acceptsChildren: true,
  category: "Input",
  optionalLayers: [
    {
      id: "OTPSlot",
      name: "OTP Input",
      acceptsChildren: false,
      props: [
        {
          label: "Index",
          name: "index",
          type: { kind: "number" },
          default: null,
          required: true,
          placeholder: "Index",
          help: "The index of the input",
        },
      ],
      defaultStyles: {
        ":hover": {
          "border-color": "var(--theme-border-emphasized)",
        },
        ":focus": {
          "border-color": "var(--theme-brand-blue-500)",
          "box-shadow": "var(--theme-brand-brand-500) 0px 0px 0px 1px",
        },
        ":user-invalid": {
          "border-color": "var(--theme-border-error)",
        },
        ":active": {
          "z-index": 10,
          "border-color": "var(--theme-brand-blue-500)",
          "box-shadow": "var(--theme-brand-brand-500) 0px 0px 0px 1px",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-size": "var(--theme-fontSizes-md)",
          color: "var(--theme-fg-default)",
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "flex",
          "flex-direction": "row",
          "justify-content": "flex-start",
          "align-items": "stretch",
          gap: "0px",
          width: "40px",
          height: "40px",
          "min-width": "auto",
          "min-height": "auto",
          "max-width": "100%",
          "max-height": "100%",
          "padding-right": "16px",
          "padding-left": "16px",
          "padding-top": "8px",
          "padding-bottom": "8px",
          "border-color": "var(--theme-border-default)",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "1px",
          "border-style": "solid",
          "background-color": "transparent",
          "box-shadow": "var(--theme-shadows-none)",
          outline: "var(--theme-sizes-zero)",
        },
      },
    },
  ],
  props: [
    {
      label: "Max length",
      name: "maxLength",
      type: { kind: "number" },
      default: 6,
      required: true,
      placeholder: "Max length",
      help: "The length of the otp",
    },
  ],
  events: [
    {
      label: "When completed",
      name: "onComplete",
      offerDebounce: true,
      help: "Select an action to run when input's value has been completed",
      additionalSources: [
        {
          id: "bzanwdrLLhVTUxpfjTPEJ",
          name: "New Value",
          instanceTemplate: "New Value",
          description: "The new value of the select",
          template: "$$payload",
          outputType: { kind: "text" },
        },
      ],
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "center",
      gap: "8px",
    },
  },
  sources: [],
  actions: [],
} as const;