import { Btn } from "./Btn";
import Input from "./Input";
import Text from "./Text";
import { mergeStylePropsWithDefaults } from "./utils";

export default {
  name: "Login",
  acceptsChildren: false,
  category: "Other",
  dependsOn: ["Text$Brevity", "Input$Brevity", "Button$Brevity"],
  layers: [
    {
      id: "headline",
      name: "Headline",
      styleProps: mergeStylePropsWithDefaults(Text.styleProps as any, {
        size: "2xl",
        variant: "heading",
      }),
      defaultStyles: Text.defaultStyles,
      // defaultStyles: {
      //   "": {
      //     color: "var(--theme-fg-default)",
      //     "font-family": "var(--theme-fonts-heading)",
      //     "font-weight": "var(--theme-fontWeights-bold)",
      //     "font-size": "var(--theme-fontSizes-2xl)",
      //     margin: "0px 0px",
      //   },
      // },
    },
    {
      id: "subtitle",
      name: "Subtitle",
      // defaultStyles: {
      //   "": {
      //     color: "var(--theme-fg-default)",
      //     "font-family": "var(--theme-fonts-body)",
      //     "font-weight": "var(--theme-fontWeights-normal)",
      //     "font-size": "var(--theme-fontSizes-md)",
      //     margin: "0px 0px",
      //   },
      // },
      styleProps: mergeStylePropsWithDefaults(Text.styleProps as any, {
        size: "md",
        variant: "body",
      }),
      defaultStyles: Text.defaultStyles,
    },
    {
      id: "error",
      name: "Error",
      defaultStyles: {
        "": {
          color: "var(--theme-fg-error)",
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-normal)",
          "font-size": "var(--theme-fontSizes-md)",
          "background-color": "var(--theme-bg-panel)",
          gap: "var(--theme-spacing-3xs)",
          padding: "var(--theme-spacing-3xs)",
          display: "flex",
          "align-items": "center",
          "border-radius": "var(--theme-radii-md)",
          "border-color": "var(--theme-border-error)",
          "border-width": "1px",
        },
      },
    },
    {
      id: "container",
      name: "Container",
      defaultStyles: {
        "": {
          display: "flex",
          "flex-direction": "column",
          gap: "var(--theme-spacing-xs)",
        },
      },
    },
    {
      id: "input",
      name: "Input",
      // defaultStyles: {
      //   ":focus-visible": {
      //     "outline-width": "1px",
      //     "outline-style": "solid",
      //     "outline-color": "var(--palette-ring)",
      //   },
      //   ":user-invalid": {
      //     "border-color": "var(--theme-border-error)",
      //   },
      //   ":disabled": {
      //     opacity: 0.5,
      //     cursor: "not-allowed",
      //   },
      //   "": {
      //     "font-size": "var(--theme-fontSizes-sm)",
      //     "line-height": "1.25rem",
      //     height: "40px",
      //     "padding-left": "12px",
      //     "padding-right": "12px",
      //     "background-color": "transparent",
      //     "border-width": "1px",
      //     "border-color": "var(--theme-border-default)",
      //     width: "100%",
      //     "min-width": "0",
      //     outline: "var(--theme-sizes-zero)",
      //     position: "relative",
      //     "text-align": "left",
      //     "border-radius": "var(--theme-radii-md)",
      //     "font-family": "var(--theme-fonts-body)",
      //     display: "inline-flex",
      //   },
      // },
      styleProps: Input.styleProps,
      defaultStyles: Input.defaultStyles,
    },
    {
      id: "primaryButton",
      name: "Primary Button",
      styleProps: mergeStylePropsWithDefaults(Btn.styleProps as any, {
        variant: "solid",
        size: "md",
      }),
      defaultStyles: Btn.defaultStyles,
      // defaultStyles: {
      //   ":hover": {
      //     "background-color":
      //       "color-mix(in oklch, var(--palette-solid) 90%, transparent)",
      //   },
      //   ":focus-visible": {
      //     "outline-width": "2px",
      //     "outline-offset": "2px",
      //     "outline-style": "solid",
      //     "outline-color": "var(--palette-ring)",
      //   },
      //   ":disabled": {
      //     "pointer-events": "none",
      //     opacity: 0.5,
      //   },
      //   "": {
      //     height: "40px",
      //     "min-width": "40px",
      //     "font-size": "var(--theme-fontSizes-sm)",
      //     "padding-left": "16px",
      //     "padding-right": "16px",
      //     gap: "8px",
      //     "background-color": "var(--palette-solid)",
      //     color: "var(--palette-contrast)",
      //     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)",
      //   },
      // },
    },
    {
      id: "secondaryButton",
      name: "Secondary Button",
      styleProps: mergeStylePropsWithDefaults(Btn.styleProps as any, {
        variant: "outline",
        size: "md",
      }),
      defaultStyles: Btn.defaultStyles,
      // defaultStyles: {
      //   ":hover": {
      //     "background-color": "var(--palette-subtle)",
      //   },
      //   ":focus-visible": {
      //     "outline-width": "2px",
      //     "outline-offset": "2px",
      //     "outline-style": "solid",
      //     "outline-color": "var(--palette-ring)",
      //   },
      //   ":disabled": {
      //     "pointer-events": "none",
      //     opacity: 0.5,
      //   },
      //   "": {
      //     height: "40px",
      //     "min-width": "40px",
      //     "font-size": "var(--theme-fontSizes-sm)",
      //     "padding-left": "16px",
      //     "padding-right": "16px",
      //     gap: "8px",
      //     "border-width": "1px",
      //     "border-color": "var(--palette-muted)",
      //     "background-color": "var(--theme-bg-panel)",
      //     "box-shadow": "var(--theme-shadows-sm)",
      //     color: "var(--palette-fg)",
      //     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",
      //     "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)",
      //   },
      // },
    },
    {
      id: "divider",
      name: "Divider",
      defaultStyles: {
        "": {
          display: "flex",
          gap: "40px",
          "border-color": "var(--theme-border-default)",
        },
      },
    },
    {
      id: "footer",
      name: "Footer",
      defaultStyles: {
        "": {
          display: "flex",
          width: "100%",
          "justify-content": "space-between",
          "align-items": "center",
        },
      },
    },
    {
      id: "link",
      name: "Link",
      defaultStyles: {
        ":focus-visible": {
          "outline-width": "2px",
          "outline-offset": "2px",
          "outline-style": "solid",
          "outline-color": "var(--palette-ring)",
        },
        "": {
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "flex",
          "flex-direction": "row",
          "justify-content": "flex-start",
          "align-items": "stretch",
        },
      },
    },
  ],
  props: [
    {
      label: "Redirect",
      name: "callbackUrl",
      type: { kind: "route", isDynamic: false },
      default: null,
      placeholder: "Select a page",
      help: "The page you'd like to redirect to",
      required: true,
    },
    {
      label: "Redirect Query Params",
      name: "query",
      type: { kind: "static", of: "queryParam", isList: true },
      default: null,
      placeholder: "Select an (optional) set of query params",
      help: "The query params you'd like to pass to the page",
    },
    {
      label: "Disable Create Account",
      name: "disableCreate",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "When checked, the create account button will be disabled",
      required: false,
    },
    {
      label: "Title",
      name: "title",
      type: { kind: "text", isDynamic: true },
      isDefault: true,
      default: "Welcome",
      placeholder: "Enter some text...",
      help: "The text to display",
      required: false,
    },
    {
      label: "Subtitle",
      name: "subtitle",
      isDefault: true,
      type: { kind: "text", isDynamic: true },
      default: "Enter email to continue",
      placeholder: "Enter some text...",
      help: "The text to display",
      required: false,
    },
    {
      label: "Disable Passkeys",
      name: "disablePasskey",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "When checked, the create passkey flow will be disabled",
      required: false,
    },
  ],
  events: [],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "column",
      gap: "var(--theme-spacing-sm)",
      width: "100%",
    },
  },
  sources: [],
  actions: [],
} as const;