import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { Disabled } from '../ui/disabled';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirDosage,
    FhirDuration,
    FhirPeriod,
    FhirQuantity,
    FhirReference,
    FhirReferenceCollection,
    FhirValueSetSearch
} from '../../components';
import {
    useFhirCarePlans,
    useFhirCareTeams,
    useFhirConditions,
    useFhirDetectedIssues,
    useFhirDevices,
    useFhirEncounters,
    useFhirImmunizationRecommendations,
    useFhirMedicationRequestBroadcast,
    useFhirMedicationRequests,
    useFhirObservations,
    useFhirPractitioners,
    useFhirRelatedPersons
} from '../../hooks';
import { FhirResource, Reference } from 'fhir/r4';
import { prescriberOptions } from '../../utils/prescribers';
import { useSeatStanding } from '../../utils/seatStanding';
// - 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 FhirMedicationRequestProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

export const FhirMedicationRequest: React.FC<FhirMedicationRequestProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control, watch } = useFormContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);

    // value sets
    const [medicationrequestStatus, setMedicationrequestStatus] = useState<IValueSet[]>([]);
    const [medicationrequestStatusReason, setMedicationrequestStatusReason] = useState<IValueSet[]>([]);
    const [medicationrequestIntent, setMedicationrequestIntent] = useState<IValueSet[]>([]);
    const [medicationrequestCategory, setMedicationrequestCategory] = useState<IValueSet[]>([]);
    const [requestPriority, setRequestPriority] = useState<IValueSet[]>([]);
    const [medicationrequestCourseOfTherapy, setMedicationrequestCourseOfTherapy] = useState<IValueSet[]>([]);
    const [actSubstanceAdminSubstitutionCode, setActSubstanceAdminSubstitutionCode] = useState<IValueSet[]>([]);
    const [substanceAdminSubstitutionReason, setSubstanceAdminSubstitutionReason] = useState<IValueSet[]>([]);

    const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
    const spacerMargin = '24px';

    useFhirMedicationRequestBroadcast();
    const { medicationRequestsList } = useFhirMedicationRequests();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { carePlansList } = useFhirCarePlans();
    const { immunizationRecommendationsList } = useFhirImmunizationRecommendations();
    const { careTeamsList } = useFhirCareTeams();
    const { devicesList } = useFhirDevices();
    const { relatedPersonsList } = useFhirRelatedPersons();
    const { detectedIssuesList } = useFhirDetectedIssues();
    const { encountersList } = useFhirEncounters();
    const { practitionersList } = useFhirPractitioners();

    const medicationType = watch('medicationType');
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const basedOnFieldArray = useFieldArray({ control, name: 'basedOn' });
    const performerFieldArray = useFieldArray({ control, name: 'performer' });
    const requesterFieldArray = useFieldArray({ control, name: 'requester' });

    // WHO MAY BE NAMED AS HAVING ORDERED THIS. Watched rather than read once, because whoever is
    // already on the record has to stay in the list - see utils/prescribers for why a name that
    // vanishes from a signed order is the worse failure.
    const requesterValue = watch('requester');
    const namedRequesters = ((requesterValue ?? []) as { reference?: Reference }[])
        .map((entry) => entry?.reference);
    const seatStanding = useSeatStanding();
    const prescribers = prescriberOptions(practitionersList, namedRequesters, seatStanding);

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    medicationrequestStatusValueSet,
                    medicationrequestStatusReasonValueSet,
                    medicationrequestIntentValueSet,
                    medicationrequestCategoryValueSet,
                    requestPriorityValueSet,
                    medicationrequestCourseOfTherapyValueSet,
                    actSubstanceAdminSubstitutionCodeValueSet,
                    substanceAdminSubstitutionReasonValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.medicationrequestStatus),
                    fetchValueSet(valueSetUrls.medicationrequestStatusReason),
                    fetchValueSet(valueSetUrls.medicationrequestIntent),
                    fetchValueSet(valueSetUrls.medicationrequestCategory),
                    fetchValueSet(valueSetUrls.requestPriority),
                    fetchValueSet(valueSetUrls.medicationrequestCourseOfTherapy),
                    fetchValueSet(valueSetUrls.actSubstanceAdminSubstitutionCode),
                    fetchValueSet(valueSetUrls.substanceAdminSubstitutionReason)
                ]);

                setMedicationrequestStatus(medicationrequestStatusValueSet);
                setMedicationrequestStatusReason(medicationrequestStatusReasonValueSet);
                setMedicationrequestIntent(medicationrequestIntentValueSet);
                setMedicationrequestCategory(medicationrequestCategoryValueSet);
                setRequestPriority(requestPriorityValueSet);
                setMedicationrequestCourseOfTherapy(medicationrequestCourseOfTherapyValueSet);
                setActSubstanceAdminSubstitutionCode(actSubstanceAdminSubstitutionCodeValueSet);
                setSubstanceAdminSubstitutionReason(substanceAdminSubstitutionReasonValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

        loadValueSets();
    }, [fetchValueSet, valueSetUrls]);

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

                    {/* medicationCodeableConcept */}
                    <FhirValueSetSearch label="Medication to be taken"
                                        context="medicationCodeableConcept"
                                        valueSetUrl={valueSetUrls.medicationCodes}
                                        placeholder="Search for medications..."
                                        multiple={false}
                                        required={true}
                                        disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {medicationType === 'codeableConcept' && (
                        <>

                        </>
                    )}

                    {medicationType === 'reference' && (
                        <>
                            {/* medicationReference */}
                        </>
                    )}

                    {/* priorPrescription */}
                    <FhirReference label="An order/prescription that is being replaced"
                                   context="priorPrescription"
                                   referenceType="MedicationRequest"
                                   referenceList={medicationRequestsList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={medicationrequestStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* statusReason */}
                    <FhirCodeableConcept label="Reason for current status"
                                         context="statusReason"
                                         options={medicationrequestStatusReason}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* intent */}
                    <FhirCode label="Intent"
                              context="intent"
                              options={medicationrequestIntent}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* category */}
                    <FhirCodeableConcept label="Type of medication usage"
                                         context="category"
                                         options={medicationrequestCategory}
                                         disabled={disabled}
                                         loading={loading}
                                         multiple={true}
                                         required={false}/>

                    <Spacer margin={spacerMargin}/>

                    {/* priority */}
                    <FhirCode label="Priority"
                              context="priority"
                              options={requestPriority}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* courseOfTherapyType */}
                    <FhirCodeableConcept label="Overall pattern of medication administration"
                                         context="courseOfTherapyType"
                                         options={medicationrequestCourseOfTherapy}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* authoredOn */}
                    <Controller key="authoredOn"
                                name="authoredOn"
                                control={control}
                                rules={{ required: true }}
                                disabled={disabled}
                                render={({ field, fieldState }) => (
                                    <>
                                        <InputControl
                                                      {...field}
                                                      label="When request was initially authored *"
                                                      type="datetime-local"/>

                                        {fieldState.error && (
                                            <DismissibleAlert status="error">
                                                Authored on date is required
                                            </DismissibleAlert>
                                        )}
                                    </>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* requester */}
                    <FhirReferenceCollection label="Who/What requested the Request"
                                             references={requesterFieldArray}
                                             context="requester"
                                             referenceTypes={[
                                                 { name: 'Practitioner', key: 'Practitioner' },
                                                 { name: 'Patient', key: 'Patient' },
                                                 { name: 'RelatedPerson', key: 'RelatedPerson' },
                                                 { name: 'Device', key: 'Device' }
                                             ]}
                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                 switch (referenceType) {
                                                     case 'Practitioner':
                                                         return prescribers;
                                                     case 'RelatedPerson':
                                                         return relatedPersonsList;
                                                     case 'Device':
                                                         return devicesList;
                                                     default:
                                                         return [];
                                                 }
                                             }}
                                             required={true}
                                             disabled={disabled}
                                             readonly={isPatient}
                                             multiple={false}
                                             enableInlineActions={enableInlineActions}/>

                    {/* A NARROWED LIST CAN BE AN EMPTY ONE, and an empty required picker with no
                        explanation is a dead end - the reader sees a blank dropdown and no way to
                        learn that the practice simply has nobody who may prescribe. Said here rather
                        than inside the picker because the reason is specific to this question. */}
                    {!isPatient && prescribers.length === 0 && (
                        <DismissibleAlert status="warning">
                            Nobody at this practice currently holds a clinician seat, so there is no one to
                            record as having ordered this. Give a practitioner a clinician seat on their
                            Workspaces tab first.
                        </DismissibleAlert>
                    )}

                    <Spacer margin={spacerMargin}/>

                    {/* doNotPerform */}
                    <Controller key="doNotPerform"
                                name="doNotPerform"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <ToggleControl 
                                                   label="Do Not Perform"
                                                   checked={field.value}
                                                   onChange={field.onChange}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* reported */}
                    <Controller key="reportedBoolean"
                                name="reportedBoolean"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <ToggleControl 
                                                   label="Reported (Not Recorded Directly)"
                                                   checked={field.value}
                                                   onChange={field.onChange}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* detectedIssue */}
                    <FhirReference label="Clinical issue with action"
                                   context="detectedIssue"
                                   referenceType="DetectedIssue"
                                   referenceList={detectedIssuesList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* encounter */}
                    <FhirReference label="Encounter created as part of encounter/admission/stay"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="reason"
                          tabs={[
                              { name: 'reason', title: 'Reason' },
                              { name: 'substitution', title: 'Substitution' },
                              { name: 'dosage', title: 'Dosage Instructions' },
                              { name: 'dispense', title: 'Dispense Request' },
                              { name: 'basedOn', title: 'Based On' },
                              { name: 'performer', title: 'Performer' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // reason
                        if (tab.name === 'reason') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonCode */}
                                        <FhirValueSetSearch label="Reason for Medication"
                                                            context="reasonCode"
                                                            valueSetUrl={valueSetUrls.conditionCode}
                                                            placeholder="Search for conditions..."
                                                            multiple={true}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="Condition or observation that supports why the prescription is being written"
                                                                 references={reasonReferenceFieldArray}
                                                                 context="reasonReference"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'Observation', key: 'Observation' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // substitution
                        if (tab.name === 'substitution') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* substitution.allowedBoolean */}
                                        <Controller key="substitution.allowedBoolean"
                                                    name="substitution.allowedBoolean"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <ToggleControl 
                                                                       label="Allow Substitution"
                                                                       checked={field.value}
                                                                       onChange={field.onChange}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        {watch(`substitution.allowedBoolean`) && (
                                            <>
                                                {/* substitution.allowedCodeableConcept */}
                                                <FhirCodeableConcept label="Substitution Code"
                                                                     context="substitution.allowedCodeableConcept"
                                                                     options={actSubstanceAdminSubstitutionCode}
                                                                     loading={loading}
                                                                     disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* substitution.reason */}
                                                <FhirCodeableConcept label="Substitution Reason"
                                                                     context="substitution.reason"
                                                                     options={substanceAdminSubstitutionReason}
                                                                     loading={loading}
                                                                     disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // dosage
                        if (tab.name === 'dosage') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* dosage */}
                                        {/* A prescription with no sig is not a prescription, it is a note
                                            naming a drug. Required here and not in the shared form, because
                                            a medication statement records what a patient says they take and
                                            a dispense record follows somebody else's order. */}
                                        <FhirDosage label="How the medication should be taken"
                                                    context={`dosageInstruction`}
                                                    required={!isPatient}
                                                    disabled={disabled}
                                                    readonly={isPatient}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // dispense
                        if (tab.name === 'dispense') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* dispenseRequest.quantity */}
                                        <FhirQuantity label="Amount of medication to supply per dispense"
                                                      context="dispenseRequest.quantity"
                                                      isSimpleQuantity={true}
                                                      required={true}
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* dispenseRequest.expectedSupplyDuration */}
                                        <FhirDuration label="Number of days supply per dispense"
                                                      context="dispenseRequest.expectedSupplyDuration"
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* dispenseInterval */}
                                        <FhirDuration label="Minimum period of time between dispenses"
                                                      context="dispenseRequest.dispenseInterval"
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* numberOfRepeatsAllowed */}
                                        {/* An empty box used to coerce to 0, so "no refills" and "nobody said"
                                            were the same stored value and a pharmacist could not tell them
                                            apart. Empty now stays undefined - which is what the service
                                            already writes against - and the field is required, so zero is
                                            stated rather than inferred. */}
                                        <Controller key="dispenseRequest.numberOfRepeatsAllowed"
                                                    name="dispenseRequest.numberOfRepeatsAllowed"
                                                    control={control}
                                                    disabled={disabled}
                                                    rules={{ required: true }}
                                                    render={({ field }) => (
                                                        <InputControl
                                                                      {...field}
                                                                      label="Number of refills authorized *"
                                                                      type="number"
                                                                      min="0"
                                                                      onChange={(value) => field.onChange(
                                                                          value === '' || value === undefined
                                                                              ? undefined
                                                                              : parseInt(value))}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* validityPeriod */}
                                        <FhirPeriod label="Time period supply is authorized for"
                                                    context="dispenseRequest.validityPeriod"
                                                    disabled={disabled}
                                                    readonly={isPatient}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* initialFill.quantity */}
                                        <FhirQuantity label="Initial fill quantity"
                                                      context="dispenseRequest.initialFill.quantity"
                                                      isSimpleQuantity={true}
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* initialFill.duration */}
                                        <FhirDuration label="Initial fill duration"
                                                      context="dispenseRequest.initialFill.duration"
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // basedOn
                        if (tab.name === 'basedOn') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* basedOn */}
                                        <FhirReferenceCollection label="What request fulfills"
                                                                 references={basedOnFieldArray}
                                                                 context="basedOn"
                                                                 referenceTypes={[
                                                                     { name: 'CarePlan', key: 'CarePlan' },
                                                                     { name: 'MedicationRequest', key: 'MedicationRequest' },
                                                                     { name: 'ImmunizationRecommendation', key: 'ImmunizationRecommendation' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'CarePlan':
                                                                             return carePlansList;
                                                                         case 'MedicationRequest':
                                                                             return medicationRequestsList;
                                                                         case 'ImmunizationRecommendation':
                                                                             return immunizationRecommendationsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // performer
                        if (tab.name === 'performer') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* performerType */}
                                        <FhirValueSetSearch label="Desired kind of performer of the medication administration"
                                                            context="performerType"
                                                            valueSetUrl={valueSetUrls.performerRole}
                                                            multiple={false}
                                                            placeholder="Search for roles..."
                                                            required={false}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* performer */}
                                        <FhirReferenceCollection label="Intended performer of administration"
                                                                 references={performerFieldArray}
                                                                 context="performer"
                                                                 referenceTypes={[
                                                                     { name: 'Practitioner', key: 'Practitioner' },
                                                                     { name: 'Patient', key: 'Patient' },
                                                                     { name: 'Device', key: 'Device' },
                                                                     { name: 'RelatedPerson', key: 'RelatedPerson' },
                                                                     { name: 'CareTeam', key: 'CareTeam' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Practitioner':
                                                                             return practitionersList.map(p => p.practitioner);
                                                                         case 'Device':
                                                                             return devicesList;
                                                                         case 'RelatedPerson':
                                                                             return relatedPersonsList;
                                                                         case 'CareTeam':
                                                                             return careTeamsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 multiple={false}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // notes
                        if (tab.name === 'notes') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* note */}
                                        <FhirAnnotation label="Information about the prescription"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }
                    }}
                </TabPanel>
            </CardBody>
        </Card>
    );
};

export default FhirMedicationRequest;