import React, { useEffect, useState } from 'react';
import { CustomSelectControl } from "../ui/custom-select-control";
import { CheckboxControl } from "../ui/checkbox-control";
import type { CustomSelectOption } from "../ui/custom-select-control";
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Text } from '../ui/text';
import { Spacer } from '../ui/spacer';
import { PlusCircle, Trash2 } from 'lucide-react';
import { IValueSet, useValueSetServiceContext } from '../../services';
import { FhirCodeableConcept, FhirCode, FhirPeriod, FhirDuration } from '../index';

interface FhirTimingProps {
    context: string;
    label?: string;
    disabled?: boolean;
}

const FhirTiming: React.FC<FhirTimingProps> = ({ context, label, disabled = false }) => {
    const { control, watch, setValue } = useFormContext();
    const { valueSetUrls, fetchValueSet, unitsOfTime, daysOfWeek } = useValueSetServiceContext();

    const [timingAbbreviation, setTimingAbbreviation] = useState<IValueSet[]>([]);
    const [eventTiming, setEventTiming] = useState<IValueSet[]>([]);

    const spacerMargin = '16px';

    const eventsFieldArray = useFieldArray({
        control,
        name: `${context}.event`
    });

    useEffect(() => {
        const loadValueSets = async () => {
            try {
                const [timingAbbreviationValueSet, eventTimingValueSet] = await Promise.all([
                    fetchValueSet(valueSetUrls.timingAbbreviation),
                    fetchValueSet(valueSetUrls.eventTiming)
                ]);

                setTimingAbbreviation(timingAbbreviationValueSet);
                setEventTiming(eventTimingValueSet);
            } catch (error) {
                console.error('Error loading value sets for FhirTiming:', error);
            }
        };

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

    const addEvent = () => {
        eventsFieldArray.append('');
    };

    const removeEvent = (index: number) => {
        eventsFieldArray.remove(index);
    };

    const repeatType = watch(`${context}.repeat.repeatType`) || 'frequency';
    const selectedDaysOfWeek = watch(`${context}.repeat.dayOfWeek`) || [];

    return (
        <>
            {label && (
                <>
                    <Heading level={5}>{label}</Heading>
                    <Divider margin="2"/>
                    <Spacer margin={spacerMargin}/>
                </>
            )}

            {/* timingType */}
            {/*<Controller key={`${context}.timingType`}*/}
            {/*            name={`${context}.timingType`}*/}
            {/*            control={control}*/}
            {/*            render={({ field }) => (*/}
            {/*                <CustomSelectControl __next40pxDefaultSize*/}
            {/*                                     label='Timing Type'*/}
            {/*                                     options={[*/}
            {/*                                         { name: 'Code', key: 'code' },*/}
            {/*                                         { name: 'Detailed Timing', key: 'timing' }*/}
            {/*                                     ]}*/}
            {/*                                     value={field.value}*/}
            {/*                                     onChange={(newValue: { selectedItem: CustomSelectOption }) => {*/}
            {/*                                         field.onChange(newValue.selectedItem.key);*/}
            {/*                                     }}*/}
            {/*                                     disabled={disabled}/>*/}
            {/*            )}/>*/}

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

            {/*{watch(`${context}.timingType`) === 'code' && (*/}
            {true && (
                <>
                    {/* code */}
                    <FhirCodeableConcept label="Timing"
                                         context={`${context}.code`}
                                         options={timingAbbreviation}
                                         disabled={disabled}/>

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

            {watch(`${context}.timingType`) === 'timing' && (
                <>
                    {/* Events (dateTime) */}
                    <Heading level={5}>Events</Heading>
                    <Divider margin="2" />
                    <Spacer margin={spacerMargin} />

                    <Text>Specific dates/times when the event occurs</Text>
                    <Spacer margin="8"/>

                    {eventsFieldArray.fields.length === 0 && (
                        <Flex justify="flex-start">
                            <FlexItem>
                                <button
                                    type="button"
                                    className="btn btn-blue-ghost"
                                    onClick={addEvent}
                                    disabled={disabled}
                                >
                                    <PlusCircle />
                                    Add Event Date/Time
                                </button>
                            </FlexItem>
                        </Flex>
                    )}

                    {eventsFieldArray.fields.map((field, index) => (
                        <React.Fragment key={field.id}>
                            <Flex align="flex-end" justify="space-between">
                                <FlexItem>
                                    <Controller key={`${context}.event.${index}`}
                                                name={`${context}.event.${index}`}
                                                control={control}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  label={`Event ${index + 1}`}
                                                                  type="datetime-local"
                                                                  value={field.value}
                                                                  onChange={field.onChange}
                                                                  disabled={disabled}/>
                                                )}/>
                                </FlexItem>
                                <FlexItem>
                                    <button
                                        type="button"
                                        className="btn btn-red-ghost"
                                        title="Remove event"
                                        aria-label="Remove event"
                                        onClick={() => removeEvent(index)}
                                        disabled={disabled}
                                    >
                                        <Trash2 />
                                    </button>
                                </FlexItem>
                            </Flex>
                            <Spacer margin="8"/>
                        </React.Fragment>
                    ))}

                    {eventsFieldArray.fields.length > 0 && (
                        <Flex justify="flex-start">
                            <FlexItem>
                                <button
                                    type="button"
                                    className="btn btn-blue-ghost"
                                    onClick={addEvent}
                                    disabled={disabled}
                                >
                                    <PlusCircle />
                                    Add Event Date/Time
                                </button>
                            </FlexItem>
                        </Flex>
                    )}

                    <Spacer margin={spacerMargin}/>

                    {/* Repeat */}
                    <Heading level={5}>Repeat Pattern</Heading>
                    <Divider margin="2"/>
                    <Spacer margin={spacerMargin}/>

                    {/* Repeat Type */}
                    <Controller key={`${context}.repeat.repeatType`}
                                name={`${context}.repeat.repeatType`}
                                control={control}
                                defaultValue="frequency"
                                render={({ field }) => (
                                    <CustomSelectControl
                                                         label="Repeat Type"
                                                         options={[
                                                             { name: 'Frequency', key: 'frequency' },
                                                             { name: 'Period', key: 'period' },
                                                             { name: 'Duration', key: 'duration' }
                                                         ]}
                                                         value={field.value}
                                                         onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                             field.onChange(newValue.selectedItem.key);
                                                         }}
                                                         disabled={disabled}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* frequency timing */}
                    {repeatType === 'frequency' && (
                        <>
                            <Flex>
                                <FlexItem>
                                    <Controller key={`${context}.repeat.frequency`}
                                                name={`${context}.repeat.frequency`}
                                                control={control}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  label="Frequency"
                                                                  type="number"
                                                                  min={0}
                                                                  value={field.value}
                                                                  onChange={field.onChange}
                                                                  disabled={disabled}/>
                                                )}/>
                                </FlexItem>
                                <FlexItem>
                                    <Controller key={`${context}.repeat.frequencyMax`}
                                                name={`${context}.repeat.frequencyMax`}
                                                control={control}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  label="Frequency Max"
                                                                  type="number"
                                                                  min={0}
                                                                  value={field.value}
                                                                  onChange={field.onChange}
                                                                  disabled={disabled}/>
                                                )}/>
                                </FlexItem>
                            </Flex>

                            <Spacer margin={spacerMargin}/>

                            <Controller key={`${context}.repeat.period`}
                                        name={`${context}.repeat.period`}
                                        control={control}
                                        render={({ field }) => (
                                            <InputControl
                                                          label="Period"
                                                          type="number"
                                                          min={0}
                                                          value={field.value}
                                                          onChange={field.onChange}
                                                          disabled={disabled}/>
                                        )}/>

                            <Spacer margin="8"/>

                            <Controller key={`${context}.repeat.periodUnit`}
                                        name={`${context}.repeat.periodUnit`}
                                        control={control}
                                        render={({ field }) => (
                                            <CustomSelectControl
                                                                 label="Period Unit"
                                                                 options={unitsOfTime.map((option: IValueSet) => (
                                                                     { name: option.display, key: option.code }
                                                                 ))}
                                                                 value={field.value}
                                                                 onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                                     field.onChange(newValue.selectedItem.key);
                                                                 }}
                                                                 disabled={disabled}/>
                                        )}/>
                        </>
                    )}

                    {/* boundsPeriod */}
                    {repeatType === 'period' && (
                        <FhirPeriod label="Period"
                                    context={`${context}.repeat.boundsPeriod`}
                                    disabled={disabled}/>
                    )}

                    {/* boundsDuration */}
                    {repeatType === 'duration' && (
                        <FhirDuration label="Duration"
                                      context={`${context}.repeat.boundsDuration`}
                                      disabled={disabled}/>
                    )}

                    <Spacer margin={spacerMargin}/>

                    {/* count */}
                    <Controller key={`${context}.repeat.count`}
                                name={`${context}.repeat.count`}
                                control={control}
                                render={({ field }) => (
                                    <InputControl
                                                  label="Count (number of times to repeat)"
                                                  type="number"
                                                  min={0}
                                                  value={field.value}
                                                  onChange={field.onChange}
                                                  disabled={disabled}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* countMax */}
                    <Controller key={`${context}.repeat.countMax`}
                                name={`${context}.repeat.countMax`}
                                control={control}
                                render={({ field }) => (
                                    <InputControl
                                                  label="Count Max (maximum number of times to repeat)"
                                                  type="number"
                                                  min={0}
                                                  value={field.value}
                                                  onChange={field.onChange}
                                                  disabled={disabled}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* Day of Week */}
                    <Heading level={6}>Days of Week</Heading>
                    <Spacer margin="8" />

                    <Flex wrap>
                        {daysOfWeek.map((day) => (
                            <FlexItem key={day.code} style={{ marginRight: '16px', marginBottom: '8px' }}>
                                <CheckboxControl label={day.display}
                                                 checked={selectedDaysOfWeek.includes(day.code)}
                                                 onChange={(checked) => {
                                                     const currentDays = [...selectedDaysOfWeek];
                                                     if (checked) {
                                                         if (!currentDays.includes(day.code)) {
                                                             currentDays.push(day.code);
                                                         }
                                                     } else {
                                                         const index = currentDays.indexOf(day.code);
                                                         if (index !== -1) {
                                                             currentDays.splice(index, 1);
                                                         }
                                                     }
                                                     // A person's edit: marked dirty, so an editor knows the form has changes.
                                                     setValue(`${context}.repeat.dayOfWeek`, currentDays, { shouldDirty: true });
                                                 }}
                                                 disabled={disabled}/>
                            </FlexItem>
                        ))}
                    </Flex>

                    <Spacer margin={spacerMargin}/>

                    {/* Time of Day */}
                    <Heading level={6}>Time of Day</Heading>
                    <Spacer margin="8" />

                    <Controller key={`${context}.repeat.timeOfDay`}
                                name={`${context}.repeat.timeOfDay`}
                                control={control}
                                render={({ field }) => {
                                    const timeValues = Array.isArray(field.value) ? field.value : [];

                                    return (
                                        <>
                                            {timeValues.map((time, index) => (
                                                <Flex key={index} align="flex-end" justify="space-between" style={{ marginBottom: '8px' }}>
                                                    <FlexItem>
                                                        <InputControl
                                                                      label={`Time ${index + 1}`}
                                                                      type="time"
                                                                      value={time}
                                                                      onChange={(newTime) => {
                                                                          const updatedTimes = [...timeValues];
                                                                          updatedTimes[index] = newTime;
                                                                          field.onChange(updatedTimes);
                                                                      }}
                                                                      disabled={disabled}/>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        <button
                                                            type="button"
                                                            className="btn btn-red-ghost"
                                                            title="Remove time"
                                                            aria-label="Remove time"
                                                            onClick={() => {
                                                                const updatedTimes = [...timeValues];
                                                                updatedTimes.splice(index, 1);
                                                                field.onChange(updatedTimes);
                                                            }}
                                                            disabled={disabled}
                                                        >
                                                            <Trash2 />
                                                        </button>
                                                    </FlexItem>
                                                </Flex>
                                            ))}

                                            <button
                                                type="button"
                                                className="btn btn-blue-ghost"
                                                onClick={() => {
                                                    field.onChange([...timeValues, '']);
                                                }}
                                                disabled={disabled}
                                            >
                                                <PlusCircle />
                                                Add Time of Day
                                            </button>
                                        </>
                                    );
                                }}
                    />

                    <Spacer margin={spacerMargin}/>

                    {/* When (time of day codes) */}
                    <Heading level={6}>When (Time of Day Codes)</Heading>
                    <Spacer margin="8" />

                    {/* when */}
                    <FhirCode label="When (Time of Day Codes)"
                              context={`${context}.repeat.when`}
                              options={eventTiming}
                              multiple={true}
                              required={false}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin} />

                    {/* Offset */}
                    <Controller name={`${context}.repeat.offset`}
                                control={control}
                                render={({ field }) => (
                                    <InputControl
                                                  label="Offset (minutes from event)"
                                                  type="number"
                                                  value={field.value}
                                                  onChange={field.onChange}
                                                  disabled={disabled}/>
                                )}/>
                </>
            )}
        </>
    );
};

export default FhirTiming;