// Exercise 1: DOM ref — autofocus an input on mount
//
// Implement `AutoFocusInput` so the text input receives focus automatically
// the moment it mounts, using useRef + useEffect (NOT the native `autoFocus`
// prop — the point is to practice the ref pattern).
//
// Also implement the pure helper `shouldAutoFocus`, which decides whether
// autofocus should happen at all based on a `disabled` flag passed in as a
// prop — autofocusing a disabled input is meaningless and should be skipped.
//
// TODO 1: create the ref with useRef<HTMLInputElement>(null)
// TODO 2: attach it via ref={...} on the <input>
// TODO 3: in a useEffect with an empty dependency array, call .focus() —
//         but only if shouldAutoFocus(props) says to
// TODO 4: implement shouldAutoFocus (pure, no React)

import { useEffect, useRef } from "react";

interface AutoFocusInputProps {
  disabled?: boolean;
  placeholder?: string;
}

// TODO 4: return false when disabled is true, true otherwise
function shouldAutoFocus(props: AutoFocusInputProps): boolean {
  return false; // TODO: return !props.disabled
}

function AutoFocusInput(props: AutoFocusInputProps) {
  // TODO 1
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // TODO 3: if (shouldAutoFocus(props)) inputRef.current?.focus();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    // TODO 2: add ref={inputRef} below
    <input placeholder={props.placeholder ?? "type here"} disabled={props.disabled} />
  );
}

export { AutoFocusInput, shouldAutoFocus };

// --- self-check: do not modify below this line ---
const checkEnabled = shouldAutoFocus({ disabled: false }) === true;
const checkDisabled = shouldAutoFocus({ disabled: true }) === false;
const checkDefault = shouldAutoFocus({}) === true;
console.log(checkEnabled && checkDisabled && checkDefault ? "PASS (pure logic)" : "FAIL (pure logic)");

// Verify visually: mount <AutoFocusInput /> in a page — the input should
// have a visible text cursor immediately, with no click needed. Mount
// <AutoFocusInput disabled /> — it should NOT receive focus.