import React from 'react';
import { Card, CardHeader, CardBody } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { useFormContext, Controller } from 'react-hook-form';
import StaffRoleAssignmentFields from '../StaffRoleAssignment/StaffRoleAssignmentFields.tsx';
// - WordPress's ToggleControl, swapped for the ui/* adapter. Same props, same JSX;
// only `__nextHasNoMarginBottom` is dropped, which means nothing outside WordPress.
import { ToggleControl } from '../ui/toggle-control';

interface FhirPractitionerRoleProps {
    elevated?: boolean;
    disabled?: boolean;
    isNew: boolean;
    // Threaded through to StaffRoleAssignmentFields - see its own doc comment. Only PractitionerRolePage's
    // edit path supplies this; every other caller (the create form, PractitionerRoleModal) leaves it
    // undefined and keeps the plain "Remove both" confirm.
    evaluateCoupledRoleRemoval?: (code: string) => { blocked: boolean; reason?: string };
}

// The role form owns role identity/authorization only: organization roles, primary role, leadership,
// training level, clinical specialty, and Active. Availability + location now live on the schedule block
// (Manage Schedule), and contact lives on the profile - they were removed from here to end the
// redundancy/conflict of editing the same PractitionerRole fields in two places. The underlying
// availableTime/location/telecom/period still round-trip through the loadsave transforms untouched.
export const FhirPractitionerRole: React.FC<FhirPractitionerRoleProps> = ({
    elevated = true, disabled = false, evaluateCoupledRoleRemoval,
}) => {
    const { control } = useFormContext();

    const spacerMargin = '24px';

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Staff Role Details</Heading>
            </CardHeader>
            <CardBody>
                <Spacer margin={spacerMargin}/>

                <StaffRoleAssignmentFields disabled={disabled} evaluateCoupledRoleRemoval={evaluateCoupledRoleRemoval} />

                <Spacer margin={spacerMargin}/>

                {/* active */}
                <Controller key="active"
                            name="active"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <ToggleControl
                                               label="Active"
                                               checked={field.value}
                                               onChange={field.onChange}/>
                            )}/>
            </CardBody>
        </Card>
    );
};

export default FhirPractitionerRole;