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

export default {
  name: "Dialog",
  acceptsChildren: false,
  category: "Container",
  optionalLayers: [
    {
      id: "DialogTrigger",
      name: "Dialog Trigger",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {},
      },
    },
    {
      id: "DialogContent",
      name: "Dialog Content",
      acceptsChildren: true,
      styleProps: [
        {
          label: "Size",
          name: "size",
          type: { kind: "select" },
          options: [
            {
              label: "xs",
              value: "xs",
              selector: '[data-size="xs"]',
              styles: {
                "": {
                  "max-width": "var(--theme-sizes-sm)",
                },
              },
            },
            {
              label: "sm",
              value: "sm",
              selector: '[data-size="sm"]',
              styles: {
                "": {
                  "max-width": "var(--theme-sizes-md)",
                },
              },
            },
            {
              label: "md",
              value: "md",
              selector: '[data-size="md"]',
              styles: {
                "": {
                  "max-width": "var(--theme-sizes-lg)",
                },
              },
            },
            {
              label: "lg",
              value: "lg",
              selector: '[data-size="lg"]',
              styles: {
                "": {
                  "max-width": "var(--theme-sizes-2xl)",
                },
              },
            },
            {
              label: "xl",
              value: "xl",
              selector: '[data-size="xl"]',
              styles: {
                "": {
                  "max-width": "var(--theme-sizes-4xl)",
                },
              },
            },
            {
              label: "full",
              value: "full",
              selector: '[data-size="full"]',
              styles: {
                "": {
                  "max-width": "var(--theme-sizes-full)",
                  "min-height": "var(--theme-sizes-screen-h)",
                  "border-radius": "0px",
                },
              },
            },
          ],
          default: "md",
          help: 'Whether the button is in a "loading" state',
        },
      ],
      props: [
        {
          label: "Auto Focus",
          name: "autoFocus",
          type: { kind: "boolean" },
          default: true,
          required: false,
          placeholder: "",
          help: "Should the dialog manage focus for user?",
        },
      ],
      defaultStyles: {
        "--bp-all": {
          ":focus-visible": {
            outline: "none",
          },
          "": {
            position: "fixed",
            top: "50%",
            left: "50%",
            "z-index": "var(--theme-zIndices-modal)",
            transform: "translate(-50%, -50%)",
            display: "grid",
            width: "100%",
            "max-height": "85vh",
            gap: "16px",
            "border-width": "1px",
            "background-color": "var(--theme-bg-panel)",
            "padding-top": "24px",
            "padding-bottom": "24px",
            "padding-left": "24px",
            "padding-right": "24px",
            "border-radius": "var(--theme-radii-lg)",
            "box-shadow": "var(--theme-shadows-lg)",
            "animation-duration": "200ms",
          },
        },
        "--bp-sm": {
          "": {
            "border-radius": "0px",
          },
        },
      },
      optionalLayers: [
        {
          id: "DialogClose",
          name: "Dialog Close",
          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: {
            "": {},
          },
          events: [
            {
              label: "When clicked",
              name: "onClick",
              help: "Select an action to run when button is clicked",
              isDefault: true,
            },
          ],
        },
        {
          id: "DialogHeader",
          name: "Dialog Header",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "--bp-all": {
              "": {
                display: "flex",
                "flex-direction": "column",
                gap: "6px",
                "text-align": "center",
              },
            },
            "--bp-sm": {
              "": {
                "text-align": "left",
              },
            },
          },
        },
        {
          id: "DialogFooter",
          name: "Dialog Footer",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "--bp-all": {
              "": {
                display: "flex",
                "flex-direction": "row",
                "justify-content": "flex-end",
                gap: "8px",
              },
            },
            "--bp-sm": {
              "": {
                "flex-direction": "column-reverse",
                "justify-content": "flex-start",
              },
            },
          },
        },
        {
          id: "DialogTitle",
          name: "Dialog Title",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "--bp-all": {
              "": {
                "font-size": "var(--theme-fontSizes-lg)",
                "font-weight": "var(--theme-fontWeights-semibold)",
                "line-height": "var(--theme-lineHeights-none)",
                "letter-spacing": "var(--theme-letterSpacings-tight)",
              },
            },
          },
        },
        {
          id: "DialogDescription",
          name: "Dialog Description",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "--bp-all": {
              "": {
                "font-size": "var(--theme-fontSizes-sm)",
                color: "var(--theme-fg-muted)",
              },
            },
          },
        },
      ],
    },
  ],
  props: [
    {
      label: "Modal",
      name: "modal",
      type: { kind: "boolean" },
      default: true,
      required: false,
      placeholder: "",
      help: "Should the dialog be modal?",
    },
  ],
  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: {
    "": {
      "background-color": "rgba(0, 0, 0, 0.8)",
      position: "fixed",
      left: 0,
      top: 0,
      width: "100vw",
      height: "100dvh",
      "z-index": "var(--theme-zIndices-modal)",
    },
  },
  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: "Dialog$Brevity.DialogTrigger",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "Button$Brevity",
          props: {},
          styleProps: {
            variant: "subtle",
            size: "md",
            "data-palette": "neutral",
          },
          children: [
            {
              kind: "Text$Brevity",
              props: {
                value: "Open",
              },
              styleProps: {},
              children: [],
            },
          ],
        },
      ],
    },
    {
      kind: "Dialog$Brevity.DialogContent",
      props: {},
      styleProps: {
        size: "md",
      },
      children: [
        {
          kind: "Dialog$Brevity.DialogContent.DialogHeader",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Dialog$Brevity.DialogContent.DialogTitle",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Dialog Title",
                  },
                  styleProps: {},
                  children: [],
                },
              ],
            },
            {
              kind: "Dialog$Brevity.DialogContent.DialogDescription",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Dialog Description",
                  },
                  styleProps: {},
                  children: [],
                },
              ],
            },
          ],
        },
        {
          kind: "Container$Brevity",
          props: {},
          styleProps: {},
          children: [],
        },
        {
          kind: "Dialog$Brevity.DialogContent.DialogFooter",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Dialog$Brevity.DialogContent.DialogClose",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Button$Brevity",
                  props: {},
                  styleProps: {
                    variant: "subtle",
                    size: "md",
                    "data-palette": "neutral",
                  },
                  children: [
                    {
                      kind: "Text$Brevity",
                      props: {
                        value: "Close",
                      },
                      styleProps: {},
                      children: [],
                    },
                  ],
                },
              ],
            },
            {
              kind: "Button$Brevity",
              props: {},
              styleProps: {
                variant: "solid",
                size: "md",
                "data-palette": "brand",
              },
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Save",
                  },
                  styleProps: {},
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    },
  ] satisfies DefaultChild[],
} as const;
