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 { resolveAyanamsa } from "@/lib/ayanamsa";
import type { ChartRelationship, 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;
  readonly relationship?: Exclude<ChartRelationship, "self">;
  readonly onRelationshipChange?: (value: Exclude<ChartRelationship, "self">) => void;
  readonly onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  readonly onCancel?: () => void;
  readonly cancelLabel?: string;
  readonly submitLabel: string;
  readonly submitDisabled: boolean;
  readonly notice?: string;
};

export function ChartProfileForm({
  title,
  description,
  value,
  onChange,
  nameInputId,
  showAyanamsa = false,
  relationship,
  onRelationshipChange,
  onSubmit,
  onCancel,
  cancelLabel = "取消",
  submitLabel,
  submitDisabled,
  notice,
}: ChartProfileFormProps) {
  return (
    <form className="profile-form chart-library-form" onSubmit={onSubmit}>
      <div className="section-heading"><b>{title}</b><small>{description}</small></div>
      {relationship !== undefined && onRelationshipChange ? (
        <label>
          <span>关系</span>
          <select value={relationship} onChange={(event) => onRelationshipChange(event.target.value as Exclude<ChartRelationship, "self">)}>
            <option value="partner">伴侣</option>
            <option value="family">家人</option>
            <option value="friend">朋友</option>
            <option value="client">客户</option>
            <option value="other">其他</option>
          </select>
        </label>
      ) : null}
      <ProfileFields value={value} onChange={onChange} nameInputId={nameInputId} />
      {showAyanamsa ? (
        <AyanamsaPreferenceField
          value={resolveAyanamsa(value)}
          onChange={(ayanamsa) => onChange((current) => ({ ...current, ayanamsa }))}
        />
      ) : null}
      {notice ? <p className="form-success" 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>
  );
}