// ~/src/siteplane/components/textarea/textarea.tsx

"use client";

import { Field as FieldPrimitive } from "@base-ui/react/field";
import { mergeProps } from "@base-ui/react/merge-props";
import type * as React from "react";

import {
  type SiteplaneControlSize,
  useResolvedControlSize,
} from "../../system/provider/siteplane-ui-provider";
import {
  formControlSurfaceClassNames,
  formControlTextClassNames,
  surfaceClassNames,
  type FormControlSurface,
  type FormControlTextSize,
} from "../../system/styles/surface";
import { cn } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import { useFieldLabelPlacement } from "../field";

import type { KitTextareaProps } from "./textarea-internal";

import "./textarea.css";

export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> &
  React.RefAttributes<HTMLTextAreaElement> & {
    size?: SiteplaneControlSize | undefined;
    textSize?: FormControlTextSize | undefined;
    variant?: FormControlSurface | undefined;
    unstyled?: boolean | undefined;
    /**
     * The least height as a number of text lines, fractions allowed, instead of
     * the minimum of the size. The textarea still grows with its content. The
     * native `rows` cannot do this: a textarea that sizes to its content
     * ignores it.
     */
    minLines?: number | undefined;
    /**
     * The most height as a number of text lines, fractions allowed: the
     * textarea grows with its content up to it, then scrolls. Unset, it grows
     * without a limit. `minLines` wins where the two disagree.
     */
    maxLines?: number | undefined;
  };

export function Textarea(ownProps: TextareaProps): React.ReactElement {
  // InputGroupTextarea passes the internal input-group profile through
  // KitTextarea (textarea-internal.ts), the same function.
  const {
    className,
    size,
    textSize,
    variant = "default",
    unstyled = false,
    profile = "default",
    insetEnd = false,
    minLines,
    maxLines,
    ref,
    ...props
  } = ownProps as KitTextareaProps;
  const resolvedSize = useResolvedControlSize(size);
  const resolvedTextSize =
    textSize ??
    (resolvedSize === "lg" || resolvedSize === "xl" ? "base" : undefined);
  // A floating Field lays out the textarea it holds (design-rework.css,
  // "Floating label fields"); a textarea inside an InputGroup keeps the
  // group's layout. A blank placeholder lets CSS tell an empty field.
  const floating =
    useFieldLabelPlacement() === "floating" && profile !== "input-group";
  const textareaProps =
    floating && props.placeholder === undefined
      ? { ...props, placeholder: " " }
      : props;

  const isLineCount = (value: number | undefined): value is number =>
    value !== undefined && Number.isFinite(value) && value > 0;
  const hasMinLines = isLineCount(minLines);
  const hasMaxLines = isLineCount(maxLines);
  // The line counts are run-time values. The stylesheet turns them into
  // heights (design-rework.css) and keeps a height where a policy blocks the
  // style attribute: 2.5 lines for minLines, no limit for maxLines.
  const lineStyle =
    hasMinLines || hasMaxLines
      ? ({
          ...(hasMinLines ? { "--textarea-min-lines": minLines } : {}),
          ...(hasMaxLines ? { "--textarea-max-lines": maxLines } : {}),
        } as React.CSSProperties)
      : undefined;

  return (
    <span
      className={
        cn(
          "sp-textarea-control sp-base-textarea",
          !unstyled && surfaceClassNames.formControl,
          !unstyled && formControlSurfaceClassNames[variant],
          resolvedTextSize && formControlTextClassNames[resolvedTextSize],
          className,
        ) || undefined
      }
      data-foundation="textarea"
      data-inset-end={(profile === "input-group" && insetEnd) || undefined}
      data-label-placement={floating ? "floating" : undefined}
      data-max-lines={hasMaxLines ? maxLines : undefined}
      data-min-lines={hasMinLines ? minLines : undefined}
      data-profile={profile}
      data-size={resolvedSize}
      data-slot="textarea-control"
      // Only an explicit textSize replaces the size-based field text.
      data-text-size={textSize}
      data-unstyled={unstyled || undefined}
      data-variant={variant}
      style={lineStyle}
    >
      <FieldPrimitive.Control
        ref={ref}
        value={props.value}
        defaultValue={props.defaultValue}
        disabled={props.disabled}
        id={props.id}
        name={props.name}
        render={(defaultProps: React.ComponentProps<"textarea">) => (
          <textarea
            className={cn(
              // Field's own props carry no slot; the app's may.
              slotClass("textarea", textareaProps),
              "field-sizing-content w-full outline-none disabled:cursor-not-allowed",
            )}
            data-slot="textarea"
            {...mergeProps(defaultProps, textareaProps)}
          />
        )}
      />
    </span>
  );
}

export { FieldPrimitive };


// ~/src/siteplane/components/textarea/textarea-internal.ts

import type * as React from "react";

