import type { Branch, Student } from "../types";
import { Dialog, Errors, Field, SaveForm } from "./ui";

export default function StudentEditor({
    student,
    branches = [],
    onClose,
}: {
    student?: Student;
    branches?: Branch[];
    onClose: () => void;
}) {
    return (
        <Dialog
            title={student ? "Edit student details" : "Add student record"}
            onClose={onClose}
        >
            <Errors />
            <SaveForm
                url={student ? `/students/${student.id}` : "/students"}
                method={student ? "put" : "post"}
                label={student ? "Save student details" : "Create student"}
                onSuccess={onClose}
            >
                <div className="form-grid">
                    <Field label="First name">
                        <input
                            name="first_name"
                            required
                            maxLength={160}
                            defaultValue={student?.first_name}
                        />
                    </Field>
                    <Field label="Middle name (optional)">
                        <input
                            name="middle_name"
                            maxLength={160}
                            defaultValue={student?.middle_name ?? ""}
                        />
                    </Field>
                    <Field label="Last name">
                        <input
                            name="last_name"
                            required
                            maxLength={160}
                            defaultValue={student?.last_name}
                        />
                    </Field>
                    <Field label="Suffix (optional)">
                        <input
                            name="suffix"
                            maxLength={30}
                            placeholder="e.g. Jr."
                            defaultValue={student?.suffix ?? ""}
                        />
                    </Field>
                    {!student && (
                        <>
                            <Field label="Student number">
                                <input
                                    name="student_number"
                                    required
                                    maxLength={50}
                                />
                            </Field>
                            <Field label="Home branch">
                                <select name="home_branch_id" required>
                                    <option value="">Choose branch</option>
                                    {branches.map((b) => (
                                        <option key={b.id} value={b.id}>
                                            {b.name}
                                        </option>
                                    ))}
                                </select>
                            </Field>
                        </>
                    )}
                    <Field label="Birth date (optional)">
                        <input
                            name="birth_date"
                            type="date"
                            defaultValue={student?.birth_date?.slice(0, 10)}
                        />
                    </Field>
                    <Field label="Email (optional)">
                        <input
                            name="email"
                            type="email"
                            maxLength={254}
                            defaultValue={student?.email ?? ""}
                        />
                    </Field>
                    <Field label="Phone (optional)">
                        <input
                            name="phone"
                            type="tel"
                            maxLength={50}
                            defaultValue={student?.phone ?? ""}
                        />
                    </Field>
                    <Field label="Address (optional)">
                        <textarea
                            name="address"
                            rows={3}
                            maxLength={2000}
                            defaultValue={student?.address ?? ""}
                        />
                    </Field>
                    <Field label="Parent or guardian (optional)">
                        <input
                            name="guardian_name"
                            maxLength={160}
                            defaultValue={student?.guardian_name ?? ""}
                        />
                    </Field>
                    <Field label="Parent or guardian phone (optional)">
                        <input
                            name="guardian_phone"
                            type="tel"
                            maxLength={50}
                            defaultValue={student?.guardian_phone ?? ""}
                        />
                    </Field>
                </div>
            </SaveForm>
        </Dialog>
    );
}