export default {
  name: "Checkbox",
  acceptsChildren: false,
  category: "Input",
  styleProps: [
    {
      label: "Size",
      name: "size",
      type: { kind: "select" },
      options: [
        {
          label: "xs",
          value: "xs",
          selector: '[data-size="xs"]',
          styles: {
            "": {
              gap: "6px",
              "font-size": "var(--theme-fontSizes-xs)",
              "line-height": "0.75rem",
              width: "12px",
              height: "12px",
            },
          },
        },
        {
          label: "sm",
          value: "sm",
          selector: '[data-size="sm"]',
          styles: {
            "": {
              gap: "8px",
              "font-size": "var(--theme-fontSizes-sm)",
              "line-height": "1.25rem",
              width: "16px",
              height: "16px",
            },
          },
        },
        {
          label: "md",
          value: "md",
          selector: '[data-size="md"]',
          styles: {
            "": {
              gap: "10px",
              "font-size": "var(--theme-fontSizes-sm)",
              "line-height": "1.2rem",
              width: "20px",
              height: "20px",
              "padding-left": "2px",
              "padding-right": "2px",
              "padding-top": "2px",
              "padding-bottom": "2px",
            },
          },
        },
        {
          label: "lg",
          value: "lg",
          selector: '[data-size="lg"]',
          styles: {
            "": {
              gap: "12px",
              "font-size": "var(--theme-fontSizes-md)",
              "line-height": "1.5rem",
              width: "24px",
              height: "24px",
              "padding-left": "2px",
              "padding-right": "2px",
              "padding-top": "2px",
              "padding-bottom": "2px",
            },
          },
        },
      ],
      default: "md",
      help: 'The size of the button. "md" is the default size',
    },
    {
      label: "Variant",
      name: "variant",
      type: { kind: "select" },
      options: [
        {
          label: "Solid",
          value: "solid",
          selector: '[data-variant="solid"]',
          styles: {
            "": {
              "border-color": "var(--theme-border-default)",
            },
            ':is([data-state="checked"], [data-state="indeterminate"])': {
              "background-color": "var(--palette-solid)",
              color: "var(--palette-contrast)",
              "border-color": "var(--palette-solid)",
            },
          },
        },
        {
          label: "Subtle",
          value: "subtle",
          selector: '[data-variant="subtle"]',
          styles: {
            "": {
              "background-color": "var(--palette-muted)",
              "border-color": "var(--palette-muted)",
            },
            ":is([data-state=checked], [data-state=indeterminate])": {
              color: "var(--palette-fg)",
            },
          },
        },
        {
          label: "Outline",
          value: "outline",
          selector: '[data-variant="outline"]',
          styles: {
            "": {
              "border-color": "var(--theme-border-default)",
            },
            ":is([data-state=checked], [data-state=indeterminate])": {
              color: "var(--palette-fg)",
              "border-color": "var(--palette-solid)",
            },
          },
        },
      ],
      default: "solid",
    },
    {
      label: "Color Palette",
      name: "data-palette",
      type: { kind: "palette" },
      default: "brand",
      help: "The color scheme of the button",
    },
  ],
  props: [
    {
      label: "Label",
      name: "children",
      type: { kind: "text", isDynamic: true },
      default: "",
      placeholder: "Enter some text...",
      help: "The label to display",
    },
    {
      label: "Initial Value",
      name: "defaultChecked",
      isDefault: true,
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "Enter default value",
      help: "The input's default value",
    },
    {
      label: "Is disabled",
      name: "disabled",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "Whether the checkbox is disabled",
    },
  ],
  events: [
    {
      label: "When changed",
      name: "onChange",
      isDefault: true,
      help: "Select an action to run when input's value has changed",
    },
  ],
  defaultStyles: {
    ":disabled": {
      opacity: "0.5",
    },
    ":invalid": {
      "border-color": "var(--theme-border-error)",
    },
    "": {
      display: "inline-flex",
      "align-items": "center",
      position: "relative",
      gap: "8px",
      "vertical-align": "top",
      "font-family": "var(--theme-fonts-body)",
      "font-weight": "var(--theme-fontWeights-medium)",
      cursor: "pointer",
      "justify-content": "center",
      "flex-shrink": "0",
      color: "var(--theme-colors-white)",
      "border-width": "1px",
      "border-color": "transparent",
      "border-radius": "var(--theme-radii-sm)",
    },
  },
  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: null }).value",
      instanceTemplate: `{{= it.component.name }}'s current value`,
      outputType: { kind: "boolean" },
    },
  ],
  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('{{= it.component.id }}', { value: {{= it.stringify(it.data.value) }} });",
      instanceTemplate: `{{= it.stringify(it.data.value) }}`,
      props: [
        {
          label: "Value",
          name: "value",
          type: { kind: "boolean", isDynamic: true },
          placeholder: "Choose a value",
          required: true,
          default: null,
          help: "The value to set the state variable to",
        },
      ],
    },
  ],
} as const;