"use client";
// @subframe/sync-disable -- local fix: generator emitted undefined `checked`/`highlighted` references in Select.Item; selection styling is handled by data-state classes (Phase 0 Subframe migration)
/*
 * Documentation:
 * Select — https://app.subframe.com/f023064a5ca0/library?component=Select_bb88f90b-8c43-4b73-9c2f-3558ce7838f3
 */

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

export interface ContentProps
  extends React.ComponentProps<typeof SubframeCore.Select.Content> {
  children?: React.ReactNode;
  className?: string;
}

const Content = React.forwardRef<HTMLDivElement, ContentProps>(function Content(
  { children, className, ...otherProps }: ContentProps,
  ref
) {
  return children ? (
    <SubframeCore.Select.Content asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full flex-col items-start gap-1 overflow-hidden rounded-sm border border-solid border-[#e5e5e5] bg-[#ffffff] px-1 py-1 shadow-sm",
          className
        )}
        ref={ref}
      >
        {children}
      </div>
    </SubframeCore.Select.Content>
  ) : null;
});

export interface ItemProps
  extends Omit<React.ComponentProps<typeof SubframeCore.Select.Item>, "value"> {
  value: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
  { value, children, className, ...otherProps }: ItemProps,
  ref
) {
  return (
    <SubframeCore.Select.Item
      value={value as string}
      asChild={true}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "group/969e345b flex w-full cursor-pointer items-center gap-1 rounded-sm px-2 py-2 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary active:shadow-focus data-[state=checked]:bg-brand-brand-surface-subtle-default hover:data-[state=checked]:bg-brand-subtle-hover active:data-[state=checked]:bg-brand-subtle-active data-[highlighted]:bg-brand-subtle-default hover:data-[highlighted]:bg-brand-subtle-hover active:data-[highlighted]:bg-brand-subtle-active",
          className
        )}
        ref={ref}
      >
        <Select.ItemText
          className="h-auto grow shrink-0 basis-0"
          variant={undefined}
        >
          {children || value}
        </Select.ItemText>
        <FeatherCheck className="hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-data-[state=checked]/969e345b:inline-flex" />
      </div>
    </SubframeCore.Select.Item>
  );
});

export interface ItemTextProps
  extends React.ComponentProps<typeof SubframeCore.Select.ItemText> {
  children?: React.ReactNode;
  variant?: "option-1" | "selected";
  className?: string;
}

const ItemText = React.forwardRef<HTMLSpanElement, ItemTextProps>(
  function ItemText(
    { children, variant = "option-1", className, ...otherProps }: ItemTextProps,
    ref
  ) {
    return children ? (
      <SubframeCore.Select.ItemText {...otherProps}>
        <span
          className={SubframeUtils.twClassNames(
            "group/c3085a74 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
            { "text-text-neutral-secondary": variant === "selected" },
            className
          )}
          ref={ref}
        >
          {children}
        </span>
      </SubframeCore.Select.ItemText>
    ) : null;
  }
);

export interface TriggerProps
  extends Omit<
    React.ComponentProps<typeof SubframeCore.Select.Trigger>,
    "placeholder"
  > {
  placeholder?: React.ReactNode;
  icon?: React.ReactNode;
  variant?: "not-filled" | "disabled" | "filled";
  size?: "medium" | "small" | "large";
  noPadding?: boolean;
  className?: string;
}

