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

const buttonPseudosStyles = {
  ":hover": {
    "background-color": "var(--theme-border-default)",
  },
  ":active": {
    "background-color": "var(--theme-bg-emphasized)",
  },
  ":focus": {
    outline: "none",
  },
  ":focus-visible": {
    "box-shadow": "var(--theme-shadows-outline)",
  },
  ":disabled": {
    opacity: 0.4,
    cursor: "not-allowed",
    "box-shadow": "none",
  },
};

const base = {
  "font-family": "var(--theme-fonts-body)",
  "font-weight": "var(--theme-fontWeights-semibold)",
  "font-size": "1rem",
  color: "var(--theme-fg-default)",
  "text-align": "center",
  "flex-grow": "0",
  "flex-shrink": "1",
  "flex-basis": "auto",
  display: "inline-flex",
  "flex-direction": "row",
  "justify-content": "center",
  "align-items": "center",
  gap: "8px",
  width: "auto",
  height: "40px",
  "min-width": "auto",
  "min-height": "auto",
  "max-width": "100%",
  "max-height": "100%",
  "padding-right": "16px",
  "padding-left": "16px",
  "padding-top": "0px",
  "padding-bottom": "0px",
  "border-color": "var(--theme-border-default)",
  "border-radius": "var(--theme-radii-md)",
  "border-width": "0px",
  "border-style": "solid",
  "background-color": "var(--theme-bg-muted)",
  "box-shadow": "var(--theme-shadows-none)",
  cursor: "pointer",
};

export default {
  name: "Carousel",
  acceptsChildren: false,
  category: "Container",
  optionalLayers: [
    {
      id: "Content",
      name: "Carousel Content",
      acceptsChildren: true,
      props: [],
      optionalLayers: [
        {
          id: "Item",
          name: "Carousel Item",
          acceptsChildren: true,
          props: [],
          defaultStyles: {
            "": {
              "min-width": "0%",
              "flex-shrink": "0",
              "flex-grow": "0",
              "flex-basis": "100%",
            },
            '[data-orientation="horizontal"] &': {
              "padding-left": "16px",
            },
            '[data-orientation="vertical"] &': {
              "padding-top": "16px",
            },
          },
        },
      ],
      defaultStyles: {
        "": {
          display: "flex",
        },
        '[data-orientation="horizontal"] &': {
          "flex-direction": "row",
          "margin-left": "-16px",
        },
        '[data-orientation="vertical"] &': {
          "flex-direction": "column",
          "margin-top": "-16px",
        },
      },
    },
    {
      id: "Previous",
      name: "Carousel Previous",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        ...buttonPseudosStyles,
        "": {
          ...base,
          position: "absolute",
          width: "32px",
          height: "32px",
          "border-radius": "50%",
        },
        '[data-orientation="horizontal"] &': {
          top: "50%",
          left: "-48px",
          transform: "translateY(-50%)",
        },
        '[data-orientation="vertical"] &': {
          top: "-48px",
          left: "50%",
          transform: "translateX(-50%)",
        },
      },
    },
    {
      id: "Next",
      name: "Carousel Next",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        ...buttonPseudosStyles,
        "": {
          ...base,
          position: "absolute",
          width: "32px",
          height: "32px",
          "border-radius": "50%",
        },
        '[data-orientation="horizontal"] &': {
          bottom: "50%",
          right: "-48px",
          transform: "translateY(50%)",
        },
        '[data-orientation="vertical"] &': {
          bottom: "-48px",
          right: "50%",
          transform: "translateX(50%)",
        },
      },
    },
  ],
  props: [
    {
      label: "Orientation",
      name: "orientation",
      type: { kind: "select" },
      default: "horizontal",
      options: [
        { label: "Horizontal (default)", value: "horizontal" },
        { label: "Vertical", value: "vertical" },
      ],
      placeholder: "",
      help: "The orientation of the carousel",
    },
    {
      label: "Align",
      name: "align",
      type: { kind: "select" },
      default: "start",
      options: [
        { label: "Start (default)", value: "start" },
        { label: "Center", value: "center" },
        { label: "End", value: "end" },
      ],
      placeholder: "",
      help: "The alignment of the carousel",
    },
    {
      label: "Loop",
      name: "loop",
      type: { kind: "boolean" },
      default: false,
      placeholder: "",
      help: "Enable infinite loop mode",
    },
    {
      label: "Start index",
      name: "startIndex",
      type: { kind: "number" },
      default: 0,
      placeholder: "",
      help: "The slide to start on",
    },
  ],
  events: [
    {
      label: "When Selected",
      name: "onSelect",
      help: "When the slide is selected",
      isDefault: false,
      additionalSources: [
        {
          id: "selectedScrollSnap",
          name: "The selected scroll snap",
          description: "The current index of the list",
          template: "$$payload",
          instanceTemplate: `current snap index`,
          outputType: { kind: "number" },
        },
      ],
    },
  ],
  defaultStyles: {
    "": {
      position: "relative",
    },
  },
  sources: [],
  actions: [],
  defaultChildren: [
    {
      kind: "Carousel$Brevity.Previous",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "Carousel$Brevity.Content",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "Carousel$Brevity.Content.Item",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Image$Brevity",
              props: {},
              styleProps: {},
              children: [],
            },
          ],
        },
        {
          kind: "Carousel$Brevity.Content.Item",
          props: {},
          styleProps: {},
          children: [
            {
              kind: "Image$Brevity",
              props: {},
              styleProps: {},
              children: [],
            },
          ],
        },
      ],
    },
    {
      kind: "Carousel$Brevity.Next",
      props: {},
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
};