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

const sharedStyles = {
  "font-size": "inherit",
  "font-weight": "inherit",
  "text-align": "inherit",
  "background-color": "transparent",
  "border-radius": "var(--theme-radii-sm)",
  "padding-left": "4px",
  "padding-right": "4px",
  "padding-top": "4px",
  "padding-bottom": "4px",
  "transition-property": "var(--theme-transitionProperty-common)",
  "transition-duration": "var(--theme-transitionDuration-normal)",
};

export default {
  name: "Editable",
  acceptsChildren: false,
  category: "Input",
  optionalLayers: [
    {
      id: "EditablePreview",
      name: "Editable Preview",
      acceptsChildren: false,
      props: [],
      defaultStyles: {
        "": {
          ...sharedStyles,
          display: "inline-flex",
          "align-items": "center",
          cursor: "text",
        },
        ":hover": {
          "background-color": "var(--theme-bg-muted)",
        },
        ":disabled": {
          opacity: 0.5,
          cursor: "not-allowed",
        },
      },
    },
    {
      id: "EditableInput",
      name: "Editable Input",
      acceptsChildren: false,
      styleProps: [],
      props: [],
      defaultStyles: {
        "": {
          ...sharedStyles,
          outline: "0",
          width: "100%",
        },
        ":focus-visible": {
          "outline-width": "1px",
          "outline-style": "solid",
          "outline-color": "var(--palette-ring)",
        },
      },
    },
  ],
  props: [
    {
      label: "Initial Value",
      name: "value",
      type: { kind: "text", isDynamic: true },
      default: "",
      isDefault: true,
      placeholder: "Enter some text...",
      help: "The editables's default value",
    },
  ],
  events: [
    {
      label: "When value changed",
      name: "onSubmit",
      help: "Fires when the editable's value is changed",
      isDefault: false,
      additionalSources: [
        {
          id: "$$value",
          name: "New Value",
          description: "The new value of the editable input",
          template: "$$value",
          instanceTemplate: `New Value`,
          outputType: { kind: "text" },
        },
      ],
    },
  ],
  defaultStyles: {
    "": {
      display: "inline-flex",
      "align-items": "center",
      position: "relative",
      gap: "6px",
      width: "100%",
    },
  },
  sources: [],
  actions: [],
  defaultChildren: [
    {
      kind: "Editable$Brevity.EditablePreview",
      props: {},
      styleProps: {},
      children: [],
    },
    {
      kind: "Editable$Brevity.EditableInput",
      props: {},
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
} as const;