/*
    Предрейсовые осмотры - мобильное приложение
    Диалог выбора организации
*/

//---------------------
//Подключение библиотек
//---------------------

const React = require('react');
const { Modal, View, FlatList, Pressable, Keyboard } = require('react-native');
const { useSafeAreaInsets } = require('react-native-safe-area-context');
const AppText = require('../common/AppText');
const AppButton = require('../common/AppButton');
const styles = require('../../styles/auth/OrganizationSelectDialog.styles');

//-----------
//Тело модуля
//-----------

//Иконка закрытия (крестик)
function CloseIcon() {
    return (
        <View style={styles.closeIcon}>
            <View style={styles.closeIconLine1} />
            <View style={styles.closeIconLine2} />
        </View>
    );
}

//Стиль элемента организации
function getOrganizationItemStyle(stylesRef, isSelected, pressed) {
    return [stylesRef.organizationItem, isSelected && stylesRef.organizationItemSelected, pressed && stylesRef.organizationItemPressed];
}

//Элемент списка организаций
function OrganizationItem({ item, onSelect, isSelected }) {
    const handlePress = React.useCallback(() => {
        if (typeof onSelect === 'function') {
            onSelect(item);
        }
    }, [item, onSelect]);

    const styleFn = React.useCallback(({ pressed }) => getOrganizationItemStyle(styles, isSelected, pressed), [isSelected]);

    return (
        <Pressable style={styleFn} onPress={handlePress} delayPressIn={0}>
            <AppText style={[styles.organizationName, isSelected && styles.organizationNameSelected]} numberOfLines={2}>
                {item.SNAME}
            </AppText>
        </Pressable>
    );
}

//Диалог выбора организации
function OrganizationSelectDialog({ visible, organizations = [], onSelect, onCancel, title = 'Выбор организации' }) {
    const insets = useSafeAreaInsets();
    const [selectedOrg, setSelectedOrg] = React.useState(null);

    //При открытии диалога: сброс выбора и снятие фокуса с клавиатуры
    React.useEffect(() => {
        if (visible) {
            setSelectedOrg(null);
            Keyboard.dismiss();
        }
    }, [visible]);

    //Обработчик выбора организации из списка
    const handleSelectItem = React.useCallback(org => {
        setSelectedOrg(org);
    }, []);

    //Обработчик подтверждения выбора
    const handleConfirm = React.useCallback(() => {
        if (selectedOrg && typeof onSelect === 'function') {
            onSelect(selectedOrg);
        }
    }, [selectedOrg, onSelect]);

    //Обработчик отмены
    const handleCancel = React.useCallback(() => {
        if (typeof onCancel === 'function') {
            onCancel();
        }
    }, [onCancel]);

    //Функция отрисовки элемента списка
    const renderItem = React.useCallback(
        ({ item }) => {
            const isSelected = selectedOrg != null && item != null && String(selectedOrg.NRN) === String(item.NRN);
            return <OrganizationItem item={item} onSelect={handleSelectItem} isSelected={!!isSelected} />;
        },
        [selectedOrg, handleSelectItem]
    );

    //Генератор ключей для списка
    const keyExtractor = React.useCallback(item => String(item.NRN), []);

    //Стиль кнопки закрытия диалога при нажатии
    const getDialogCloseButtonPressableStyle = React.useMemo(() => {
        return function styleFn({ pressed }) {
            return [styles.closeButton, pressed && styles.closeButtonPressed];
        };
    }, []);

    //Стили с учетом safe area
    const footerStyle = React.useMemo(
        () => [styles.footer, { paddingBottom: Math.max(insets.bottom, styles.footer.padding || 16) }],
        [insets.bottom]
    );

    return (
        <Modal visible={visible} transparent={true} animationType="fade" statusBarTranslucent={true} onRequestClose={handleCancel}>
            <View style={styles.overlay}>
                <View style={styles.dialog}>
                    <View style={styles.header}>
                        <AppText style={styles.title} variant="h3" weight="semibold">
                            {title}
                        </AppText>

                        <Pressable style={getDialogCloseButtonPressableStyle} onPress={handleCancel} hitSlop={8}>
                            <CloseIcon />
                        </Pressable>
                    </View>

                    <FlatList
                        data={organizations}
                        renderItem={renderItem}
                        keyExtractor={keyExtractor}
                        extraData={selectedOrg}
                        keyboardShouldPersistTaps="handled"
                        showsVerticalScrollIndicator={true}
                        contentContainerStyle={styles.listContent}
                        style={styles.list}
                    />

                    <View style={footerStyle}>
                        <AppButton title="Отмена" onPress={handleCancel} style={styles.cancelButton} textStyle={styles.cancelButtonText} />

                        <AppButton
                            title="Выбрать"
                            onPress={handleConfirm}
                            disabled={!selectedOrg}
                            style={styles.confirmButton}
                            textStyle={styles.confirmButtonText}
                        />
                    </View>
                </View>
            </View>
        </Modal>
    );
}

//----------------
//Интерфейс модуля
//----------------

module.exports = OrganizationSelectDialog;
