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

export default {
  name: "ToggleGroup",
  acceptsChildren: false,
  category: "Container",
  optionalLayers: [
    {
      id: "ToggleGroupItem",
      name: "ToggleGroup Item",
      acceptsChildren: true,
      props: [
        {
          label: "Value",
          name: "value",
          type: { kind: "text", isDynamic: true },
          default: null,
          required: true,
          placeholder: "",
          help: "The value of the trigger",
        },
        {
          label: "Is disabled",
          name: "disabled",
          type: { kind: "boolean", isDynamic: true },
          default: false,
          placeholder: "",
          help: "Whether the tab is disabled",
        },
      ],
      additionalStates: [
        {
          label: "Item is on",
          value: "[data-state='on']",
        },
      ],
      defaultStyles: {
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "pointer-events": "none",
        },
        ":focus-visible": {
          outline: "none",
          "box-shadow": "rgb(49, 130, 206) 0px 0px 0px 1px",
        },
        "[data-state='on']": {
          "background-color": "var(--theme-border-default)",
        },
        "": {
          cursor: "pointer",
          display: "flex",
          "justify-content": "center",
          "align-items": "center",
          width: "32px",
          height: "32px",
          "border-radius": "var(--theme-radii-base)",
          "background-color": "transparent",
        },
      },
    },
  ],
  props: [
    {
      label: "Type",
      name: "type",
      type: { kind: "select" },
      options: [
        { label: "Single (default)", value: "single" },
        { label: "Multiple", value: "multiple" },
      ],
      default: "single",
      required: true,
      placeholder: "",
      help: "The type of the ToggleGroup",
    },
    {
      label: "Initial Value",
      name: "defaultValue",
      type: {
        kind: "text",
        dynamicList: "{{? it.eq(it.type, 'multiple') }}true{{??}}false{{?}}",
      },
      default: null,
      required: true,
      placeholder: "",
      help: "The initial value of the ToggleGroup",
    },
    {
      label: "Ensure Value",
      name: "ensureValue",
      type: { kind: "boolean" },
      default: false,
      isDefault: true,
      placeholder: "",
      help: "Should the ToggleGroup ensure a value is always selected?",
    },
  ],
  events: [
    {
      label: "When changed",
      name: "onValueChange",
      help: "Select an action to run when input's value has changed",
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      "align-items": "center",
      "justify-content": "center",
      gap: "4px",
    },
  },
  sources: [
    {
      id: "value",
      name: "{{= it.component.name }}'s current value",
      provider: "StateProvider",
      description: "The current value of the ToggleGroup",
      template:
        "$get('{{= it.component.id}}', { value: {{= it.stringify(it.component.props.defaultValue) }} ?? '' }).value",
      instanceTemplate: `{{= it.component.name }}'s current value`,
      outputType: {
        kind: "text",
        dynamicList: "{{? it.eq(it.type, 'multiple') }}true{{??}}false{{?}}",
      },
    },
  ],
  actions: [],
  defaultChildren: [
    {
      kind: "ToggleGroup$Brevity.ToggleGroupItem",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "ToggleGroup$Brevity.ToggleGroupItem",
      props: {},
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
};