import React from 'react';
import { View, FlatList, Pressable, Text, StyleSheet } from 'react-native';
import { Portal, Modal } from 'react-native-paper';
import { customColor } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';

type Option = {
	label: string;
	value?: string;
};

const OptionsModal = ({
	options,
	isFocus,
	onIsFocus,
	selectedOptions,
	pressOption,
}: {
	options: any;
	isFocus: boolean;
	selectedOptions: string;
	onIsFocus: any;
	pressOption: (option: Option) => void;
}) => {
	const hideModal = () => onIsFocus(false);

	return (
		<Portal>
			<Modal contentContainerStyle={styles.modalContainer} visible={isFocus} onDismiss={() => onIsFocus(false)}>
				<View style={styles.modalContent}>
					<View style={styles.modalHeader}>
						<View style={styles.spacer} />
						<Text style={styles.title}>Lựa chọn</Text>
						<Pressable onPress={hideModal} style={styles.closeButton}>
							<Ionicons style={styles.closeButtonText} name="close" size={22} color={customColor.mainContent.darkBackground} />
						</Pressable>
					</View>
					<FlatList
						showsVerticalScrollIndicator={false}
						style={styles.flatList}
						data={options}
						renderItem={({ item }) => (
							<Pressable
								onPress={() => {
									pressOption(item);
									hideModal();
								}}
							>
								<View
									style={[
										styles.container,
										{
											backgroundColor: selectedOptions !== item.value ? '#E0EEEE' : '#87CEFA',
										},
									]}
								>
									<Text numberOfLines={1} style={styles.optionText}>
										{item?.label}
									</Text>
								</View>
							</Pressable>
						)}
					/>
				</View>
			</Modal>
		</Portal>
	);
};

const styles = StyleSheet.create({
	modalContainer: {
		backgroundColor: '#E0EEEE',
		marginHorizontal: 80,
		marginVertical: 60,
		borderRadius: 15,
		padding: 10,
		alignItems: 'center',
	},
	modalContent: {
		width: '100%',
		alignItems: 'center',
	},
	modalHeader: {
		width: '100%',
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 15,
	},
	title: {
		flex: 1,
		fontSize: 16,
		fontWeight: 'bold',
		color: '#4F4F4F',
		textAlign: 'center',
	},
	spacer: {
		width: 24,
	},
	closeButton: {
		position: 'absolute',
		right: 10,
	},
	closeButtonText: {
		fontSize: 16,
		color: '#4F4F4F',
	},
	flatList: {
		width: '100%',
		maxHeight: 200,
	},
	container: {
		flexDirection: 'row',
		padding: 10,
		borderBottomWidth: 0.3,
		borderColor: '#C1CDC1',
		alignItems: 'flex-start',
		paddingLeft: 20,
	},
	optionText: {
		color: customColor.mainContent.textOnBright,
	},
});

export default OptionsModal;