community-rule/app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx

"use client";

import { useState, useEffect, type HTMLInputTypeAttribute } from "react";
import TextInput from "../../../../components/controls/TextInput";
import TextArea from "../../../../components/controls/TextArea";
import type { HeaderLockupJustificationValue } from "../../../../components/type/HeaderLockup/HeaderLockup.types";
import { useTranslation } from "../../../../contexts/MessagesContext";
import { useCreateFlow } from "../../context/CreateFlowContext";
import { useCreateFlowContinueAttempt } from "../../context/CreateFlowContinueAttemptContext";
import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
import {
  CreateFlowStepShell,
  type CreateFlowContentTopBelowMd,
} from "../../components/CreateFlowStepShell";
import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
import { CREATE_FLOW_COMMUNITY_SAVE_FORM_ID } from "../../utils/createFlowPaths";
import { isValidCreateFlowSaveEmail } from "../../../../../lib/create/isValidCreateFlowSaveEmail";
import type { CreateFlowTextStateField } from "../../types";

type Props = {
  messageNamespace: string;
  stateField: CreateFlowTextStateField;
  maxLength: number;
  /** Figma Flow — Text (`20094:41243`): main column `items-center` + horizontal padding token. */
  mainAlign?: "start" | "center";
  inputType?: HTMLInputTypeAttribute;
  /** Multi-line control (community description). */
  multiline?: boolean;
  /** Native `required` (community name and save-progress email). */
  required?: boolean;
  showCharacterCount?: boolean;
  headerJustification?: HeaderLockupJustificationValue;
  /** Top spacing under top chrome (`CreateFlowStepShell` / `CreateFlowContentTopBelowMd`). */
  contentTopBelowMd?: CreateFlowContentTopBelowMd;
  autoFocus?: boolean;
  /** Optional city/region field under the description. */
  locationField?: boolean;
};

/**
 * Shared narrow-column + labelled field pattern for Create Community text frames.
 */
export function CreateFlowTextFieldScreen({
  messageNamespace,
  stateField,
  maxLength,
  mainAlign = "start",
  inputType = "text",
  multiline = false,
  required = false,
  showCharacterCount = true,
  headerJustification = "left",
  contentTopBelowMd = "space-1400",
  autoFocus = false,
  locationField = false,
}: Props) {
  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
  const { attempted } = useCreateFlowContinueAttempt();
  const mdUp = useCreateFlowMdUp();
  const t = useTranslation(messageNamespace);

  const readFromState = (field: CreateFlowTextStateField): string => {
    const raw = state[field];
    return typeof raw === "string" ? raw : "";
  };

  const [value, setValue] = useState(() => readFromState(stateField));
  const [locationValue, setLocationValue] = useState(() =>
    readFromState("communityLocation"),
  );

  useEffect(() => {
    const incoming = readFromState(stateField);
    if (incoming.length === 0) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect -- sync when context hydrates from server/local
    setValue((prev) => (prev === "" ? incoming : prev));
  }, [state, stateField]);

  useEffect(() => {
    if (!locationField) return;
    const incoming = readFromState("communityLocation");
    if (incoming.length === 0) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect -- sync when context hydrates from server/local
    setLocationValue((prev) => (prev === "" ? incoming : prev));
  }, [locationField, state]);

  const isEmail = inputType === "email";
  const persistValue = (next: string) => {
    setValue(next);
    markCreateFlowInteraction();
    updateState({ [stateField]: next } as Record<string, string>);
  };
  const persistLocation = (next: string) => {
    setLocationValue(next);
    markCreateFlowInteraction();
    updateState({ communityLocation: next });
  };

  const nameError =
    required &&
    !isEmail &&
    !multiline &&
    attempted &&
    value.trim().length === 0;
  const emailError =
    isEmail &&
    attempted &&
    !isValidCreateFlowSaveEmail(value);
  const showFieldError = nameError || emailError;
  const errorCopy = nameError
    ? t("errorMessage")
    : emailError
      ? t("errorMessage")
      : "";

  const characterCount = value.length;
  const hint = showFieldError
    ? errorCopy
    : isEmail
      ? t("skipHint")
      : showCharacterCount === false
        ? false
        : t("characterCountTemplate")
            .replace("{current}", String(characterCount))
            .replace("{max}", String(maxLength));

  const mainItems =
    mainAlign === "center" ? "items-center" : "items-start";

  const fieldLabel = t("inputLabel");

  return (
    <CreateFlowStepShell
      variant="centeredNarrow"
      contentTopBelowMd={contentTopBelowMd}
    >
      <div
        className={`flex flex-col gap-[18px] ${mainItems} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
      >
        <div className="w-full">
          <CreateFlowHeaderLockup
            title={t("title")}
            description={t("description")}
            justification={headerJustification}
          />
        </div>
        <div className="flex w-full flex-col gap-[var(--space-800)]">
          {multiline ? (
            <TextArea
              className="!transition-none"
              label={fieldLabel}
              placeholder={t("placeholder")}
              value={value}
              onChange={(e) => persistValue(e.target.value)}
              onBlur={() => {
                const trimmed = value.trim();
                if (trimmed !== value) persistValue(trimmed);
              }}
              size={mdUp ? "medium" : "small"}
              formHeader={false}
              showHelpIcon={false}
              textHint={hint}
              maxLength={maxLength}
              required={required}
              autoFocus={autoFocus}
              rows={4}
            />
          ) : (
            <TextInput
              className="!transition-none"
              type={inputType}
              name={isEmail ? "email" : undefined}
              label={fieldLabel}
              placeholder={t("placeholder")}
              value={value}
              onChange={(e) => persistValue(e.target.value)}
              onBlur={() => {
                const trimmed = isEmail
                  ? value.trim().toLowerCase()
                  : value.trim();
                if (trimmed !== value) persistValue(trimmed);
              }}
              onKeyDown={
                isEmail
                  ? (e) => {
                      if (e.key !== "Enter") return;
                      e.preventDefault();
                      e.currentTarget.form?.requestSubmit();
                    }
                  : undefined
              }
              inputSize={mdUp ? "medium" : "small"}
              formHeader={false}
              showHelpIcon={false}
              textHint={hint}
              error={showFieldError}
              maxLength={maxLength}
              required={required || isEmail}
              autoComplete={isEmail ? "email" : undefined}
              inputMode={isEmail ? "email" : undefined}
              form={isEmail ? CREATE_FLOW_COMMUNITY_SAVE_FORM_ID : undefined}
              autoFocus={autoFocus}
            />
          )}
          {locationField ? (
            <TextInput
              className="!transition-none"
              type="text"
              label={t("locationLabel")}
              placeholder={t("locationPlaceholder")}
              value={locationValue}
              onChange={(e) => persistLocation(e.target.value)}
              onBlur={() => {
                const trimmed = locationValue.trim();
                if (trimmed !== locationValue) persistLocation(trimmed);
              }}
              inputSize={mdUp ? "medium" : "small"}
              formHeader
              showHelpIcon={false}
              textHint={t("locationHint")}
            />
          ) : null}
        </div>
      </div>
    </CreateFlowStepShell>
  );
}