import { splitProps, mergeProps, JSX } from 'solid-js';
import clsx from 'clsx';

export type InputType = 'text' | 'password' | 'search';
export type InputSize = 'sm' | 'md' | 'lg';
export type SemanticColor = 'success' | 'error' | 'warning' | 'info';

export interface TextInputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  inputType?: InputType;
  size?: InputSize;
  color?: SemanticColor;
  accent?: string;
  error?: boolean;
}

/**
 * TextInput -- angular input field with focus glow, scanline effect, and bottom edge indicator.
 *
 * Uses a wrapper div for pseudo-element border technique (inputs cannot have ::before/::after).
 * Focus shows: bottom edge glow, scanline bars with vignette fade.
 */
export function TextInput(rawProps: TextInputProps) {
  const merged = mergeProps(
    { inputType: 'text' as InputType, size: 'md' as InputSize },
    rawProps,
  );
  const [local, rest] = splitProps(merged, [
    'inputType', 'size', 'color', 'accent', 'error', 'class',
  ]);

  const wrapperClasses = () =>
    clsx(
      'hh-input-wrapper',
      `hh-size-${local.size}`,
      local.color && `hh-color-${local.color}`,
      local.error && 'hh-input-wrapper--error',
      local.class,
    );

  const accentStyle = (): JSX.CSSProperties | undefined => {
    if (local.accent) {
      return { '--hh-comp-accent': local.accent } as JSX.CSSProperties;
    }
    return undefined;
  };

  return (
    <div class={wrapperClasses()} style={accentStyle()}>
      <input
        type={local.inputType}
        class="hh-input"
        aria-invalid={local.error ? 'true' : undefined}
        {...rest}
      />
      <div class="hh-input__bottom-glow" />
    </div>
  );
}