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

export default {
  name: "Collapsible",
  acceptsChildren: true,
  category: "Container",
  optionalLayers: [
    {
      id: "Trigger",
      name: "Trigger",
      acceptsChildren: true,
      props: [
        {
          label: "asChild",
          name: "asChild",
          type: { kind: "boolean" },
          default: false,
          placeholder: "",
          help: "Whether the button should be rendered as it's child",
        },
      ],
      defaultStyles: {
        "": {
          display: "flex",
          "flex-direction": "row",
        },
      },
    },
    {
      id: "Content",
      name: "Content",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {
          display: "flex",
          "flex-direction": "column",
        },
      },
    },
  ],
  props: [
    {
      label: "Initially Open?",
      name: "defaultOpen",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      isDefault: true,
      placeholder: "",
      help: "The initial state of the component",
    },
  ],
  events: [
    {
      label: "When open change",
      name: "onOpenChange",
      help: "Select an action to run when component is toggled",
      isDefault: false,
      additionalSources: [
        {
          id: "$$isOpen",
          name: "Is Open",
          description: "Whether the component is open or not",
          template: "$$isOpen",
          instanceTemplate: `Is Open`,
          outputType: { kind: "boolean" },
        },
      ],
    },
  ],
  additionalStates: [
    {
      label: "isOpen",
      value: '[data-state="open"]',
    },
    {
      label: "isClosed",
      value: '[data-state="closed"]',
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "column",
    },
  },
  sources: [
    {
      id: "isOpen",
      name: "{{= it.component.name }}'s popover is open",
      provider: "StateProvider",
      description: "Whether the popover is open or not",
      template:
        "$get('{{= it.component.id}}', { isOpen: {{= it.stringify(it.component.props.defaultOpen) }} }).isOpen",
      instanceTemplate: `{{= it.component.name }}'s is open`,
      outputType: { kind: "boolean" },
    },
  ],
  actions: [
    {
      id: "open",
      availableInCanvas: true,
      name: `Open "{{= it.component.name }}" popover`,
      provider: "StateProvider",
      description: "Open the popover",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('{{= it.component.id }}', { isOpen: true }, 'Open'{{? it.hasIndex?.(it.data) }}, {{= it.findIndexes(it.data) }}{{?}});",
      instanceTemplate: `Open "{{= it.component.name }}"`,
      props: [],
    },
    {
      id: "close",
      availableInCanvas: true,
      name: `Close "{{= it.component.name }}" popover`,
      provider: "StateProvider",
      description: "Close the popover",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('{{= it.component.id }}', { isOpen: false }, 'Close'{{? it.hasIndex?.(it.data) }}, {{= it.findIndexes(it.data) }}{{?}});",
      instanceTemplate: `Close "{{= it.component.name }}"`,
      props: [],
    },
  ],
  defaultChildren: [
    {
      kind: "Collapsible$Brevity.Trigger",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "Collapsible$Brevity.Content",
      props: {},
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
} as const;