import * as React from 'react';
import { View, Platform } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
		render() {
				const {
					recordButtonTextColor, recordButtonBGColor, speakButtonTextColor, speakButtonBGColor, switchButtonTextColor, switchButtonBGColor,
						clearButtonTextColor, clearButtonBGColor, lightModeBgColor, bgImageUrl, inputText, translatedText, inputTextareaTextColor, inputTextareaBGColor, translatedTextareaTextColor, translatedTextareaBGColor, containerBGColor
				} = this.props;

				const encodedRecordButtonTextColor = encodeURIComponent(recordButtonTextColor);
				const encodedRecordButtonBGColor = encodeURIComponent(recordButtonBGColor);
				const encodedSpeakButtonTextColor = encodeURIComponent(speakButtonTextColor);
				const encodedSpeakButtonBGColor = encodeURIComponent(speakButtonBGColor);
				const encodedSwitchButtonTextColor = encodeURIComponent(switchButtonTextColor);
				const encodedSwitchButtonBGColor = encodeURIComponent(switchButtonBGColor);
				const encodedClearButtonTextColor = encodeURIComponent(clearButtonTextColor);
				const encodedClearButtonBGColor = encodeURIComponent(clearButtonBGColor);
				const encodedLightModeBgColor = encodeURIComponent(lightModeBgColor);
			  const encodedBgImageUrl = encodeURIComponent(bgImageUrl);
				const encodedInputText = encodeURIComponent(inputText);
			  const encodedTranslatedText = encodeURIComponent(translatedText);
			  const encodedInputTextareaTextColor = encodeURIComponent(inputTextareaTextColor);
			  const encodedInputTextareaBGColor = encodeURIComponent(inputTextareaBGColor);
			  const encodedTranslatedTextareaTextColor = encodeURIComponent(translatedTextareaTextColor);
			  const encodedTranslatedTextareaBGColor = encodeURIComponent(translatedTextareaBGColor);
			  const encodedContainerBGColor = encodeURIComponent(containerBGColor);
			


			

				const url = `https://language-aid-lg-loomisgitarrist.replit.app?recordButtonTextColor=${encodedRecordButtonTextColor}&recordButtonBGColor=${encodedRecordButtonBGColor}&speakButtonTextColor=${encodedSpeakButtonTextColor}&speakButtonBGColor=${encodedSpeakButtonBGColor}&switchButtonTextColor=${encodedSwitchButtonTextColor}&switchButtonBGColor=${encodedSwitchButtonBGColor}&clearButtonTextColor=${encodedClearButtonTextColor}&clearButtonBGColor=${encodedClearButtonBGColor}&lightModeBgColor=${encodedLightModeBgColor}&bgImageUrl=${encodedBgImageUrl}&inputText=${encodedInputText}&translatedText=${encodedTranslatedText}&inputTextareaTextColor=${encodedInputTextareaTextColor}&inputTextareaBGColor=${encodedInputTextareaBGColor}&translatedTextareaTextColor=${encodedTranslatedTextareaTextColor}&translatedTextareaBGColor=${encodedTranslatedTextareaBGColor}&containerBGColor=${encodedContainerBGColor}`;

 // Iframe attributes for allowing camera and microphone access
		const iframeAttributes = {
			allow: "camera; microphone; display-capture",
			allowUserMedia: true
		};

return (
			<View style={{ flex: 1 }}>
				{Platform.OS === 'web' ? (
					<iframe
						src={url}
						height="765px"
						width="100%"
						style={{ overflowY: 'hidden', border: 'none' }}
						{...iframeAttributes}
					/>
				) : (
					<WebView
						source={{ uri: url }}
						style={{ flex: 1 }}
						javaScriptEnabled={true}
					/>
				)}
			</View>
		);
	}
}