const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
  function Trigger(
    {
      placeholder,
      icon = null,
      variant = "not-filled",
      size = "medium",
      noPadding = false,
      className,
      ...otherProps
    }: TriggerProps,
    ref
  ) {
    return (
      <SubframeCore.Select.Trigger asChild={true} {...otherProps}>
        <button
          className={SubframeUtils.twClassNames(
            "group/7ce1d396 flex h-9 w-full items-center justify-between px-3 py-3 text-left",
            {
              "px-0 py-0": noPadding,
              "h-12": size === "large",
              "h-8": size === "small",
            },
            className
          )}
          ref={ref}
        >
          {icon ? (
            <SubframeCore.IconWrapper
              className={SubframeUtils.twClassNames(
                "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-subtle",
                {
                  "text-body-small-regular-0 font-body-small-regular-0":
                    size === "small",
                }
              )}
            >
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          <Select.TriggerValue
            placeholder={placeholder as string}
            variant={variant === "filled" ? "filled" : undefined}
            size={size === "large" ? "l" : size === "small" ? "s" : undefined}
          />
          <FeatherChevronDown
            className={SubframeUtils.twClassNames(
              "text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary",
              {
                "text-body-small-medium-0 font-body-small-medium-0":
                  size === "small",
                "text-icon-neutral-disabled": variant === "disabled",
              }
            )}
          />
        </button>
      </SubframeCore.Select.Trigger>
    );
  }
);

export interface TriggerValueProps
  extends React.ComponentProps<typeof SubframeCore.Select.Value> {
  placeholder?: React.ReactNode;
  variant?: "not-filled" | "disabled" | "filled";
  size?: "m" | "s" | "l";
  className?: string;
}

const TriggerValue = React.forwardRef<
  React.ElementRef<typeof SubframeCore.Select.Value>,
  TriggerValueProps
>(function TriggerValue(
  {
    placeholder,
    variant = "not-filled",
    size = "m",
    className,
    ...otherProps
  }: TriggerValueProps,
  ref
) {
  return (
    <SubframeCore.Select.Value
      className={SubframeUtils.twClassNames(
        "group/21c51472 whitespace-nowrap text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-subtle",
        {
          "text-text-neutral-secondary": variant === "filled",
          "text-text-neutral-disabled": variant === "disabled",
        },
        className
      )}
      ref={ref}
      placeholder={placeholder}
      {...otherProps}
    >
      Value
    </SubframeCore.Select.Value>
  );
});

export interface SelectRootProps
  extends React.ComponentProps<typeof SubframeCore.Select.Root> {
  disabled?: boolean;
  error?: boolean;
  variant?: "outline" | "filled";
  borderless?: boolean;
  noPadding?: boolean;
  size?: "medium" | "small" | "large";
  showLabel?: boolean;
  label?: React.ReactNode;
  placeholder?: React.ReactNode;
  helpText?: React.ReactNode;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  errorText?: React.ReactNode;
  value?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}

const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
  function SelectRoot(
    {
      disabled = false,
      error = false,
      variant = "outline",
      borderless = false,
      noPadding = false,
      size = "medium",
      showLabel = false,
      label,
      placeholder,
      helpText,
      icon = null,
      children,
      errorText,
      className,
      value,
      defaultValue,
      onValueChange,
      open,
      defaultOpen,
      onOpenChange,
      dir,
      name,
      autoComplete,
      required,
      form,
      ...otherProps
    }: SelectRootProps,
    ref
  ) {
    return (
      <SubframeCore.Select.Root
        disabled={disabled}
        value={value}
        defaultValue={defaultValue}
        onValueChange={onValueChange}
        open={open}
        defaultOpen={defaultOpen}
        onOpenChange={onOpenChange}
        dir={dir}
        name={name}
        autoComplete={autoComplete}
        required={required}
        form={form}
      >
        <div
          className={SubframeUtils.twClassNames(
            "group/bb88f90b flex w-full min-w-[192px] max-w-[320px] cursor-pointer flex-col items-start gap-4",
            className
          )}
          ref={ref}
          {...otherProps}
        >
          <div
            className={SubframeUtils.twClassNames(
              "hidden flex-col items-start gap-3",
              { flex: showLabel }
            )}
          >
            {label ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
                  { "text-text-feedback-negative": error }
                )}
              >
                {label}
              </span>
            ) : null}
            {helpText ? (
              <span className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary">
                {helpText}
              </span>
            ) : null}
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "flex w-full flex-col items-start gap-4 rounded-[4px]",
              { "gap-1": error }
            )}
          >
            <div
              className={SubframeUtils.twClassNames(
                "flex w-full flex-col items-start rounded-sm border border-solid border-border-strong bg-surface-neutral-primary group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-brand-brand-border-solid-hover group-hover/bb88f90b:bg-surface-neutral-secondary group-focus-within/bb88f90b:bg-surface-neutral-secondary group-focus-within/bb88f90b:shadow-focus",
                {
                  "border-none group-hover/bb88f90b:border-none": borderless,
                  "bg-surface-neutral-secondary": variant === "filled",
                  "border border-solid border-border-negative-solid group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-border-negative-solid group-focus-within/bb88f90b:border-2 group-focus-within/bb88f90b:border-solid group-focus-within/bb88f90b:border-border-negative-solid group-focus-within/bb88f90b:shadow-none":
                    error,
                  "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-border-disabled group-hover/bb88f90b:bg-surface-neutral-disabled group-focus-within/bb88f90b:bg-surface-neutral-disabled group-focus-within/bb88f90b:shadow-none":
                    disabled,
                }
              )}
            >
              <Trigger
                placeholder={placeholder}
                icon={icon}
                variant={
                  variant === "filled"
                    ? "filled"
                    : disabled
                    ? "disabled"
                    : undefined
                }
                size={
                  size === "large"
                    ? "large"
                    : size === "small"
                    ? "small"
                    : undefined
                }
              />
            </div>
            {errorText ? (
              <span
                className={SubframeUtils.twClassNames(
                  "hidden text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-negative",
                  { inline: error }
                )}
              >
                {errorText}
              </span>
            ) : null}
            <Content>
              {children ? (
                <div className="flex w-full grow shrink-0 basis-0 flex-col items-start">
                  {children}
                </div>
              ) : null}
            </Content>
          </div>
        </div>
      </SubframeCore.Select.Root>
    );
  }
);

export const Select = Object.assign(SelectRoot, {
  Content,
  Item,
  ItemText,
  Trigger,
  TriggerValue,
});