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

export default {
  name: "Tabs",
  acceptsChildren: false,
  category: "Container",
  optionalLayers: [
    {
      id: "TabsList",
      name: "Tabs List",
      acceptsChildren: true,
      props: [],
      defaultStyles: {
        "": {
          display: "flex",
          position: "relative",
          isolation: "isolate",
          "align-items": "center",
          "justify-content": "flex-start",
          width: "fit-content",
        },
        '[data-variant="enclosed"]': {
          "border-radius": "var(--theme-radii-md)",
          "background-color": "var(--theme-bg-muted)",
          "padding-left": "4px",
          "padding-right": "4px",
          "padding-top": "4px",
          "padding-bottom": "4px",
          "min-height": "calc(var(--tabs-height) - 4px)",
        },
        '[data-variant="line"]': {
          width: "100%",
          "border-color": "var(--theme-border-default)",
          "border-bottom-width": "1px",
        },
        '[data-variant="outline"]': {
          "border-color": "var(--theme-border-default)",
        },
        '[data-variant="outline"]::before': {
          content: "''",
          position: "absolute",
          bottom: "0px",
          width: "100%",
          "border-bottom-width": "1px",
          "border-bottom-color": "var(--theme-border-default)",
        },
      },
    },
    {
      id: "TabsTrigger",
      name: "Tabs Trigger",
      acceptsChildren: true,
      props: [
        {
          label: "Value",
          name: "value",
          type: { kind: "text", isDynamic: true },
          default: null,
          required: true,
          placeholder: "",
          help: "The value of the trigger",
        },
        {
          label: "Is disabled",
          name: "disabled",
          type: { kind: "boolean", isDynamic: true },
          default: false,
          placeholder: "",
          help: "Whether the tab is disabled",
        },
      ],
      additionalStates: [
        {
          label: "Tab is active",
          value: "[data-state='active']",
        },
      ],
      defaultStyles: {
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "pointer-events": "none",
        },
        ":focus-visible": {
          outline: "none",
          "box-shadow": "rgb(49, 130, 206) 0px 0px 0px 1px",
        },
        "": {
          cursor: "pointer",
          display: "flex",
          "justify-content": "center",
          "white-space": "nowrap",
          "padding-right": "12px",
          "padding-left": "12px",
          "padding-top": "6px",
          "padding-bottom": "6px",
          "font-size": "1rem",
          "font-weight": "var(--theme-fontWeights-medium)",
          "align-items": "center",
          "background-color": "transparent",
        },
        '[data-variant="enclosed"]': {
          "justify-content": "center",
          color: "var(--theme-fg-muted)",
          "border-radius": "var(--theme-radii-base)",
        },
        '[data-variant="enclosed"][data-state="active"]': {
          "background-color": "var(--theme-bg-default)",
          color: "var(--palette-fg)",
          "box-shadow": "var(--theme-shadows-sm)",
        },
        '[data-variant="line"]': {
          color: "var(--theme-fg-muted)",
        },
        '[data-variant="line"][data-state="active"]': {
          color: "var(--theme-fg-default)",
          position: "relative",
        },
        '[data-variant="line"][data-state="active"]::before': {
          content: "''",
          position: "absolute",
          bottom: "-1px",
          "inset-inline": "0",
          height: "2px",
          background: "var(--palette-solid)",
        },
        '[data-variant="subtle"]': {
          "border-radius": "var(--theme-radii-base)",
          color: "var(--theme-fg-muted)",
        },
        '[data-variant="subtle"][data-state="active"]': {
          "background-color": "var(--palette-subtle)",
          color: "var(--palette-fg)",
        },
        '[data-variant="outline"]': {
          color: "var(--theme-fg-muted)",
          isolation: "isolate",
          "border-width": "1px",
          "border-color": "transparent",
          "border-top-left-radius": "var(--theme-radii-md)",
          "border-top-right-radius": "var(--theme-radii-md)",
          "margin-bottom": "-1px",
        },
        '[data-variant="outline"][data-state="active"]': {
          "background-color": "var(--theme-bg-default)",
          color: "var(--palette-fg)",
          "border-color": "var(--theme-border-default)",
          "border-bottom-color": "transparent",
        },
        '[data-variant="outline"]:not(:last-child)': {
          "margin-right": "-1px",
        },
      },
    },
    {
      id: "TabsContent",
      name: "Tabs Content",
      acceptsChildren: true,
      props: [
        {
          label: "Value",
          name: "value",
          type: { kind: "text", isDynamic: true },
          default: null,
          required: true,
          placeholder: "",
          help: "The value of the content",
        },
      ],
      defaultStyles: {
        ":focus-visible": {
          outline: "none",
          "box-shadow": "var(--palette-ring) 0px 0px 0px 1px",
        },
        "": {
          "margin-top": "8px",
        },
      },
    },
  ],
  props: [
    {
      label: "Initial Value",
      name: "defaultValue",
      type: { kind: "text", isDynamic: true },
      default: null,
      required: true,
      placeholder: "",
      help: "The initial value of the tabs",
    },
  ],
  styleProps: [
    {
      label: "Variant",
      name: "variant",
      type: { kind: "select" },
      options: [
        {
          label: "Enclosed",
          value: "enclosed",
          selector: '[data-variant="enclosed"]',
          styles: {},
        },
        {
          label: "Line",
          value: "line",
          selector: '[data-variant="line"]',
          styles: {},
        },
        {
          label: "Subtle",
          value: "subtle",
          selector: '[data-variant="subtle"]',
          styles: {},
        },
        {
          label: "Outline",
          value: "outline",
          selector: '[data-variant="outline"]',
          styles: {},
        },
      ],
      default: "enclosed",
    },
    {
      label: "Size",
      name: "size",
      type: { kind: "select" },
      options: [
        {
          label: "sm",
          value: "sm",
          selector: ' [data-size="sm"]',
          styles: {
            '[data-tabs="list"]': {
              "min-height": "36px",
            },
            '[data-variant="enclosed"][data-tabs="list"]': {
              "min-height": "36px",
            },
            '[data-variant="enclosed"][data-tabs="trigger"]': {
              height: "28px",
              "min-width": "28px",
            },
            '[data-tabs="trigger"]': {
              height: "36px",
              "min-width": "36px",
              "padding-top": "4px",
              "padding-bottom": "4px",
              "padding-left": "12px",
              "padding-right": "12px",
              "font-size": "var(--theme-fontSizes-sm)",
              "line-height": "1.25rem",
            },
          },
        },
        {
          label: "md",
          value: "md",
          selector: ' [data-size="md"]',
          styles: {
            '[data-tabs="list"]': {
              "min-height": "40px",
            },
            '[data-variant="enclosed"][data-tabs="list"]': {
              "min-height": "40px",
            },
            '[data-variant="enclosed"][data-tabs="trigger"]': {
              height: "32px",
              "min-width": "32px",
            },
            '[data-tabs="trigger"]': {
              height: "40px",
              "min-width": "40px",
              "padding-top": "8px",
              "padding-bottom": "8px",
              "padding-left": "16px",
              "padding-right": "16px",
              "font-size": "var(--theme-fontSizes-sm)",
              "line-height": "1.25rem",
            },
          },
        },
        {
          label: "lg",
          value: "lg",
          selector: ' [data-size="lg"]',
          styles: {
            '[data-tabs="list"]': {
              "min-height": "44px",
            },
            '[data-variant="enclosed"][data-tabs="list"]': {
              "min-height": "44px",
            },
            '[data-variant="enclosed"][data-tabs="trigger"]': {
              height: "36px",
              "min-width": "36px",
            },
            '[data-tabs="trigger"]': {
              height: "44px",
              "min-width": "44px",
              "padding-top": "8px",
              "padding-bottom": "8px",
              "padding-left": "18px",
              "padding-right": "18px",
              "font-size": "var(--theme-fontSizes-md)",
              "line-height": "1.5rem",
            },
          },
        },
      ],
      default: "md",
      help: 'The size of the avatr. "md" is the default size',
    },
    {
      label: "Color Palette",
      name: "data-palette",
      type: { kind: "palette" },
      default: "brand",
      help: "The color scheme of the button",
    },
  ],
  events: [],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "column",
      position: "relative",
    },
  },
  sources: [
    {
      id: "value",
      name: "{{= it.component.name }}'s current value",
      provider: "StateProvider",
      description: "The value of the active tab",
      template:
        "$get('{{= it.component.id}}', { value: {{= it.stringify(it.component.props.defaultValue) }} ?? '' }).value",
      instanceTemplate: `{{= it.component.name }}'s current value`,
      outputType: {
        kind: "text",
      },
    },
  ],
  actions: [],
  defaultChildren: [
    {
      kind: "Tabs$Brevity.TabsList",
      props: {},
      styleProps: {},
      children: [
        {
          kind: "Tabs$Brevity.TabsTrigger",
          props: {
            value: "a",
          },
          styleProps: {},
          children: [
            {
              kind: "Text$Brevity",
              props: {
                value: "Tab 1",
              },
              styleProps: {
                size: "inherit",
                variant: "inherit",
              },
              children: [],
            },
          ],
        },
        {
          kind: "Tabs$Brevity.TabsTrigger",
          props: {
            value: "b",
          },
          styleProps: {},
          children: [
            {
              kind: "Text$Brevity",
              props: {
                value: "Tab 2",
              },
              styleProps: {
                size: "inherit",
                variant: "inherit",
              },
              children: [],
            },
          ],
        },
      ],
    },
    {
      kind: "Tabs$Brevity.TabsContent",
      props: {
        value: "a",
      },
      styleProps: {},
      children: [],
    },
    {
      kind: "Tabs$Brevity.TabsContent",
      props: {
        value: "b",
      },
      styleProps: {},
      children: [],
    },
  ] satisfies DefaultChild[],
};
