import streamlit as st
import random
from typing import List, Dict

# Sample React Native and TypeScript components
samples: List[Dict[str, str]] = [
    {
        "name": "Basic Button",
        "emoji": "🔘",
        "code": """
import React from 'react';
import { Button } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
}

const BasicButton: React.FC<ButtonProps> = ({ title, onPress }) => (
  <Button title={title} onPress={onPress} />
);

export default BasicButton;
"""
    },
    {
        "name": "Text Input",
        "emoji": "📝",
        "code": """
import React, { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';

interface TextInputProps {
  placeholder: string;
}

const CustomTextInput: React.FC<TextInputProps> = ({ placeholder }) => {
  const [text, setText] = useState('');

  return (
    <TextInput
      style={styles.input}
      onChangeText={setText}
      value={text}
      placeholder={placeholder}
    />
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    padding: 10,
  },
});

export default CustomTextInput;
"""
    },
    {
        "name": "List View",
        "emoji": "📋",
        "code": """
import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

interface Item {
  id: string;
  title: string;
}

interface ListViewProps {
  data: Item[];
}

const ListView: React.FC<ListViewProps> = ({ data }) => (
  <FlatList
    data={data}
    renderItem={({ item }) => (
      <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
    )}
    keyExtractor={item => item.id}
  />
);

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default ListView;
"""
    },
]

def main():
    st.title("React Native and TypeScript Mobile UI Generator 📱")
    
    st.sidebar.header("UI Components 🧩")
    selected_component = st.sidebar.selectbox(
        "Choose a component:",
        [f"{sample['emoji']} {sample['name']}" for sample in samples]
    )
    
    selected_index = [f"{sample['emoji']} {sample['name']}" for sample in samples].index(selected_component)
    
    st.header(f"{samples[selected_index]['emoji']} {samples[selected_index]['name']}")
    
    st.code(samples[selected_index]['code'], language='typescript')
    
    st.subheader("Component Preview 👀")
    st.warning("This is a placeholder for the component preview. In a full implementation, this would render a visual representation of the component.")
    
    st.subheader("Customization Options 🛠️")
    
    # Allow customization options
    if "Basic Button" in selected_component:
        button_label = st.text_input("Button Label", "Click Me")
        if st.button(f"Generate {button_label}"):
            st.success(f'Generated button with label "{button_label}"')
    
    elif "Text Input" in selected_component:
        placeholder = st.text_input("Placeholder", "Enter text...")
        if st.button("Generate Text Input"):
            st.success(f'Generated Text Input with placeholder "{placeholder}"')
    
    elif "List View" in selected_component:
        num_items = st.slider("Number of List Items", 1, 10, 5)
        list_items = [f"Item {i}" for i in range(1, num_items + 1)]
        if st.button("Generate List View"):
            st.success(f"Generated List View with {num_items} items: {', '.join(list_items)}")
    
    st.info("This is a basic implementation. Add more customization options as needed.")

if __name__ == "__main__":
    main()