import { Textarea, type TextareaProps } from "./textarea";

/*
 * Kit-internal Textarea. Not public API: the textarea index does not export
 * this module, and its names and profiles may change in any release.
 * InputGroupTextarea renders its textarea with the input-group profile.
 */
export type TextareaProfile = "default" | "input-group";

export type KitTextareaProps = TextareaProps & {
  profile?: TextareaProfile;
  /**
   * In the input-group profile: the group keeps the end of the textarea clear
   * for an action over its corner (InputGroup `insetEnd`).
   */
  insetEnd?: boolean | undefined;
};

/** Textarea with the kit's composition profile; the same component. */
export const KitTextarea = Textarea as (
  props: KitTextareaProps,
) => React.ReactElement;


// ~/src/siteplane/components/textarea/textarea.css

@layer theme, base, components, siteplane, utilities;

@layer siteplane {
  .sp-textarea-control {
    --sp-semantic-color-background: var(--color-white);
    --sp-semantic-color-border: rgb(0 0 0 / 8%);
    --sp-semantic-color-destructive: var(--color-red-500);
    --sp-semantic-color-foreground: var(--color-neutral-800);
    --sp-semantic-color-input: rgb(0 0 0 / 10%);
    --sp-semantic-color-ring: var(--color-neutral-400);
    --input: rgb(0 0 0 / 10%);
    --ring: var(--color-neutral-400);
    --textarea-resize-handle-color: var(--input);
    --textarea-resize-handle-color-focus: var(--ring);
    --textarea-surface-subtle: rgb(0 0 0 / 4%);
  }

  .sp-base-textarea[data-profile="input-group"] {
    display: contents;
  }

  .sp-base-textarea[data-profile="input-group"]::before {
    display: none;
  }

  /* The resize grip is the kit base of every textarea (design-rework.css). */
  .sp-base-textarea[data-profile="input-group"] .sp-textarea {
    min-height: calc(var(--spacing) * 20.5);
    border-radius: 0;
    padding-block: calc(var(--spacing) * 2 - 1px);
  }

  @media (width < 40rem) {
    .sp-base-textarea[data-profile="input-group"] .sp-textarea {
      min-height: calc(var(--spacing) * 23.5);
    }
  }

  .sp-textarea-control:not([data-unstyled]):has(:disabled) {
    background-color: var(--textarea-surface-subtle);
  }

  textarea.sp-textarea:focus-visible {
    --textarea-resize-handle-color: var(--textarea-resize-handle-color-focus);
  }

  textarea.sp-textarea::-webkit-resizer {
    border: 0;
    background:
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 3px bottom 3px / 9px 9px no-repeat,
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 3px bottom 3px / 4.75px 4.75px no-repeat;
  }

  [data-radius="none"] textarea.sp-textarea::-webkit-resizer,
  [data-radius="sm"] textarea.sp-textarea::-webkit-resizer {
    background:
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 3px bottom 3px / 9px 9px no-repeat,
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 3px bottom 3px / 4.75px 4.75px no-repeat;
  }

  [data-radius="lg"] textarea.sp-textarea::-webkit-resizer {
    background:
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 5px bottom 5px / 9px 9px no-repeat,
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 5px bottom 5px / 4.75px 4.75px no-repeat;
  }

  [data-radius="xl"] textarea.sp-textarea::-webkit-resizer {
    background:
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 6px bottom 6px / 8.5px 8.5px no-repeat,
      linear-gradient(
          135deg,
          transparent calc(50% - 0.65px),
          var(--textarea-resize-handle-color) 0 calc(50% + 0.65px),
          transparent 0
        )
        right 6px bottom 6px / 4.75px 4.75px no-repeat;
  }

  .dark .sp-textarea-control,
  [data-theme="dark"] .sp-textarea-control {
    --sp-semantic-color-background: color-mix(
      in srgb,
      var(--color-neutral-950) 95%,
      var(--color-white)
    );
    --sp-semantic-color-border: rgb(255 255 255 / 6%);
    --sp-semantic-color-destructive: color-mix(
      in srgb,
      var(--color-red-500) 90%,
      var(--color-white)
    );
    --sp-semantic-color-foreground: var(--color-neutral-100);
    --sp-semantic-color-input: rgb(255 255 255 / 8%);
    --sp-semantic-color-ring: var(--color-neutral-500);
    --input: rgb(255 255 255 / 8%);
    --ring: var(--color-neutral-500);
    --textarea-surface-subtle: rgb(255 255 255 / 4%);
  }

  :is(.dark, [data-theme="dark"])
    .sp-textarea-control:not([data-unstyled]):has(:disabled) {
    background-color: color-mix(
      in oklab,
      var(--sp-semantic-color-input) 32%,
      transparent
    );
  }
}


// ~/src/siteplane/components/textarea/index.ts

export * from "./textarea";