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 { 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 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;
};

/**
 * 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",
}: Props) {
  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
  const mdUp = useCreateFlowMdUp();
  const t = useTranslation(messageNamespace);

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

  const [value, setValue] = useState(() => readFromState());

  useEffect(() => {
    const incoming = readFromState();
    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]);

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

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

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

  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="w-full">
          {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}
              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}
              maxLength={maxLength}
              required={required || isEmail}
              autoComplete={isEmail ? "email" : undefined}
              inputMode={isEmail ? "email" : undefined}
              form={isEmail ? CREATE_FLOW_COMMUNITY_SAVE_FORM_ID : undefined}
            />
          )}
        </div>
      </div>
    </CreateFlowStepShell>
  );
}