Jyotisha/frontend/src/components/chart-profile-form.tsx

"use client";

import type { Dispatch, FormEvent, ReactNode, SetStateAction } from "react";
import { AyanamsaPreferenceField } from "@/components/ayanamsa-preference-field";
import { ProfileFields } from "@/components/profile-fields";
import { PersonRelationField } from "@/components/person-relation-field";
import { ProfileGenderField } from "@/components/profile-gender-field";
import { resolveAyanamsa } from "@/lib/ayanamsa";
import type { Profile } from "@/lib/home-types";

export type ChartProfileFormProps = {
  readonly title: string;
  readonly description: string;
  readonly value: Profile;
  readonly onChange: Dispatch<SetStateAction<Profile>>;
  readonly nameInputId: string;
  readonly showAyanamsa?: boolean;
  /** Optional gender (女 / 男 / 不填); saved with the form. */
  readonly showGender?: boolean;
  /** Household link. Only for someone else; self does not store relation. */
  readonly showRelation?: boolean;
  readonly onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  readonly onCancel?: () => void;
  readonly cancelLabel?: string;
  readonly submitLabel: string;
  readonly submitDisabled: boolean;
  /** Chart-page editor: the saved birth time of someone else cannot be changed. */
  readonly lockReportedBirthTime?: boolean;
  readonly notice?: ReactNode;
};

export function ChartProfileForm({
  title,
  description,
  value,
  onChange,
  nameInputId,
  showAyanamsa = false,
  showGender = false,
  showRelation = false,
  onSubmit,
  onCancel,
  cancelLabel = "取消",
  submitLabel,
  submitDisabled,
  lockReportedBirthTime = false,
  notice,
}: ChartProfileFormProps) {
  return (
    <form className="profile-form chart-library-form" onSubmit={onSubmit}>
      <div className="section-heading"><b>{title}</b><small>{description}</small></div>
      <ProfileFields
        value={value}
        onChange={onChange}
        nameInputId={nameInputId}
        lockReportedBirthTime={lockReportedBirthTime}
      />
      {showRelation ? (
        <PersonRelationField
          idPrefix={nameInputId}
          value={value.relation}
          onChange={(relation) => onChange((current) => ({ ...current, relation }))}
        />
      ) : null}
      {showGender ? (
        <ProfileGenderField
          idPrefix={nameInputId}
          value={value.gender}
          onChange={(gender) => onChange((current) => ({ ...current, gender }))}
        />
      ) : null}
      {showAyanamsa ? (
        <AyanamsaPreferenceField
          value={resolveAyanamsa(value)}
          onChange={(ayanamsa) => onChange((current) => ({ ...current, ayanamsa }))}
        />
      ) : null}
      {notice ? <p className="chart-birth-edit-notice" role="status">{notice}</p> : null}
      <div className="dialog-actions">
        {onCancel ? <button className="button-secondary" type="button" onClick={onCancel}>{cancelLabel}</button> : null}
        <button className="button-primary save-profile" type="submit" disabled={submitDisabled}>{submitLabel}</button>
      </div>
    </form>
  );
}