hounam-submit-form-frontend/ui/forms/relation/InnerRelationForm.tsx

"use client";

import React from "react";
import {
  Box,
  Paper,
  TextField,
  Typography,
  Alert,
  AlertTitle,
  Divider,
  Button,
} from "@mui/material";
import { FieldArray, Form, getIn, type FormikProps } from "formik";
import type { RelationFormProps, RelationFormValues } from "./types";

type Props = FormikProps<RelationFormValues> & RelationFormProps;

export default function InnerRelationForm(props: Props) {
  const {
    values,
    errors,
    touched,
    handleChange,
    setFieldValue,
    isSubmitting,
  } = props;

  const handleBack = () => {
    props.update({ relations: values.relations });
    props.setStep(props.step - 1);
  };

  return (
    <Form>
      <Paper
        elevation={0}
        sx={{
          p: { xs: 2, md: 3 },
          borderRadius: "24px",
          border: "1px solid #e2e8f0",
          backgroundColor: "#fff",
        }}
      >
        <Alert severity="warning" sx={{ mb: 3, borderRadius: "12px" }}>
          <AlertTitle sx={{ fontWeight: 800 }}>توجه</AlertTitle>
          مشخصات دو نفر از آشنایان را وارد کنید و از درج بستگان درجه یک (پدر،
          مادر، همسر، برادر و خواهر) خودداری نمایید.
        </Alert>

        <FieldArray name="relations">
          {() => (
            <Box>
              {values.relations.map((item, index) => {
                const itemErrors = getIn(errors, `relations.${index}`) || {};
                const itemTouched = getIn(touched, `relations.${index}`) || {};

                return (
                  <Box key={item.id || index} sx={{ mb: index === 0 ? 4 : 0 }}>
                    <Typography
                      variant="subtitle1"
                      sx={{ fontWeight: 800, mb: 2, color: "#1e293b" }}
                    >
                      آشنای {index === 0 ? "اول" : "دوم"}
                    </Typography>

                    <Box
                      sx={{
                        display: "grid",
                        gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
                        gap: 2.5,
                      }}
                    >
                      <TextField
                        label="نام*"
                        name={`relations.${index}.firstName`}
                        value={item.firstName}
                        onChange={handleChange}
                        fullWidth
                        error={!!itemTouched.firstName && !!itemErrors.firstName}
                        helperText={itemTouched.firstName ? itemErrors.firstName : ""}
                      />

                      <TextField
                        label="نام خانوادگی*"
                        name={`relations.${index}.lastName`}
                        value={item.lastName}
                        onChange={handleChange}
                        fullWidth
                        error={!!itemTouched.lastName && !!itemErrors.lastName}
                        helperText={itemTouched.lastName ? itemErrors.lastName : ""}
                      />

                      <TextField
                        label="نسبت*"
                        name={`relations.${index}.relationship`}
                        value={item.relationship}
                        onChange={handleChange}
                        fullWidth
                        placeholder="مثلاً: همکار، دوست"
                        error={!!itemTouched.relationship && !!itemErrors.relationship}
                        helperText={
                          itemTouched.relationship ? itemErrors.relationship : ""
                        }
                      />

                      <TextField
                        label="تلفن تماس*"
                        name={`relations.${index}.phoneNumber`}
                        value={item.phoneNumber}
                        onChange={(e) => {
                          const val = e.target.value.replace(/[^\d]/g, "");
                          setFieldValue(`relations.${index}.phoneNumber`, val);
                        }}
                        fullWidth
                        inputMode="tel"
                        error={!!itemTouched.phoneNumber && !!itemErrors.phoneNumber}
                        helperText={
                          itemTouched.phoneNumber ? itemErrors.phoneNumber : ""
                        }
                      />

                      <TextField
                        label="شغل*"
                        name={`relations.${index}.jobTitle`}
                        value={item.jobTitle}
                        onChange={handleChange}
                        fullWidth
                        error={!!itemTouched.jobTitle && !!itemErrors.jobErrors}
                        helperText={itemTouched.jobTitle ? itemErrors.jobTitle : ""}
                      />

                      <TextField
                        label="نام محل کار*"
                        name={`relations.${index}.workplaceName`}
                        value={item.workplaceName}
                        onChange={handleChange}
                        fullWidth
                        error={
                          !!itemTouched.workplaceName && !!itemErrors.workplaceName
                        }
                        helperText={
                          itemTouched.workplaceName ? itemErrors.workplaceName : ""
                        }
                      />
                    </Box>

                    {index === 0 && <Divider sx={{ mt: 4 }} />}
                  </Box>
                );
              })}
            </Box>
          )}
        </FieldArray>

        {/* دکمه‌های ناوبری */}
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            mt: 4,
          }}
        >
          <Button
            disabled={props.step === 1 || isSubmitting}
            onClick={handleBack}
            sx={{ borderRadius: "12px", color: "#64748b", fontWeight: 700 }}
          >
            بازگشت
          </Button>

          <Button
            variant="contained"
            type="submit"
            disabled={isSubmitting}
            sx={{
              borderRadius: "12px",
              px: 4,
              py: 1.5,
              bgcolor: props.step === 12 ? "green" : "#2563eb",
              fontWeight: 700,
            }}
          >
            {props.step === 12 ? "اتمام و ثبت نهایی" : "گام بعدی"}
          </Button>
        </Box>
      </Paper>
    </Form>
  );
}