export default {
  name: "Data Importer",
  acceptsChildren: false,
  category: "Data",
  dependsOn: ["Button$Brevity", "Select$Brevity", "Spinner$Brevity"],
  layers: [
    {
      id: "primaryButton",
      name: "Primary Button",
      defaultStyles: {
        ":hover": {
          "background-color": "var(--theme-border-default)",
        },
        ":active": {
          "background-color": "var(--theme-brand-neutral-300)",
        },
        ":focus-visible": {
          "box-shadow": "var(--theme-shadows-outline)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "box-shadow": "none",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-semibold)",
          "font-size": "var(--theme-fontSizes-md)",
          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",
        },
      },
    },
    {
      id: "secondaryButton",
      name: "Secondary Button",
      defaultStyles: {
        ":hover": {
          "background-color": "var(--theme-bg-muted)",
        },
        ":active": {
          "background-color": "var(--theme-border-default)",
        },
        ":focus-visible": {
          "box-shadow": "var(--theme-shadows-outline)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "box-shadow": "none",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-semibold)",
          "font-size": "var(--theme-fontSizes-md)",
          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": "2px",
          "border-style": "solid",
          "background-color": "#ffffff",
          "box-shadow": "var(--theme-shadows-none)",
          cursor: "pointer",
        },
      },
    },
  ],
  props: [
    {
      label: "Table",
      name: "table",
      type: { kind: "columnMap" },
      default: null,
      isDefault: true,
      placeholder: "Select a table",
      help: "The table you'd like to upload to",
      required: true,
    },
    {
      label: "Conflict Action",
      name: "conflictAction",
      type: { kind: "select" },
      isDefault: true,
      default: "update",
      options: [
        { label: "Update (default)", value: "update" },
        { label: "Ignore", value: "ignore" },
      ],
      placeholder: "",
      help: "The action to take when a conflict is detected",
    },
  ],
  events: [
    {
      label: "When done",
      name: "onClose",
      isDefault: true,
      help: "Select an action to run when process is finished",
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "column",
      width: "100%",
      "margin-left": "auto",
      "margin-right": "auto",
      "margin-top": "0px",
      "margin-bottom": "0px",
    },
  },
  sources: [],
  actions: [],
} as const;