/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useRef } from 'react';
import type { LayoutChangeEvent } from 'react-native';
import { ScrollView, Text } from 'react-native';
import { safeWithTheme } from '../../../branding';
import styles from '../styles';
import TouchableOpacity from '../../TouchableOpacity';
import { formatMessage } from '../../../i18n';
import { track } from '../../../services/analytics.service';
import type { ThemeProps } from '../../../branding/hoc/types';
import type { POTViewByFilterProps, ViewByFilterItemProps } from '../types';

const ViewByFilter = ({
    theme,
    items,
    onFilterItemPress,
    selectedItem,
    disabled
}: POTViewByFilterProps & ThemeProps) => {
    const scrollViewRef = useRef<ScrollView | null>(null);
    const itemRefs = useRef<Record<string, number>>({});
    const eventTriggeredRefs = useRef<any>({});
    const themeStyle = styles[theme];

    useEffect(() => {
        items.forEach(item => {
            if (item.eventName !== undefined) {
                eventTriggeredRefs.current[item.eventName] = false;
            }
        });
    }, []);

    const handleItemPress = (
        item: ViewByFilterItemProps,
        selectedItemKey: string
    ) => {
        if (item.value === selectedItemKey) {
            return;
        }
        if (
            item.eventName !== undefined &&
            eventTriggeredRefs.current[item.eventName] === false
        ) {
            track(item.eventName);
            eventTriggeredRefs.current[item.eventName] = true;
        }

        if (onFilterItemPress) {
            onFilterItemPress(item, selectedItemKey);
        }

        if (scrollViewRef.current) {
            scrollViewRef.current.scrollTo({
                x: itemRefs.current[item.value] - 30,
                animated: true
            });
        }
    };

    const handleLayout = (event: LayoutChangeEvent, itemValue: string) => {
        const layout = event.nativeEvent.layout;
        itemRefs.current[itemValue] = layout.x;
    };

    return (
        <ScrollView
            ref={scrollViewRef}
            horizontal
            showsHorizontalScrollIndicator={false}
            centerContent={true}
            contentContainerStyle={themeStyle.contentContainer}
        >
            {items.map(item => {
                const pillStyles = [
                    themeStyle.pill,
                    selectedItem === item.value && themeStyle.selectedPill
                ];

                return (
                    <TouchableOpacity
                        testID={`${item.value}`}
                        key={item.value}
                        style={pillStyles}
                        disabled={disabled}
                        onPress={() => handleItemPress(item, selectedItem)}
                        onLayout={(event: LayoutChangeEvent) =>
                            handleLayout(event, item.value)
                        }
                    >
                        <Text ellipsizeMode="tail" style={themeStyle.text}>
                            {formatMessage(item.label)}
                        </Text>
                    </TouchableOpacity>
                );
            })}
        </ScrollView>
    );
};

export default safeWithTheme(ViewByFilter);