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

export default {
  name: "Sheet",
  acceptsChildren: false,
  category: "Container",
  optionalLayers: [
    {
      id: "SheetTrigger",
      name: "Sheet Trigger",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {},
      },
    },
    {
      id: "SheetContent",
      name: "Sheet Content",
      acceptsChildren: true,
      styleProps: [
        {
          label: "Side",
          name: "side",
          type: { kind: "select" },
          options: [
            {
              label: "right",
              value: "right",
              selector: '[data-side="right"]',
              styles: {
                "": {
                  top: "0",
                  bottom: "0",
                  right: "0",
                  height: "100%",
                  width: "75%",
                  "max-width": "384px",
                  "border-left-width": "1px",
                  "border-left-style": "solid",
                },
              },
            },
            {
              label: "left",
              value: "left",
              selector: '[data-side="left"]',
              styles: {
                "": {
                  top: "0",
                  bottom: "0",
                  left: "0",
                  height: "100%",
                  width: "75%",
                  "max-width": "384px",
                  "border-right-width": "1px",
                  "border-right-style": "solid",
                },
              },
            },
            {
              label: "top",
              value: "top",
              selector: '[data-side="top"]',
              styles: {
                "": {
                  position: "absolute",
                  top: "0",
                  left: "0",
                  right: "0",
                  height: "auto",
                  "border-bottom-width": "1px",
                  "border-bottom-style": "solid",
                },
              },
            },
            {
              label: "bottom",
              value: "bottom",
              selector: '[data-side="bottom"]',
              styles: {
                "": {
                  position: "absolute",
                  bottom: "0",
                  left: "0",
                  right: "0",
                  height: "auto",
                  "border-top-width": "1px",
                  "border-top-style": "solid",
                },
              },
            },
          ],
          default: "right",
          help: "Which side of the screen should the sheet be positioned on?",
        },
      ],
      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",
          },
          "": {
            "background-color": "var(--theme-bg-panel)",
            position: "fixed",
            "z-index": "var(--theme-zIndices-modal)",
            display: "flex",
            "flex-direction": "column",
            gap: "16px",
            "box-shadow": "var(--theme-shadows-lg)",
          },
        },
        "--bp-sm": {
          "": {
            "border-radius": "0px",
          },
        },
      },
      optionalLayers: [
        {
          id: "SheetClose",
          name: "Sheet 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: "SheetHeader",
          name: "Sheet Header",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "--bp-all": {
              "": {
                display: "flex",
                "flex-direction": "column",
                "padding-left": "16px",
                "padding-right": "16px",
                "padding-top": "16px",
                "padding-bottom": "16px",
                gap: "6px",
              },
            },
            "--bp-sm": {
              "": {
                "text-align": "left",
              },
            },
          },
        },
        {
          id: "SheetFooter",
          name: "Sheet Footer",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "--bp-all": {
              "": {
                display: "flex",
                "margin-top": "auto",
                "flex-direction": "row",
                "justify-content": "flex-end",
                gap: "8px",
                "padding-left": "16px",
                "padding-right": "16px",
                "padding-top": "16px",
                "padding-bottom": "16px",
              },
            },
            "--bp-sm": {
              "": {
                "flex-direction": "column-reverse",
                "justify-content": "flex-start",
              },
            },
          },
        },
        {
          id: "SheetTitle",
          name: "Sheet 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: "SheetDescription",
          name: "Sheet 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: "Sheet$Brevity.SheetTrigger",
      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: "Sheet$Brevity.SheetContent",
      props: {},
      styleProps: {
        size: "md",
      },
      children: [
        {
          kind: "Sheet$Brevity.SheetContent.SheetHeader",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Sheet$Brevity.SheetContent.SheetTitle",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Sheet Title",
                  },
                  styleProps: {},
                  children: [],
                },
              ],
            },
            {
              kind: "Sheet$Brevity.SheetContent.SheetDescription",
              props: {},
              styleProps: {},
              children: [
                {
                  kind: "Text$Brevity",
                  props: {
                    value: "Sheet Description",
                  },
                  styleProps: {},
                  children: [],
                },
              ],
            },
          ],
        },
        {
          kind: "Container$Brevity",
          props: {},
          styleProps: {},
          children: [],
        },
        {
          kind: "Sheet$Brevity.SheetContent.SheetFooter",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Sheet$Brevity.SheetContent.SheetClose",
              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;
