"use client";
/*
 * Documentation:
 * Tabs — https://app.subframe.com/f023064a5ca0/library?component=Tabs_e1ad5091-8ad8-4319-b1f7-3e47f0256c20
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
  active?: boolean;
  disabled?: boolean;
  pill?: boolean;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
  {
    active = false,
    disabled = false,
    pill = false,
    icon = null,
    children,
    className,
    onClick,
    onKeyDown,
    role,
    tabIndex,
    ...otherProps
  }: ItemProps,
  ref
) {
  const interactive = typeof onClick === "function";
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/d5612535 flex w-full cursor-pointer items-center justify-center gap-2 rounded-t-md border-b-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 hover:border-b-2 hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary active:border-b-2 active:border-x-0 active:border-t-0 active:border-solid active:border-border-default active:bg-surface-neutral-secondary focus-within:shadow-focus",
        {
          "rounded-round border-none bg-surface-neutral-tertiary hover:bg-surface-feedback-subtle-neutral-hover":
            pill,
          "hover:border-b hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-border-disabled hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
            disabled,
          "border-b-2 border-x-0 border-t-0 border-solid border-brand-brand-border-solid-default bg-surface-neutral-tertiary":
            active,
        },
        className
      )}
      ref={ref}
      role={role ?? (interactive ? "tab" : undefined)}
      aria-selected={interactive ? active : undefined}
      aria-disabled={interactive && disabled ? true : undefined}
      tabIndex={interactive ? (disabled ? -1 : (tabIndex ?? 0)) : tabIndex}
      onClick={disabled ? undefined : onClick}
      onKeyDown={(event) => {
        onKeyDown?.(event);
        if (!interactive || disabled || event.defaultPrevented) return;
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          event.currentTarget.click();
        }
      }}
      {...otherProps}
    >
      {icon ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary group-hover/d5612535:text-text-neutral-primary",
            {
              "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
                disabled,
              "text-text-neutral-primary": active,
            }
          )}
        >
          {icon}
        </SubframeCore.IconWrapper>
      ) : null}
      {children ? (
        <span
          className={SubframeUtils.twClassNames(
            "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-hover/d5612535:text-text-neutral-primary",
            {
              "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
                disabled,
              "text-body-small-medium-0 font-body-small-medium-0": active,
            }
          )}
        >
          {children}
        </span>
      ) : null}
    </div>
  );
});

export interface TabsRootProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const TabsRoot = React.forwardRef<HTMLDivElement, TabsRootProps>(
  function TabsRoot(
    { children, className, ...otherProps }: TabsRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-end",
          className
        )}
        ref={ref}
        role={otherProps.role ?? "tablist"}
        {...otherProps}
      >
        {children ? (
          <div className="flex grow shrink-0 basis-0 items-start">
            {children}
          </div>
        ) : null}
      </div>
    );
  }
);

export const Tabs = Object.assign(TabsRoot, {
  Item,
});