/* eslint-disable react/jsx-handler-names */
import React from 'react';
import type { ReactNode } from 'react';
import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
import type { ViewStyle } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { safeWithTheme } from '../branding';
import ActivityIndicator from '../components/ActivityIndicator';
import TouchableOpacity from '../components/TouchableOpacity';
import themedStyles from './styles';
import Close from '../componentsDS/Icons/Close';
import type { ThemeProps } from '../branding/hoc/types';

interface HeaderActionItem {
    text?: string;
    onDonePress?: () => void;
    disabled?: boolean;
}

interface ModalProps {
    children?: ReactNode;
    headerText?: string | ReactNode;
    headerVariant?: string;
    headerActionItem?: HeaderActionItem;
    style?: ViewStyle;
    isLoading?: boolean;
    goBack?: () => void;
}

export const Modal = (props: ModalProps & ThemeProps) => {
    const {
        children,
        headerText,
        headerVariant,
        headerActionItem,
        style,
        theme,
        isLoading,
        goBack,
        colors
    } = props;

    const navigation = useNavigation();
    const insets = useSafeAreaInsets();
    const themed: (typeof themedStyles)[keyof typeof themedStyles] =
        themedStyles[theme];

    const headerTextStyles = [
        themed.headerText,
        ...(headerActionItem ? [themed.headerTextMargin] : [])
    ];

    const isDarkHeader = headerVariant === 'dark';

    return (
        <View style={[StyleSheet.absoluteFill, themed.overlay]}>
            <View style={[StyleSheet.absoluteFill, themed.flex]}>
                <TouchableWithoutFeedback
                    testID="overlay"
                    onPress={() => (goBack ? goBack() : navigation.goBack())}
                >
                    <View style={themed.flex} />
                </TouchableWithoutFeedback>
                <View style={[themed.container, { marginTop: insets.top }]}>
                    {isLoading && (
                        <View style={themed.loader}>
                            <ActivityIndicator />
                        </View>
                    )}
                    <View
                        style={[
                            themed.header,
                            isDarkHeader ? themed.headerDark : undefined
                        ]}
                    >
                        <TouchableOpacity
                            style={themed.closeButton}
                            onPress={() =>
                                goBack ? goBack() : navigation.goBack()
                            }
                            testID="closeButton"
                        >
                            <Close
                                size={24}
                                color={
                                    isDarkHeader ? colors.gray500 : undefined
                                }
                            />
                        </TouchableOpacity>
                        {typeof headerText === 'string' ? (
                            <Text style={headerTextStyles} testID="headerText">
                                {headerText}
                            </Text>
                        ) : (
                            <View style={themed.customHeaderContainer}>
                                {headerText}
                            </View>
                        )}
                        {headerActionItem && (
                            <TouchableOpacity
                                onPress={headerActionItem.onDonePress}
                                testID="headerActionItemTouchable"
                                disabled={headerActionItem.disabled}
                            >
                                <Text
                                    style={[
                                        themed.headerActionItem,
                                        headerActionItem.disabled
                                            ? themed.headerActionItemDisabled
                                            : undefined
                                    ]}
                                    testID="headerActionItemLabel"
                                >
                                    {headerActionItem.text
                                        ? headerActionItem.text.toUpperCase()
                                        : ''}
                                </Text>
                            </TouchableOpacity>
                        )}
                    </View>
                    <View testID="content" style={style}>
                        {children}
                    </View>
                </View>
            </View>
        </View>
    );
};

export default safeWithTheme(Modal);