export default {
  name: "Scroll Aware Container",
  acceptsChildren: true,
  category: "Container",
  props: [
    {
      label: "Element threshold",
      name: "threshold",
      type: { kind: "number" },
      default: 0.5,
      isDefault: true,
      placeholder: "Enter the threshold",
      help: "What percent (as a fraction) of the block needs to be in view before triggering events",
    },
    {
      label: "Trigger margin",
      name: "rootMargin",
      type: { kind: "text" },
      isDefault: true,
      default: "0px",
      placeholder: "Enter the margin",
      help: "Extends the margin of the target so events can fire before this block is visible",
    },
    {
      label: "Only trigger event once",
      name: "once",
      type: { kind: "checkbox" },
      default: false,
      placeholder: "",
      help: "If the event should fire everytime or once",
    },
    {
      label: "Semantic Element",
      name: "as",
      type: { kind: "select" },
      default: "div",
      options: [
        { label: "div (default)", value: "div" },
        { label: "article", value: "article" },
        { label: "aside", value: "aside" },
        { label: "details", value: "details" },
        { label: "figcaption", value: "figcaption" },
        { label: "figure", value: "figure" },
        { label: "footer", value: "footer" },
        { label: "header", value: "header" },
        { label: "main", value: "main" },
        { label: "mark", value: "mark" },
        { label: "nav", value: "nav" },
        { label: "section", value: "section" },
        { label: "summary", value: "summary" },
        { label: "time", value: "time" },
      ],
      placeholder: "",
      help: "The html tag to use. When in doubt, use 'div'.",
    },
  ],
  events: [
    {
      label: "When in viewport",
      name: "onEnter",
      isDefault: true,
      help: "Select an action to run when container is enters viewport",
    },
    {
      label: "When off viewport",
      name: "onLeave",
      isDefault: true,
      help: "Select an action to run when container is leaves viewport",
    },
    {
      label: "When clicked",
      name: "onClick",
      help: "Select an action to run when container is clicked",
    },
  ],
  defaultStyles: {
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
    },
  },
  sources: [],
  actions: [
    {
      id: "scrollIntoView",
      name: `Scroll "{{= it.component.name }}" into view`,
      description: "Scroll the element into view",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        `document.querySelector('[data-id|="{{= it.component.id }}"]')?.scrollIntoView({ behavior: {{= it.stringify(it.data.behavior) }} ?? "auto", block: {{= it.stringify(it.data.block) }} ?? "start", inline: {{= it.stringify(it.data.inline) }} ?? "nearest" });`,
      instanceTemplate: ``,
      props: [
        {
          label: "Scroll behavior",
          name: "behavior",
          type: { kind: "select" },
          options: [
            { label: "auto", value: "auto" },
            { label: "smooth", value: "smooth" },
          ],
          placeholder: "Choose a value",
          required: true,
          default: "auto",
          help: "sets the scroll behavior",
        },
        {
          label: "Vertical align",
          name: "block",
          type: { kind: "select" },
          options: [
            { label: "start", value: "start" },
            { label: "center", value: "center" },
            { label: "end", value: "end" },
            { label: "nearest", value: "nearest" },
          ],
          placeholder: "Choose a value",
          required: true,
          default: "start",
          help: "sets the vertical alignment",
        },
        {
          label: "Horizontal align",
          name: "inline",
          type: { kind: "select" },
          options: [
            { label: "start", value: "start" },
            { label: "center", value: "center" },
            { label: "end", value: "end" },
            { label: "nearest", value: "nearest" },
          ],
          placeholder: "Choose a value",
          required: true,
          default: "nearest",
          help: "sets the horizontal alignment",
        },
      ],
    },
  ],
} as const;