import React, { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';
import { DismissibleAlert } from '../../../../components/ui/dismissible-alert';
import EditPractitionerProfile from './EditPractitionerProfile/EditPractitionerProfile.tsx';
import { useAuthServiceContext } from '../../../../services';
import { Practitioner } from 'fhir/r4';

const EditProfilePage: React.FC = () => {
    const { currentUser, practitionerRoles } = useAuthServiceContext();
    const [error, setError] = useState<string | null>(null);
    const [practitioner, setPractitioner] = useState<Practitioner | undefined>();

    useEffect(() => {
        if (currentUser?.fhir?.resourceType === 'Practitioner') {
            setPractitioner(currentUser.fhir as Practitioner);
        }
    }, [currentUser]);

    // A patient's live self-service edit lives at /dashboard/profile (FhirPatientDisplay). This older /profile/edit
    // route rendered the retired heavy FhirPatient form; redirect patients there so a bookmark can't land on it.
    // Practitioners still edit their own profile here.
    if (currentUser?.fhir?.resourceType === 'Patient') {
        return <Navigate to="/dashboard/profile" replace />;
    }

    return (
        <>
            {currentUser?.fhir?.resourceType === 'Practitioner' && practitioner && (
                <EditPractitionerProfile practitioner={practitioner as Practitioner} roles={practitionerRoles}/>
            )}

            {error && (
                <DismissibleAlert status="error" onDismiss={() => setError(null)}>
                    {error}
                </DismissibleAlert>
            )}
        </>
    );
};

export default EditProfilePage;