function CoordinatesDisplay({ lat, lng }) { const coordinates = `${lat}, ${lng}`; return /*#__PURE__*/ React.createElement("input", { type: "text", value: coordinates, readOnly: true, className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }); } function CoordinatesDisplayStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CoordinatesDisplay, { lat: "40.7128", lng: "-74.0060", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CoordinatesDisplay, { lat: "34.0522", lng: "-118.2437", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CoordinatesDisplay, { lat: "51.5074", lng: "-0.1278", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function UserInputForm({ formData, handleInputChange, setPage, translate, textClass, inputClass }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-8 border border-gray-200 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: textClass, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, translate('name')), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: inputClass, value: formData.name, onChange: handleInputChange, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: textClass, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, translate('password')), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", className: inputClass, value: formData.password, onChange: handleInputChange, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setPage(2), className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, translate('submit')))); } function UserInputFormStory() { const translate = (key)=>{ const translations = { name: "Name", password: "Password", submit: "Submit" }; return translations[key]; }; const [formData, setFormData] = React.useState({ name: '', password: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const setPage = (page)=>{ console.log(`Navigating to page ${page}`); }; return /*#__PURE__*/ React.createElement(UserInputForm, { formData: formData, handleInputChange: handleInputChange, setPage: setPage, translate: translate, textClass: "text-gray-700", inputClass: "border rounded w-full py-2 px-3 text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }); } function MainComponent() { const [language, setLanguage] = React.useState('en'); const [page, setPage] = React.useState(1); const [formData, setFormData] = React.useState({ name: '', password: '', personalInfo: '', responses: Array.from({ length: 10 }).fill('') }); const [coordinates, setCoordinates] = React.useState({ lat: '', lng: '' }); const [dateTime, setDateTime] = React.useState(new Date().toLocaleString()); const fetchLocation = ()=>{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position)=>{ setCoordinates({ lat: position.coords.latitude, lng: position.coords.longitude }); setDateTime(new Date().toLocaleString()); }, (error)=>{ console.error('Error fetching location', error); }); } else { console.error('Geolocation is not supported by this browser.'); } }; React.useEffect(()=>{ fetchLocation(); }, []); const translate = (key)=>{ const translations = { en: { title: 'Data Collection App', name: 'Name', password: 'Password', personalInfo: 'Personal Information', question: 'Question', submit: 'Submit', next: 'Next', previous: 'Previous', location: 'Location', dateTime: 'Date and Time' }, ar: { title: 'تطبيق جمع البيانات', name: 'الاسم', password: 'كلمة المرور', personalInfo: 'معلومات شخصية', question: 'سؤال', submit: 'إرسال', next: 'التالي', previous: 'السابق', location: 'الموقع الجغرافي', dateTime: 'التاريخ والوقت' } }; return translations[language][key]; }; const textClass = "block text-sm font-medium text-gray-700"; const inputClass = "mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const renderPageContent = ()=>{ switch(page){ case 1: return /*#__PURE__*/ React.createElement(UserInputForm, { formData: formData, handleInputChange: handleInputChange, setPage: setPage, translate: translate, textClass: textClass, inputClass: inputClass, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }); case 2: return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-8 border border-gray-200 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: textClass, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, translate('location')), /*#__PURE__*/ React.createElement(CoordinatesDisplay, { lat: coordinates.lat, lng: coordinates.lng, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: textClass, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, translate('dateTime')), /*#__PURE__*/ React.createElement("input", { type: "text", value: dateTime, readOnly: true, className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setPage(page - 1), __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, translate('previous')), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setPage(page + 1), __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, translate('next')))); case 3: return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-8 border border-gray-200 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: textClass, __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, translate('personalInfo')), /*#__PURE__*/ React.createElement("input", { type: "text", name: "personalInfo", className: inputClass, value: formData.personalInfo, onChange: handleInputChange, __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setPage(page - 1), __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, translate('previous')), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setPage(page + 1), __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, translate('next')))); default: if (page >= 4 && page <= 13) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-8 border border-gray-200 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: textClass, __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, translate('question'), " ", page - 3), /*#__PURE__*/ React.createElement("input", { type: "text", name: `responses[${page - 4}]`, className: inputClass, value: formData.responses[page - 4], onChange: handleInputChange, __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setPage(page - 1), __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, translate('previous')), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setPage(page + 1), __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, page === 13 ? translate('submit') : translate('next')))); } return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 151, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-6", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, translate('title')), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm font-semibold text-blue-700", onClick: ()=>setLanguage('en'), __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "ml-4 text-sm font-semibold text-blue-700", onClick: ()=>setLanguage('ar'), __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, "العربية")), renderPageContent()); }