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

"use client";

import type { Dispatch, FormEvent, SetStateAction } from "react";
import { AyanamsaPreferenceField } from "@/components/ayanamsa-preference-field";
import { ProfileFields } from "@/components/profile-fields";
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;
  readonly onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  readonly onCancel?: () => void;
  readonly cancelLabel?: string;
  readonly submitLabel: string;
  readonly submitDisabled: boolean;
};

export function ChartProfileForm({
  title,
  description,
  value,
  onChange,
  nameInputId,
  showAyanamsa = false,
  showGender = false,
  onSubmit,
  onCancel,
  cancelLabel = "取消",
  submitLabel,
  submitDisabled,
}: 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} />
      {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}
      <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>
  );
}