import {
  MAX_CONTAINERS,
  MIN_CONTAINERS,
  type CheckinDraft,
  type CheckinDraftAction,
} from "./types";

const stepperBtnClass =
  "flex h-12 w-12 items-center justify-center rounded-lg border border-slate-300 " +
  "text-2xl leading-none text-slate-700 disabled:opacity-40 " +
  "focus:outline-none focus:ring-2 focus:ring-slate-900/20";

/**
 * Step 2 — how much they're bringing. A big-touch-target stepper for the
 * container count (capped 1–20, D6) plus an optional short description that
 * drives label printing at the POS step.
 */
export function StepContainers({
  draft,
  dispatch,
}: {
  draft: CheckinDraft;
  dispatch: React.Dispatch<CheckinDraftAction>;
}) {
  return (
    <div className="space-y-6">
      <div>
        <label
          htmlFor="ci-count"
          className="text-sm font-medium text-slate-700"
        >
          Number of containers
        </label>
        <p className="text-xs text-slate-500">
          Bins, bags, or boxes you&apos;re bringing in.
        </p>
        <div className="mt-2 flex items-center gap-4">
          <button
            type="button"
            aria-label="Decrease containers"
            className={stepperBtnClass}
            disabled={draft.container_count <= MIN_CONTAINERS}
            onClick={() => dispatch({ type: "decrementContainers" })}
          >
            −
          </button>
          <input
            id="ci-count"
            type="number"
            readOnly
            aria-label="Number of containers"
            className="w-16 rounded-lg border border-slate-300 py-3 text-center text-xl font-semibold"
            value={draft.container_count}
            min={MIN_CONTAINERS}
            max={MAX_CONTAINERS}
          />
          <button
            type="button"
            aria-label="Increase containers"
            className={stepperBtnClass}
            disabled={draft.container_count >= MAX_CONTAINERS}
            onClick={() => dispatch({ type: "incrementContainers" })}
          >
            +
          </button>
        </div>
      </div>
      <div>
        <label
          htmlFor="ci-desc"
          className="text-sm font-medium text-slate-700"
        >
          Describe what you&apos;re bringing
          <span className="font-normal text-slate-400"> (optional)</span>
        </label>
        <textarea
          id="ci-desc"
          rows={3}
          maxLength={255}
          placeholder="e.g. two totes of records + a box of CDs"
          className="mt-1 block w-full rounded-lg border border-slate-300 px-4 py-3 text-base focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900/20"
          value={draft.container_description}
          onChange={(e) =>
            dispatch({
              type: "set",
              field: "container_description",
              value: e.target.value,
            })
          }
        />
      </div>
    </div>
  );
}