export default {
  name: "Modal",
  acceptsChildren: true,
  category: "Container",
  isDisabled: true,
  props: [
    {
      label: "Auto Focus",
      name: "autoFocus",
      type: { kind: "boolean" },
      default: true,
      required: false,
      placeholder: "",
      help: "Should the popover manage focus for user?",
    },
    {
      label: "Modal",
      name: "modal",
      type: { kind: "boolean" },
      default: true,
      required: false,
      placeholder: "",
      help: "Should the dialog be modal?",
    },
  ],
  events: [
    {
      label: "When closed",
      name: "onClose",
      help: "Select an action to run when modal is closed",
      isDefault: true,
    },
  ],
  defaultStyles: {
    "": {
      position: "fixed",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      display: "flex",
      "flex-direction": "column",
      "z-index": "var(--theme-zIndices-modal)",
      "background-color": "white",
      "border-radius": "var(--theme-radii-md)",
      "box-shadow": "var(--theme-shadows-lg)",
      width: "90vw",
      "max-width": "512px",
      "max-height": "85vh",
      "padding-top": "24px",
      "padding-bottom": "24px",
      "padding-left": "24px",
      "padding-right": "24px",
    },
  },
  sources: [
    {
      id: "isOpen",
      name: "{{= it.component.name }}'s modal is open",
      provider: "StateProvider",
      description: "Whether the modal 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 }}" modal`,
      provider: "StateProvider",
      description: "Open the modal",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('{{= it.component.id }}', { isOpen: true });",
      instanceTemplate: `Open "{{= it.component.name }}"`,
      props: [],
    },
    {
      id: "close",
      availableInCanvas: true,
      name: `Close "{{= it.component.name }}" modal`,
      provider: "StateProvider",
      description: "Close the modal",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('{{= it.component.id }}', { isOpen: false });",
      instanceTemplate: `Close "{{= it.component.name }}"`,
      props: [],
    },
  ],
} as const;