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

export const Btn = {
  name: "Button",
  acceptsChildren: true,
  category: "Basic",
  props: [
    {
      label: "Type",
      name: "type",
      type: { kind: "select" },
      default: "button",
      isDefault: true,
      options: [
        { label: "Button", value: "button" },
        { label: "Submit", value: "submit" },
        { label: "Reset", value: "reset" },
      ],
      placeholder: "enter some text",
      help: "This only applies inside a 'Form' component",
    },
    {
      label: "Is disabled",
      name: "disabled",
      type: { kind: "boolean", isDynamic: true },
      isDefault: true,
      default: false,
      placeholder: "",
      help: "Whether the button is disabled",
    },
  ],
  events: [
    {
      label: "When clicked",
      name: "onClick",
      help: "Select an action to run when button is clicked",
      isDefault: true,
    },
    {
      label: "When mouse enter",
      name: "onMouseEnter",
      help: "Select an action to run when button is hovered",
      isDefault: false,
    },
    {
      label: "When mouse leave",
      name: "onMouseLeave",
      help: "Select an action to run when button is no longer hovered",
      isDefault: false,
    },
  ],
  styleProps: [
    {
      label: "Size",
      name: "size",
      type: { kind: "select" },
      options: [
        {
          label: "2xs",
          value: "2xs",
          selector: '[data-size="2xs"]',
          styles: {
            "": {
              height: "24px",
              "min-width": "24px",
              "font-size": "var(--theme-fontSizes-xs)",
              "padding-left": "8px",
              "padding-right": "8px",
              gap: "4px",
            },
            " svg": {
              height: "14px",
              width: "14px",
            },
          },
        },
        {
          label: "xs",
          value: "xs",
          selector: '[data-size="xs"]',
          styles: {
            "": {
              height: "32px",
              "min-width": "32px",
              "font-size": "var(--theme-fontSizes-xs)",
              "padding-left": "10px",
              "padding-right": "10px",
              gap: "4px",
            },
            " svg": {
              height: "16px",
              width: "16px",
            },
          },
        },
        {
          label: "sm",
          value: "sm",
          selector: '[data-size="sm"]',
          styles: {
            "": {
              height: "36px",
              "min-width": "36px",
              "font-size": "var(--theme-fontSizes-sm)",
              "padding-left": "14px",
              "padding-right": "14px",
              gap: "8px",
            },
            " svg": {
              height: "16px",
              width: "16px",
            },
          },
        },
        {
          label: "md",
          value: "md",
          selector: '[data-size="md"]',
          styles: {
            "": {
              height: "40px",
              "min-width": "40px",
              "font-size": "var(--theme-fontSizes-sm)",
              "padding-left": "16px",
              "padding-right": "16px",
              gap: "8px",
            },
            " svg": {
              height: "20px",
              width: "20px",
            },
          },
        },
        {
          label: "lg",
          value: "lg",
          selector: '[data-size="lg"]',
          styles: {
            "": {
              height: "44px",
              "min-width": "44px",
              "font-size": "var(--theme-fontSizes-md)",
              "padding-left": "20px",
              "padding-right": "20px",
              gap: "12px",
            },
            " svg": {
              height: "20px",
              width: "20px",
            },
          },
        },
        {
          label: "xl",
          value: "xl",
          selector: '[data-size="xl"]',
          styles: {
            "": {
              height: "48px",
              "min-width": "48px",
              "font-size": "var(--theme-fontSizes-md)",
              "padding-left": "20px",
              "padding-right": "20px",
              gap: "10px",
            },
            " svg": {
              height: "20px",
              width: "20px",
            },
          },
        },
        {
          label: "2xl",
          value: "2xl",
          selector: '[data-size="2xl"]',
          styles: {
            "": {
              height: "64px",
              "min-width": "64px",
              "font-size": "var(--theme-fontSizes-lg)",
              "padding-left": "28px",
              "padding-right": "28px",
              gap: "12px",
            },
            " svg": {
              height: "24px",
              width: "24px",
            },
          },
        },
      ],
      default: "md",
      help: 'The size of the button. "md" is the default size',
    },
    {
      label: "Variant",
      name: "variant",
      type: { kind: "select" },
      options: [
        {
          label: "Solid",
          value: "solid",
          selector: '[data-variant="solid"]',
          styles: {
            "": {
              "background-color": "var(--palette-solid)",
              color: "var(--palette-contrast)",
            },
            ":hover": {
              "background-color":
                "color-mix(in oklch, var(--palette-solid) 90%, transparent)",
            },
          },
        },
        {
          label: "Subtle",
          value: "subtle",
          selector: '[data-variant="subtle"]',
          styles: {
            "": {
              "background-color": "var(--palette-subtle)",
              color: "var(--palette-fg)",
            },
            ":hover": {
              "background-color": "var(--palette-muted)",
            },
          },
        },
        {
          label: "Outline",
          value: "outline",
          selector: '[data-variant="outline"]',
          styles: {
            "": {
              "border-width": "1px",
              "border-color": "var(--palette-muted)",
              color: "var(--palette-fg)",
            },
            ":hover": {
              "background-color": "var(--palette-subtle)",
            },
          },
        },
        {
          label: "Elevated",
          value: "elevated",
          selector: '[data-variant="elevated"]',
          styles: {
            "": {
              "border-width": "1px",
              "border-color": "var(--palette-muted)",
              "background-color": "var(--theme-bg-panel)",
              "box-shadow": "var(--theme-shadows-sm)",
              color: "var(--palette-fg)",
            },
            ":hover": {
              "background-color": "var(--palette-subtle)",
            },
          },
        },
        {
          label: "Ghost",
          value: "ghost",
          selector: '[data-variant="ghost"]',
          styles: {
            "": {
              color: "var(--palette-fg)",
            },
            ":hover": {
              "background-color": "var(--palette-subtle)",
            },
          },
        },
        {
          label: "Plain",
          value: "plain",
          selector: '[data-variant="plain"]',
          styles: {
            "": {
              color: "var(--palette-fg)",
            },
          },
        },
      ],
      default: "subtle",
    },
    {
      label: "Color Palette",
      name: "data-palette",
      type: { kind: "palette" },
      default: "neutral",
      help: "The color scheme of the button",
    },
  ],
  defaultStyles: {
    ":focus-visible": {
      "outline-width": "2px",
      "outline-offset": "2px",
      "outline-style": "solid",
      "outline-color": "var(--palette-ring)",
    },
    ":disabled": {
      "pointer-events": "none",
      opacity: 0.5,
    },
    " svg": {
      "flex-shrink": "0",
    },
    "": {
      display: "inline-flex",
      appearance: "none",
      "align-items": "center",
      "justify-content": "center",
      "user-select": "none",
      position: "relative",
      "border-radius": "var(--theme-radii-md)",
      "white-space": "nowrap",
      "vertical-align": "middle",
      "border-width": "1px",
      "border-color": "transparent",
      "flex-shrink": "0",
      outline: "none",
      "line-height": "1.2",
      isolation: "isolate",
      "font-family": "var(--theme-fonts-body)",
      "font-weight": "var(--theme-fontWeights-medium)",
      "transition-property": "var(--theme-transitionProperty-common)",
      "transition-duration": "var(--theme-transitionDuration-moderate)",
    },
  },
  defaultChildren: [
    {
      kind: "Text$Brevity",
      props: {
        value: "Click me",
      },
      styleProps: {
        size: "inherit",
        variant: "inherit",
      },
      children: [],
    },
  ] satisfies DefaultChild[],
  sources: [],
  actions: [],
};

export const IconButton = {
  ...Btn,
  name: "IconButton",
  props: [
    ...Btn.props,
    {
      label: "Aria label",
      name: "aria-label",
      type: { kind: "text" },
      default: "",
      placeholder: "enter some text",
      help: "A label for screen readers",
    },
  ],
  styleProps: Btn.styleProps.map((styleProp) => {
    if (styleProp.type.kind === "select" && styleProp.name === "size") {
      return {
        ...styleProp,
        options: (styleProp as SelectProp).options.map((option) => {
          return {
            ...option,
            styles: {
              ...option.styles,
              "": {
                ...option.styles[""],
                "padding-left": "0px",
                "padding-right": "0px",
              },
            },
          };
        }),
      };
    }
    return styleProp;
  }),
  defaultChildren: [
    {
      kind: "Icon$Brevity",
      props: {
        children: {
          __type: "icon",
          icon: "sentiment_satisfied",
          pack: "materialsymbolsoutlined",
        },
      },
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
};