import { type FC, type ReactNode, useMemo } from "react";
import { View } from "react-native";
import { getStyles } from "./styles";
import { findConflicts } from "../../utils/findConflicts";
import type { SharedValue } from "react-native-reanimated";
import type { IData, OnDataPress, OnDragEnd, RenderItem } from "react-native-week-schedule-1";
import { Item } from "../item";

interface IProps<T extends IData> {
    data: T[];
    currentItem?: T;
    dataKey: keyof T;
    titleKey: keyof T;
    scrollY: SharedValue<number>;
    contentHeight: number;
    isShowConflicts?: boolean;
    onDataPress?: OnDataPress<T>;
    scrollOnDrag: (destination: number) => void;
    onDragEnd?: OnDragEnd<T>;
    renderItem?: RenderItem;
};

export function Content<T extends IData>({ data, currentItem, dataKey, titleKey, scrollY, contentHeight, onDataPress, scrollOnDrag, onDragEnd, renderItem }: IProps<T>): ReactNode {
    const styles = useMemo(() => getStyles(), []);

    const overlappingIds = useMemo(() => {
        const formattedSessions: { [key: string]: Array<string | undefined>; } = {};
        data.forEach((localItem, _, array) => {
            const conflicts = findConflicts(localItem, array.filter(item => item?.[dataKey] !== localItem?.[dataKey]));
            const conflictsOfConflicts = conflicts.map(item => findConflicts(item, array.filter(arrayItem => arrayItem?.[dataKey] !== localItem?.[dataKey]))).flat();
            conflicts.push(...conflictsOfConflicts);
            if (conflicts.length) {
                const uniqConflicts = [...new Set(conflicts.map(item => item?.[dataKey] as string))];
                formattedSessions[`${localItem?.[dataKey]}`] = [localItem?.[dataKey] as string, ...uniqConflicts];
            };
        });
        return formattedSessions;
    }, [data, dataKey]);

    return (
        <View style={styles.container} pointerEvents='box-none'>
            {data?.map((item) =>
                renderItem
                    ? <RenderWrapper key={item?.[dataKey] as string}>
                        {renderItem({
                            overlappingIds: overlappingIds[item?.[dataKey] as string] || [],
                            titleKey: titleKey,
                            dataKey: dataKey,
                            item: item,
                            currentItem: currentItem,
                            scrollY: scrollY,
                            contentHeight: contentHeight,
                            onPress: onDataPress,
                            scrollOnDrag: scrollOnDrag,
                            onDragEnd: onDragEnd,

                        })}
                    </RenderWrapper>
                    : <Item<T>
                        overlappingIds={overlappingIds[item?.[dataKey] as string] || []}
                        key={item?.[dataKey] as string}
                        titleKey={titleKey}
                        dataKey={dataKey}
                        item={item}
                        currentItem={currentItem}
                        scrollY={scrollY}
                        contentHeight={contentHeight}
                        onPress={onDataPress}
                        scrollOnDrag={scrollOnDrag}
                        onDragEnd={onDragEnd}
                    />
            )
            }
        </View >
    );
};

const RenderWrapper: FC<{ children: ReactNode }> = ({ children }) => (<>{children}</>)