managarten/apps-archived/memoro/apps/mobile/features/spaces/components/CreateSpaceModal.tsx

import React, { useState } from 'react';
import { Modal, View, StyleSheet, TextInput } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import Text from '~/components/atoms/Text';
import Button from '~/components/atoms/Button';

interface CreateSpaceModalProps {
	visible: boolean;
	onClose: () => void;
	onSubmit: (name: string) => void;
}

export function CreateSpaceModal({ visible, onClose, onSubmit }: CreateSpaceModalProps) {
	const { isDark } = useTheme();
	const [name, setName] = useState('');

	const handleSubmit = () => {
		if (name.trim()) {
			onSubmit(name);
			setName(''); // Reset the input
		}
	};

	return (
		<Modal visible={visible} transparent={true} animationType="fade" onRequestClose={onClose}>
			<View style={styles.centeredView}>
				<View style={[styles.modalView, { backgroundColor: isDark ? '#303030' : '#FFFFFF' }]}>
					<Text style={[styles.modalTitle, { color: isDark ? '#FFFFFF' : '#000000' }]}>
						Create New Space
					</Text>

					<TextInput
						style={[
							styles.input,
							{
								backgroundColor: isDark ? '#505050' : '#F5F5F5',
								color: isDark ? '#FFFFFF' : '#000000',
								borderColor: isDark ? '#505050' : '#E0E0E0',
							},
						]}
						placeholder="Enter space name"
						placeholderTextColor={isDark ? '#A0A0A0' : '#808080'}
						value={name}
						onChangeText={setName}
						autoFocus={true}
					/>

					<View style={styles.buttonContainer}>
						<Button title="Cancel" onPress={onClose} style={styles.cancelButton} />
						<Button
							title="Create"
							onPress={handleSubmit}
							style={styles.createButton}
							disabled={!name.trim()}
						/>
					</View>
				</View>
			</View>
		</Modal>
	);
}

const styles = StyleSheet.create({
	centeredView: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'rgba(0, 0, 0, 0.5)',
	},
	modalView: {
		width: '80%',
		borderRadius: 12,
		padding: 20,
		alignItems: 'center',
		shadowColor: '#000',
		shadowOffset: {
			width: 0,
			height: 2,
		},
		shadowOpacity: 0.25,
		shadowRadius: 4,
		elevation: 5,
	},
	modalTitle: {
		fontSize: 20,
		fontWeight: 'bold',
		marginBottom: 20,
	},
	input: {
		width: '100%',
		padding: 12,
		borderWidth: 1,
		borderRadius: 8,
		marginBottom: 20,
	},
	buttonContainer: {
		flexDirection: 'row',
		width: '100%',
		justifyContent: 'space-between',
	},
	cancelButton: {
		flex: 1,
		marginRight: 10,
	},
	createButton: {
		flex: 1,
		marginLeft: 10,
	},
});

export default CreateSpaceModal;