"use client";
import { useModuleClient } from "@86d-app/core/client";
import { useState } from "react";
import { useCustomerApi } from "./_hooks";
import AccountProfileTemplate from "./account-profile.mdx";
export function AccountProfile() {
    const api = useCustomerApi();
    const { data, isLoading, isError, refetch } = api.getMe.useQuery();
    const client = useModuleClient();
    const [editing, setEditing] = useState(false);
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [phone, setPhone] = useState("");
    const [saving, setSaving] = useState(false);
    const [message, setMessage] = useState("");
    const customer = data?.customer;
    function startEdit() {
        if (!customer)
            return;
        setFirstName(customer.firstName);
        setLastName(customer.lastName);
        setPhone(customer.phone ?? "");
        setEditing(true);
        setMessage("");
    }
    async function handleSave() {
        setSaving(true);
        setMessage("");
        try {
            await client.module("customers").store["/customers/me/update"].mutate({
                firstName: firstName.trim(),
                lastName: lastName.trim(),
                phone: phone.trim() || null,
            });
            setEditing(false);
            setMessage("Profile updated");
            refetch();
        }
        catch {
            setMessage("Failed to update profile");
        }
        finally {
            setSaving(false);
        }
    }
    return (<AccountProfileTemplate customer={customer} isLoading={isLoading} isError={isError} onRetry={() => refetch()} editing={editing} firstName={firstName} lastName={lastName} phone={phone} saving={saving} message={message} onEdit={startEdit} onCancel={() => setEditing(false)} onSave={handleSave} onFirstNameChange={setFirstName} onLastNameChange={setLastName} onPhoneChange={setPhone}/>);
}