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

export default {
  name: "Popover",
  acceptsChildren: false,
  category: "Container",
  optionalLayers: [
    {
      id: "PopoverTrigger",
      name: "Popover Trigger",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {},
      },
    },
    {
      id: "PopoverContent",
      name: "Popover Content",
      acceptsChildren: true,
      props: [
        {
          label: "Align",
          name: "align",
          type: { kind: "select" },
          options: [
            { label: "Start", value: "start" },
            { label: "Center (default)", value: "center" },
            { label: "End", value: "end" },
          ],
          default: "center",
          required: true,
          placeholder: "",
          help: "The alignment of the popover",
        },
        {
          label: "Side",
          name: "side",
          type: { kind: "select" },
          options: [
            { label: "Top", value: "top" },
            { label: "Right", value: "right" },
            { label: "Bottom", value: "bottom" },
            { label: "Left", value: "left" },
          ],
          default: "bottom",
          required: true,
          placeholder: "",
          help: "The side of the trigger the popover should appear",
        },
        {
          label: "Side Offset",
          name: "sideOffset",
          type: { kind: "number" },
          default: 4,
          required: true,
          placeholder: "",
          help: "The offset from the side of the trigger",
        },
        {
          label: "Collision Padding",
          name: "collisionPadding",
          type: { kind: "number" },
          default: 0,
          required: false,
          placeholder: "",
          help: "The padding to apply to the collision detection",
        },
        {
          label: "Auto Focus",
          name: "autoFocus",
          type: { kind: "boolean" },
          default: true,
          required: false,
          placeholder: "",
          help: "Should the popover manage focus for user?",
        },
      ],
      defaultStyles: {
        "": {
          "z-index": "var(--theme-zIndices-modal)",
          "min-width": "256px",
          overflow: "auto",
          "padding-right": "16px",
          "padding-left": "16px",
          "padding-top": "16px",
          "padding-bottom": "16px",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "1px",
          "background-color": "var(--theme-bg-panel)",
          "box-shadow": "var(--theme-shadows-md)",
        },
      },
    },
    {
      id: "PopoverAnchor",
      name: "Popover Anchor",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {},
      },
    },
  ],
  props: [],
  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" },
        },
      ],
    },
  ],
  defaultStyles: {},
  sources: [
    {
      id: "isOpen",
      name: "{{= it.component.name }}'s popover is open",
      provider: "StateProvider",
      description: "Whether the popover is open or not",
      template:
        "$get($$getKey('{{= it.component.id}}'{{? it.hasIndex?.(it.data) }}, {{= it.findIndexes(it.data) }}{{?}}), { isOpen: false }).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: "Popover$Brevity.PopoverTrigger",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "Popover$Brevity.PopoverContent",
      props: {},
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
};