import { useState } from "react";
import type { Address, OrderDetail } from "@orderops/shared";

interface ShippingAddressFormProps {
  order: OrderDetail;
  onSave: (address: Address) => Promise<void>;
}

const addressFields: Array<{ key: keyof Address; label: string }> = [
  { key: "fullName", label: "Full name" },
  { key: "line1", label: "Line 1" },
  { key: "line2", label: "Line 2" },
  { key: "city", label: "City" },
  { key: "state", label: "State" },
  { key: "postalCode", label: "Postal code" },
  { key: "country", label: "Country" }
];

export function ShippingAddressForm({ order, onSave }: ShippingAddressFormProps) {
  const [form, setForm] = useState(order.shippingAddress);

  return (
    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h3 className="mb-3 text-sm font-semibold text-slate-700">Shipping address</h3>
      <form
        className="grid gap-3 md:grid-cols-2"
        onSubmit={async (event) => {
          event.preventDefault();
          await onSave(form);
        }}
      >
        {addressFields.map(({ key, label }) => (
          <label key={key} className="block text-sm text-slate-700">
            <span className="mb-1 block">{label}</span>
            <input
              className="w-full rounded-lg border border-slate-300 px-3 py-2"
              value={form[key] ?? ""}
              onChange={(event) =>
                setForm((current) => ({
                  ...current,
                  [key]: event.target.value || (key === "line2" ? null : event.target.value)
                }))
              }
            />
          </label>
        ))}
        <div className="md:col-span-2">
          <button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
            Save address
          </button>
        </div>
      </form>
    </section>
  );
}