export const styleProps = [
  {
    label: "Size",
    name: "size",
    type: { kind: "select" },
    options: [
      {
        label: "2xs",
        value: "2xs",
        selector: '[data-size="2xs"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-xs)",
            "line-height": "1rem",
            height: "28px",
            "padding-left": "8px",
            "padding-right": "8px",
          },
        },
      },
      {
        label: "xs",
        value: "xs",
        selector: '[data-size="xs"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-xs)",
            height: "32px",
            "line-height": "1rem",
            "padding-left": "8px",
            "padding-right": "8px",
          },
        },
      },
      {
        label: "sm",
        value: "sm",
        selector: '[data-size="sm"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-sm)",
            "line-height": "1.25rem",
            height: "36px",
            "padding-left": "10px",
            "padding-right": "10px",
          },
        },
      },
      {
        label: "md",
        value: "md",
        selector: '[data-size="md"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-sm)",
            "line-height": "1.25rem",
            height: "40px",
            "padding-left": "12px",
            "padding-right": "12px",
          },
        },
      },
      {
        label: "lg",
        value: "lg",
        selector: '[data-size="lg"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-md)",
            "line-height": "1.5rem",
            height: "44px",
            "padding-left": "16px",
            "padding-right": "16px",
          },
        },
      },
      {
        label: "xl",
        value: "xl",
        selector: '[data-size="xl"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-md)",
            "line-height": "1.5rem",
            height: "48px",
            "padding-left": "18px",
            "padding-right": "18px",
          },
        },
      },
      {
        label: "2xl",
        value: "2xl",
        selector: '[data-size="2xl"]',
        styles: {
          "": {
            "font-size": "var(--theme-fontSizes-lg)",
            "line-height": "1.75rem",
            height: "64px",
            "padding-left": "20px",
            "padding-right": "20px",
          },
        },
      },
    ],
    default: "md",
    help: 'The size of the avatr. "md" is the default size',
  },
  {
    label: "Variant",
    name: "variant",
    type: { kind: "select" },
    options: [
      {
        label: "Outline",
        value: "outline",
        selector: '[data-variant="outline"]',
        styles: {
          "": {
            "background-color": "transparent",
            "border-width": "1px",
            "border-color": "var(--theme-border-default)",
          },
        },
      },
      {
        label: "Subtle",
        value: "subtle",
        selector: '[data-variant="subtle"]',
        styles: {
          "": {
            "border-width": "1px",
            "border-color": "transparent",
            "background-color": "var(--theme-bg-muted)",
          },
        },
      },
      {
        label: "Flushed",
        value: "flushed",
        selector: '[data-variant="flushed"]',
        styles: {
          "": {
            "background-color": "transparent",
            "border-bottom-width": "1px",
            "border-color": "var(--theme-border-default)",
            "border-radius": "var(--theme-radii-none)",
            "padding-left": "0px",
            "padding-right": "0px",
          },
          ":focus-visible": {
            outline: "none",
            "border-color": "var(--palette-ring)",
            "box-shadow": "0px 1px 0px 0px var(--palette-ring)",
          },
        },
      },
      {
        label: "Elevated",
        value: "elevated",
        selector: '[data-variant="elevated"]',
        styles: {
          "": {
            "border-width": "1px",
            "border-color": "var(--palette-muted)",
            "background-color": "transparent",
            "box-shadow": "var(--theme-shadows-sm)",
          },
        },
      },
    ],
    default: "outline",
  },
  {
    label: "Color Palette",
    name: "data-palette",
    type: { kind: "palette" },
    default: "brand",
    help: "The color scheme of the button",
  },
];

export default {
  name: "Input",
  acceptsChildren: false,
  category: "Input",
  styleProps: styleProps,
  props: [
    {
      label: "Initial Value",
      name: "defaultValue",
      type: { kind: "text", isDynamic: true },
      default: "",
      isDefault: true,
      placeholder: "Enter some text...",
      help: "The input's default value",
    },
    {
      label: "Placeholder",
      name: "placeholder",
      type: { kind: "text", isDynamic: true },
      default: "Enter some text...",
      isDefault: true,
      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" },
        { label: "Search", value: "search" },
        { label: "URL", value: "url" },
        { label: "Hidden", value: "hidden" },
        { label: "Verification Code", value: "otp" },
      ],
      placeholder: "",
      help: "The type of input to use",
    },
    {
      label: "Required",
      name: "required",
      type: { kind: "boolean" },
      default: false,
      isDefault: true,
      placeholder: "",
      help: "The is this value required by a form?",
    },
    {
      label: "Minimum Length",
      name: "minlength",
      type: { kind: "number", isDynamic: true },
      default: null,
      placeholder: "Enter a number...",
      help: "The minimum length allowed",
    },
    {
      label: "Maximum Length",
      name: "maxlength",
      type: { kind: "number", isDynamic: true },
      default: null,
      placeholder: "Enter a number...",
      help: "The maximum length allowed",
    },
    {
      label: "Is disabled",
      name: "disabled",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "Whether the input is disabled",
    },
  ],
  events: [
    {
      label: "When changed",
      name: "onChange",
      offerDebounce: true,
      help: "Select an action to run when input's value has changed",
      additionalSources: [
        {
          id: "bzanwdrLLhVTUxpfjTPEJ",
          name: "New Value",
          instanceTemplate: "New Value",
          description: "The new value of the select",
          template: "$$payload?.target?.value",
          outputType: { kind: "text" },
        },
      ],
    },
    {
      label: "When focused",
      name: "onFocus",
      help: "Select an action to run when input's has focused",
      additionalSources: [
        {
          id: "bzanwdrLLhVTUxpfjTPEJ",
          name: "New Value",
          instanceTemplate: "New Value",
          description: "The new value of the select",
          template: "$$payload?.target?.value",
          outputType: { kind: "text" },
        },
      ],
    },
    {
      label: "When blurred",
      name: "onBlur",
      help: "Select an action to run when input's has blurred",
      isDefault: true,
      additionalSources: [
        {
          id: "bzanwdrLLhVTUxpfjTPEJ",
          name: "New Value",
          instanceTemplate: "New Value",
          description: "The new value of the select",
          template: "$$payload?.target?.value",
          outputType: { kind: "text" },
        },
      ],
    },
  ],
  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",
    },
  },
  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: {{= it.stringify(it.component.props.defaultValue) }} ?? '' }).value",
      instanceTemplate: `{{= it.component.name }}'s current value`,
      outputType: { kind: "text" },
    },
    {
      id: "isValid",
      provider: "StateProvider",
      name: "{{= it.component.name }}'s value is valid",
      description: "Returns true if input value is valid",
      template: `document.querySelector('[data-id|="{{= it.component.id}}"]')?.checkValidity()`,
      instanceTemplate: `is {{= it.component.name }}'s value valid`,
      outputType: { kind: "boolean" },
    },
  ],
  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: [],
    },
  ],
} as const;
