function MainComponent({ onSubmit, setIsVmOn, vmStatus, isVmPoweredOn, resetForm }) { const [selectedOs, setSelectedOs] = React.useState(''); const [vdi, setVdi] = React.useState(''); const [file, setFile] = React.useState(null); const handleOsChange = (event)=>setSelectedOs(event.target.value); const handleVdiChange = (event)=>setVdi(event.target.value); const handleFileChange = (event)=>setFile(event.target.files[0]); React.useEffect(()=>{ if (!isVmPoweredOn) { resetForm(); } }, [ isVmPoweredOn, resetForm ]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(); formData.append('selectedOs', selectedOs); formData.append('vdi', vdi); formData.append('file', file); onSubmit(formData); setIsVmOn(true); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, vmStatus && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 20 }, __self: this }, vmStatus), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "os-select", className: "block font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Select OS"), /*#__PURE__*/ React.createElement("select", { id: "os-select", name: "selectedOs", value: selectedOs, onChange: handleOsChange, className: "block w-full p-2 mt-1 bg-white border border-gray-300 rounded shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Please choose an OS"), /*#__PURE__*/ React.createElement("option", { value: "windows", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Windows 🪟"), /*#__PURE__*/ React.createElement("option", { value: "linux", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Linux 🐧"), /*#__PURE__*/ React.createElement("option", { value: "mac", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "macOS 🍎"), /*#__PURE__*/ React.createElement("option", { value: "android", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Android 🤖"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "vdi-input", className: "block font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "VDI"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "vdi-input", name: "vdi", value: vdi, onChange: handleVdiChange, className: "block w-full p-2 mt-1 bg-white border border-gray-300 rounded shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "block font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Upload file"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", name: "file", onChange: handleFileChange, className: "block w-full p-2 mt-1 bg-white border border-gray-300 rounded shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !selectedOs || !vdi || !file, className: "w-full px-4 py-2 text-white bg-blue-600 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Power On"))); } function StoryComponent() { const [isVmOn, setIsVmOn] = React.useState(false); const [vmStatus, setVmStatus] = React.useState(''); const resetForm = ()=>{ setVmStatus(''); }; const handleResetClick = ()=>{ setIsVmOn(false); resetForm(); }; const handleOnSubmit = async (formData)=>{ try { const response = await fetch('/power-on', { method: 'POST', body: formData }); const message = await response.text(); setVmStatus(message); } catch (error) { setVmStatus(`Error: ${error.message}`); throw error; } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleResetClick, className: "px-4 py-2 m-4 text-white bg-black rounded hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, "Reset VM"), /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-500 ease-in-out ${isVmOn ? 'opacity-0' : 'opacity-100'}`, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, !isVmOn && /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleOnSubmit, setIsVmOn: setIsVmOn, vmStatus: vmStatus, isVmPoweredOn: isVmOn, resetForm: resetForm, __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-500 ease-in-out ${isVmOn ? 'opacity-100' : 'opacity-0'}`, __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, isVmOn && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, "VM is powered on and running"))); }