import React, { useEffect, useState } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { CheckboxControl } from "../ui/checkbox-control";
import { IValueSet, useValueSetServiceContext } from '../../services';
import { Dosage } from 'fhir/r4';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { Card, CardBody, CardHeader } from '../ui/wp-card';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { PlusCircle, Trash2 } from 'lucide-react';
import {
    FhirCodeableConcept,
    FhirQuantity,
    FhirRange,
    FhirRatio,
    FhirTiming,
    TypeSelector
} from '../index.ts';
import FhirValueSetSearch from '../FhirValueSetSearch/FhirValueSetSearch.tsx';

interface FhirDosageProps {
    context: string;
    disabled?: boolean;
    label?: string;
    readonly?: boolean;
    /**
     * Demand the free-text instructions. Set by a PRESCRIPTION, where a sig is the whole point of the
     * order, and left off by a medication statement or a dispense record, where the sig belongs to the
     * order rather than to what is being recorded. FHIR marks nothing on Dosage mandatory, so this is
     * ours to decide per embedding site rather than once for the shared form.
     */
    required?: boolean;
}

const FhirDosage = ({ context, disabled = false, label = 'Dosage Instructions', readonly = false, required = false }: FhirDosageProps) => {
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [additionalInstructionCodes, setAdditionalInstructionCodes] = useState<IValueSet[]>([]);
    const [administrationMethodCodes, setAdministrationMethodCodes] = useState<IValueSet[]>([]);
    const [doseRateType, setDoseRateType] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    const { watch, control, setValue, getValues } = useFormContext();

    const dosageFieldArray = useFieldArray({
        control,
        name: context
    });

    useEffect(() => {
        const loadValueSets = async () => {
            const [
                additionalInstructionCodesValueSet,
                administrationMethodCodesValueSet,
                doseRateTypeValueSet
            ] = await Promise.all([
                fetchValueSet(valueSetUrls.additionalInstructionCodes),
                fetchValueSet(valueSetUrls.administrationMethodCodes),
                fetchValueSet(valueSetUrls.doseRateType)
            ]);

            setAdditionalInstructionCodes(additionalInstructionCodesValueSet);
            setAdministrationMethodCodes(administrationMethodCodesValueSet);
            setDoseRateType(doseRateTypeValueSet);
        };

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

    const canAddDosage = () => {
        return true;
    };

    const addDosage = () => {
        dosageFieldArray.append({
            sequence: dosageFieldArray.fields.length + 1,
            text: '',
            patientInstruction: '',
            additionalInstruction: [],
            asNeeded: false,
            asNeededFor: null,
            site: null,
            route: null,
            method: null,
            doseType: 'quantity',
            doseAndRate: [],
            maxDosePerPeriod: {
                numerator: {
                    value: '',
                    unit: '',
                    system: '',
                    code: ''
                },
                denominator: {
                    value: '',
                    unit: '',
                    system: '',
                    code: ''
                }
            },
            maxDosePerAdministration: {
                value: '',
                unit: '',
                system: '',
                code: ''
            },
            maxDosePerLifetime: {
                value: '',
                unit: '',
                system: '',
                code: ''
            },
            timingType: 'code',
            timing: {
                code: null
            }
        });
    };

    const removeDosage = (index: number) => {
        dosageFieldArray.remove(index);
    };

    /*
     * A REQUIRED FIELD INSIDE AN EMPTY ARRAY IS NOT A REQUIREMENT. The dosage list starts empty, so the
     * instructions control never mounts and its rule never runs - a prescription would refuse nothing and
     * still save with no sig at all. When the sig is required the first row has to exist, and it cannot be
     * removed back down to none.
     */
    useEffect(() => {
        if (required && dosageFieldArray.fields.length === 0) addDosage();
    }, [required, dosageFieldArray.fields.length]);

    const addDoseAndRate = (index: number) => {
        const path: string = `${context}.${index}.doseAndRate`;
        const doseAndRate = getValues(path) ?? [];

        setValue(path, [...doseAndRate, {
            type: null,
            doseQuantity: {
                value: '',
                unit: '',
                system: '',
                code: ''
            }
        }]);
    };

    const removeDoseAndRate = (index: number, doseAndRateIndex: number) => {
        const path: string = `${context}.${index}.doseAndRate`;
        const doseAndRate = getValues(path) ?? [];

        doseAndRate.splice(doseAndRateIndex, 1);
        setValue(path, doseAndRate);
    };

    return (
        <>
            {dosageFieldArray.fields.length === 0 && (
                <>
                    <Spacer margin="8"/>
                    <Flex>
                        <FlexItem>
                            <Heading level={5}>{label}</Heading>
                        </FlexItem>
                        <FlexItem>
                            {!readonly && (
                                <button type="button"
                                        className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                        onClick={addDosage}
                                        disabled={!canAddDosage() || disabled}>
                                    <PlusCircle className="w-4 h-4" />
                                    Add Dosage
                                </button>
                            )}
                        </FlexItem>
                    </Flex>
                    <Divider margin="2"/>
                    <Spacer margin="8"/>

                    <DismissibleAlert status="info">
                        No dosage instructions added yet.
                    </DismissibleAlert>

                    <Spacer margin={spacerMargin}/>
                </>
            )}

            {(dosageFieldArray.fields as any[]).map((dosage: Dosage, index: number) => {
                const doseAndRate = watch(`${context}.${index}.doseAndRate`);

                return (
                    <React.Fragment key={dosage.id}>
                        <Card>
                            <CardHeader>
                                <Flex align="center" justify="space-between">
                                    <FlexItem>
                                        <h4>Dosage {index + 1}</h4>
                                    </FlexItem>
                                    <FlexItem>
                                        {/* The last row stays when the sig is required, so the field that
                                            refuses cannot be removed out from under the refusal. */}
                                        {!readonly && !(required && dosageFieldArray.fields.length === 1) && (
                                            <button type="button"
                                                    className="btn btn-red-ghost"
                                                    title="Remove dosage"
                                                    aria-label="Remove dosage"
                                                    onClick={() => removeDosage(index)}
                                                    disabled={disabled}>
                                                <Trash2 className="w-4 h-4" />
                                            </button>
                                        )}
                                    </FlexItem>
                                </Flex>
                            </CardHeader>

                            <CardBody>
                                <Spacer margin={spacerMargin}/>

                                {/* sequence */}
                                <Controller key={`${context}.${index}.sequence`}
                                            name={`${context}.${index}.sequence`}
                                            control={control}
                                            render={({ field }) => (
                                                <InputControl
                                                              {...field}
                                                              type="number"
                                                              label="Sequence"
                                                              placeholder="The order of the dosage instructions"
                                                              disabled={disabled}/>
                                            )}/>

                                <Spacer margin={spacerMargin}/>

                                {/* text */}
                                <Controller key={`${context}.${index}.text`}
                                            name={`${context}.${index}.text`}
                                            control={control}
                                            rules={{ required }}
                                            render={({ field }) => (
                                                <TextareaControl
                                                                 label={required
                                                                     ? 'Free Text Dosage Instructions *'
                                                                     : 'Free Text Dosage Instructions'}
                                                                 value={field.value}
                                                                 onChange={field.onChange}
                                                                 placeholder='E.g., Take 1 tablet by mouth once daily'
                                                                 rows={3}
                                                                 disabled={disabled}/>
                                            )}/>

                                <Spacer margin={spacerMargin}/>

                                {/* additionalInstruction */}
                                <FhirCodeableConcept label='Supplemental instruction or warnings to the patient - e.g. "with meals", "may cause drowsiness"'
                                                     context={`${context}.${index}.additionalInstruction`}
                                                     options={additionalInstructionCodes}
                                                     disabled={disabled}
                                                     multiple={true}/>

                                <Spacer margin={spacerMargin}/>

                                {/* patientInstruction */}
                                <Controller key={`${context}.${index}.patientInstruction`}
                                            name={`${context}.${index}.patientInstruction`}
                                            control={control}
                                            render={({ field }) => (
                                                <TextareaControl
                                                                 label="Patient or consumer oriented instructions"
                                                                 value={field.value}
                                                                 onChange={field.onChange}
                                                                 placeholder='Instructions for patient in simple language'
                                                                 rows={3}
                                                                 disabled={disabled}/>
                                            )}/>

                                <Spacer margin={spacerMargin}/>

                                {/* timing */}
                                <FhirTiming label="When medication should be administered"
                                            context={`${context}.${index}.timing`}
                                            disabled={disabled}/>
                                <Spacer margin={spacerMargin}/>

                                {/* asNeeded and asNeededFor */}
                                <Heading level={5}>As Needed</Heading>
                                <Divider margin="2"/>
                                <Spacer margin={spacerMargin}/>

                                <Controller key={`${context}.${index}.asNeededBoolean`}
                                            name={`${context}.${index}.asNeededBoolean`}
                                            control={control}
                                            render={({ field }) => (
                                                <CheckboxControl
                                                                 label="Take as needed (PRN)"
                                                                 checked={field.value}
                                                                 onChange={field.onChange}
                                                                 disabled={disabled}/>
                                            )}/>

                                <Spacer margin="8"/>

                                {watch(`${context}.${index}.asNeededBoolean`) && (
                                    <>
                                        <FhirValueSetSearch label='As Needed For'
                                                            context={`${context}.${index}.asNeededCodeableConcept`}
                                                            valueSetUrl={valueSetUrls.medicationAsNeededReason}
                                                            placeholder="Search for additional reasons..."
                                                            multiple={false}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>
                                    </>
                                )}

                                {/* site */}
                                <Heading level={5}>Administration Details</Heading>
                                <Divider margin="2"/>
                                <Spacer margin={spacerMargin}/>

                                <FhirValueSetSearch label="Body site to administer to"
                                                    context={`${context}.${index}.site`}
                                                    valueSetUrl={valueSetUrls.approachSiteCodes}
                                                    placeholder="Search for body sites..."
                                                    multiple={false}
                                                    disabled={disabled}/>

                                <Spacer margin={spacerMargin}/>

                                {/* route */}
                                <FhirValueSetSearch label="How drug should enter body"
                                                    context={`${context}.${index}.route`}
                                                    valueSetUrl={valueSetUrls.usCoreRouteCodes}
                                                    placeholder="Search for routes..."
                                                    multiple={false}
                                                    disabled={disabled}/>

                                <Spacer margin={spacerMargin}/>

                                {/* method */}
                                <FhirCodeableConcept label="Technique for administering medication"
                                                     context={`${context}.${index}.method`}
                                                     options={administrationMethodCodes}
                                                     disabled={disabled}/>

                                <Spacer margin={spacerMargin}/>

                                {/* doseAndRate */}
                                <Heading level={4}>Dose and Rate</Heading>
                                <Divider margin="2"/>
                                <Spacer margin={spacerMargin}/>

                                {doseAndRate.length === 0 && (
                                    <Flex justify="flex-start">
                                        <FlexItem>
                                            {!readonly && (
                                                <button type="button"
                                                        className="btn btn-blue-ghost"
                                                        onClick={() => addDoseAndRate(index)}
                                                        disabled={disabled}>
                                                    <PlusCircle className="w-4 h-4" />
                                                    Add Dose and Rate
                                                </button>
                                            )}
                                        </FlexItem>
                                    </Flex>
                                )}

                                {(doseAndRate as any[]).map((doseRate, doseRateIndex) => (
                                    <React.Fragment key={doseRate.id}>
                                        <Card>
                                            <CardHeader>
                                                <Flex align="center" justify="space-between">
                                                    <FlexItem>
                                                        <Heading level={6}>Dose and Rate {doseRateIndex + 1}</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        <button type="button"
                                                                className="btn btn-red-ghost"
                                                                title="Remove dose and rate"
                                                                aria-label="Remove dose and rate"
                                                                onClick={() => removeDoseAndRate(index, doseRateIndex)}
                                                                disabled={disabled}>
                                                            <Trash2 className="w-4 h-4" />
                                                        </button>
                                                    </FlexItem>
                                                </Flex>
                                            </CardHeader>
                                            <CardBody>
                                                {/* doseAndRate[].type */}
                                                <FhirCodeableConcept label="The kind of dose or rate specified"
                                                                     context={`${context}.${index}.doseAndRate.${doseRateIndex}.type`}
                                                                     options={doseRateType}
                                                                     disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* doseType */}
                                                <TypeSelector label="Dose Type"
                                                              context={`${context}.${index}.doseAndRate.${doseRateIndex}.doseType`}
                                                              options={[
                                                                  { name: 'Range', key: 'range' },
                                                                  { name: 'Quantity', key: 'quantity' }
                                                              ]}
                                                              required={false}
                                                              disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* doseRange */}
                                                {watch(`${context}.${index}.doseAndRate.${doseRateIndex}.doseType`) === 'range' && (
                                                    <>
                                                        <FhirRange label="Dose Range"
                                                                   context={`${context}.${index}.doseAndRate.${doseRateIndex}.doseRange`}
                                                                   disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </>
                                                )}

                                                {/* doseQuantity */}
                                                {watch(`${context}.${index}.doseAndRate.${doseRateIndex}.doseType`) === 'quantity' && (
                                                    <>
                                                        <FhirQuantity label="Dose Quantity"
                                                                      context={`${context}.${index}.doseAndRate.${doseRateIndex}.doseQuantity`}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </>
                                                )}

                                                {/* rateType */}
                                                <TypeSelector label="Rate Type"
                                                              context={`${context}.${index}.doseAndRate.${doseRateIndex}.rateType`}
                                                              options={[
                                                                  { name: 'Quantity', key: 'quantity' },
                                                                  { name: 'Range', key: 'range' },
                                                                  { name: 'Ratio', key: 'ratio' }
                                                              ]}
                                                              required={false}
                                                              disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* rateQuantity */}
                                                {watch(`${context}.${index}.doseAndRate.${doseRateIndex}.rateType`) === 'quantity' && (
                                                    <>
                                                        <FhirQuantity label="Rate Quantity"
                                                                      context={`${context}.${index}.doseAndRate.${doseRateIndex}.rateQuantity`}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </>
                                                )}

                                                {/* rateRange */}
                                                {watch(`${context}.${index}.doseAndRate.${doseRateIndex}.rateType`) === 'range' && (
                                                    <>
                                                        <FhirRange label="Rate Range"
                                                                   context={`${context}.${index}.doseAndRate.${doseRateIndex}.rateRange`}
                                                                   disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </>
                                                )}

                                                {/* rateRatio */}
                                                {watch(`${context}.${index}.doseAndRate.${doseRateIndex}.rateType`) === 'ratio' && (
                                                    <>
                                                        <FhirRatio label="Rate Ratio"
                                                                   context={`${context}.${index}.doseAndRate.${doseRateIndex}.rateRatio`}
                                                                   disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </>
                                                )}
                                            </CardBody>
                                        </Card>
                                        <Spacer margin="16"/>
                                    </React.Fragment>
                                ))}

                                {!readonly && doseAndRate.length > 0 && (
                                    <Flex justify="flex-start">
                                        <FlexItem>
                                            <button type="button"
                                                    className="btn btn-blue-ghost"
                                                    onClick={() => addDoseAndRate(index)}
                                                    disabled={disabled}>
                                                <PlusCircle className="w-4 h-4" />
                                                Add Dose and Rate
                                            </button>
                                        </FlexItem>
                                    </Flex>
                                )}

                                <Spacer margin={spacerMargin}/>

                                {/*<Heading level={5}>Maximum Dose Constraints</Heading>*/}
                                {/*<Divider margin="2"/>*/}
                                {/*<Spacer margin={spacerMargin}/>*/}

                                {/* maxDosePerPeriod */}
                                <FhirRatio label="Max Dose Per Period"
                                           context={`${context}.${index}.maxDosePerPeriod`}
                                           disabled={disabled}/>

                                <Spacer margin={spacerMargin}/>

                                {/* maxDosePerAdministration */}
                                <FhirQuantity label="Max Dose Per Administration"
                                              context={`${context}.${index}.maxDosePerAdministration`}
                                              isSimpleQuantity={true}
                                              disabled={disabled}/>

                                <Spacer margin={spacerMargin}/>

                                {/* maxDosePerLifetime */}
                                <FhirQuantity label="Max Dose Per Lifetime"
                                              context={`${context}.${index}.maxDosePerLifetime`}
                                              isSimpleQuantity={true}
                                              disabled={disabled}/>
                            </CardBody>
                        </Card>

                        <Divider margin="8"/>
                    </React.Fragment>
                );
            })}

            {!readonly && dosageFieldArray.fields.length > 0 && (
                <Flex align="center" justify="center">
                    <FlexItem>
                        <button type="button"
                                className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                onClick={addDosage}
                                disabled={!canAddDosage() || disabled}>
                            <PlusCircle className="w-4 h-4" />
                            Add Dosage
                        </button>
                    </FlexItem>
                </Flex>
            )}
        </>
    );
};

export default FhirDosage;