import "@fortawesome/fontawesome-free/css/all.css";

import { Editor } from "@monaco-editor/react";

import { Avatar, Button, CircularProgress, styled } from "@mui/material";

import Box from "@mui/material/Box";

import { useSnackbar } from "notistack";

import React, { useCallback, useEffect, useRef, useState } from "react";

import { FaPlay } from "react-icons/fa";

import GithubSignIn from "../components/GithubSignIn";

import GoogleSignIn from "../components/GoogleSignIn";

import "../components/css/EditorComponent.css";

import EditorThemeSelect from "../components/js/EditorThemeSelect";

import LanguageSelect from "../components/js/LanguageSelect";

import Stars from "../components/js/Stars";

import ToggleTheme from "../components/js/ToggleTheme";

import { defineEditorTheme } from "../components/js/defineEditorTheme";

import {

EDITOR_THEMES,

LANGUAGES,

judge0SubmitUrl,

rapidApiHost,

rapidApiKey,

} from "../constants/constants";

import { useAuth } from "../context/AuthContext";

import Footer from "../components/Footer";

const StyledButton = styled(Button)({

display: "flex",

alignItems: "center",

justifyContent: "center",

gap: "0.5rem",

});

const StyledLayout = styled("div")(({ theme }) => ({

display: "flex",

flexDirection: "column",

height: "80%",

margin: "0.5rem",

border: `2px solid ${theme.palette.divider}`,

borderRadius: "1rem",

"@media (min-width: 1024px)": {

flexDirection: "row",

padding: "1.5rem",

alignItems: "center",

},

}));

const OutputLayout = styled("div")(({ theme }) => ({

backgroundColor: theme.palette.background.paper,

height: "50vh",

margin: "1rem 0",

border: `2px solid ${theme.palette.divider}`,

borderRadius: "1rem",

"@media (min-width: 1024px)": {

height: "30vh",

padding: "1rem",

},

}));

const WelcomeText = styled("span")(({ theme }) => ({

color: theme.palette.text.primary,

fontWeight: "bold",

}));

function EditorComponent() {

const [code, setCode] = useState(null);

const [output, setOutput] = useState([]);

const [currentLanguage, setCurrentLanguage] = useState(

LANGUAGES[0].DEFAULT_LANGUAGE

);

const [languageDetails, setLanguageDetails] = useState(LANGUAGES[0]);

const [currentEditorTheme, setCurrentEditorTheme] = useState(

EDITOR_THEMES[1]

);

const [loading, setLoading] = useState(false);

const { enqueueSnackbar } = useSnackbar();

const editorRef = useRef(null);

const monacoRef = useRef(null);

const { currentUser, logOut } = useAuth();

const styles = {

flex: {

display: "flex",

flexDirection: "column",

alignItems: "center",

},

languageDropdown: {

marginTop: "1rem",

display: "flex",

alignItems: "center",

},

"@media (min-width: 576px)": {

flex: {

display: "flex",

flexDirection: "row",

justifyContent: "space-between",

alignItems: "center",

gap: "0.6em",

},

},

};

useEffect(() => {

const selectedLanguage = LANGUAGES.find(

(lang) => lang.DEFAULT_LANGUAGE === currentLanguage

);

setLanguageDetails({

ID: selectedLanguage.ID,

LANGUAGE_NAME: selectedLanguage.NAME,

DEFAULT_LANGUAGE: selectedLanguage.DEFAULT_LANGUAGE,

NAME: selectedLanguage.NAME,

});

setCode(selectedLanguage.HELLO_WORLD);

}, [currentLanguage]);

const handleEditorThemeChange = async (_, theme) => {

if (["light", "vs-dark"].includes(theme.ID)) {

setCurrentEditorTheme(theme);

} else {

setCurrentEditorTheme(theme);

defineEditorTheme(theme).then((_) => setCurrentEditorTheme(theme));

}

};

const getLanguageLogoById = (id) => {

const language = LANGUAGES.find(

(lang) => parseInt(lang.ID) === parseInt(id)

);

return language ? language.LOGO : null;

};

const submitCode = useCallback(async () => {

console.log("Submitting code..."); // Debug log

if (!editorRef.current) {

console.log("Editor reference not available");

return;

}

const codeToSubmit = editorRef.current.getValue();

if (codeToSubmit === "") {

enqueueSnackbar("Please enter valid code", { variant: "error" });

return;

}

setLoading(true);

try {

const encodedCode = btoa(codeToSubmit);

const response = await fetch(

`${judge0SubmitUrl}?base64_encoded=true&wait=false&fields=*`,

{

method: "POST",

headers: {

"Content-Type": "application/json",

"X-RapidAPI-Key": rapidApiKey,

"X-RapidAPI-Host": rapidApiHost,

},

body: JSON.stringify({

source_code: encodedCode,

language_id: languageDetails.ID,

stdin: "",

expected_output: "",

}),

}

);

if (!response.ok) {

enqueueSnackbar(

`Failed to create submission. Status code: ${response.status}`,

{ variant: "error" }

);

setLoading(false);

return;

}

const data = await response.json();

const submissionId = data["token"];

setTimeout(() => {

fetch(

`${judge0SubmitUrl}/${submissionId}?base64_encoded=true&fields=*`,

{

method: "GET",

headers: {

"X-RapidAPI-Key": rapidApiKey,

"X-RapidAPI-Host": rapidApiHost,

},

}

)

.then((response) => response.json())

.then((data) => {

if (!data.stdout) {

enqueueSnackbar("Please check the code", { variant: "error" });

setOutput(data.message);

return;

}

const decodedOutput = atob(data.stdout);

const formattedData = decodedOutput.split("\n");

setOutput(formattedData);

})

.catch((error) => {

enqueueSnackbar("Error retrieving output: " + error.message, {

variant: "error",

});

})

.finally(() => setLoading(false));

}, 2000);

} catch (error) {

enqueueSnackbar("Error: " + error.message, { variant: "error" });

}

}, [enqueueSnackbar, languageDetails]);

const handleEditorDidMount = useCallback(

(editor, monaco) => {

console.log("Editor mounted"); // Debug log

editorRef.current = editor;

monacoRef.current = monaco;

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {

console.log("Ctrl+Enter pressed in editor");

submitCode();

});

},

[submitCode]

);

useEffect(() => {

const handleKeyDown = (event) => {

if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {

console.log("Ctrl+Enter pressed globally");

event.preventDefault();

submitCode();

}

};

document.addEventListener("keydown", handleKeyDown);

return () => {

document.removeEventListener("keydown", handleKeyDown);

};

}, [submitCode]);

useEffect(() => {

if (editorRef.current && monacoRef.current) {

const editor = editorRef.current;

const monaco = monacoRef.current;

handleEditorDidMount(editor, monaco);

}

}, [handleEditorDidMount]);

function handleLanguageChange(_, value) {

setCurrentLanguage(value.DEFAULT_LANGUAGE);

setOutput("");

setCode(code ? code : value.HELLO_WORLD);

}

const handleSignOut = async () => {

try {

await logOut();

} catch (error) {

console.log(error);

}

};

const renderAuthenticatedContent = () => (

<>

<StyledLayout>

<Editor

className="editor"

theme={currentEditorTheme.NAME}

onMount={handleEditorDidMount}

value={code}

onChange={setCode}

language={languageDetails.DEFAULT_LANGUAGE}

options={{ minimap: { enabled: false } }}

/>

<div

className="sidebar"

style={{ display: "flex", flexDirection: "column" }}

>

{getLanguageLogoById(languageDetails.ID)}

<div style={{ fontWeight: "bold" }}>

{languageDetails.LANGUAGE_NAME}

</div>

<div style={styles.languageDropdown}>

<EditorThemeSelect

handleEditorThemeChange={handleEditorThemeChange}

defaultEditorTheme={currentEditorTheme}

/>

</div>

<div style={styles.languageDropdown}>

<LanguageSelect

handleLanguageChange={handleLanguageChange}

defaultLanguage={languageDetails}

/>

</div>

<StyledButton

sx={(theme) => ({

marginTop: "1rem",

padding: "10px 20px",

bgcolor: theme.palette.text.primary,

color: theme.palette.background.default,

border: "none",

borderRadius: "15px",

fontSize: "0.8em",

cursor: "pointer",

boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",

width: "50%",

"@media (min-width: 1024px)": {

width: "100%",

},

})}

onClick={submitCode}

variant="contained"

color="primary"

disabled={loading}

>

<span>

{loading ? <CircularProgress size={13} /> : <FaPlay size="13" />}

</span>

Run {languageDetails.LANGUAGE_NAME}

</StyledButton>

</div>

</StyledLayout>

<OutputLayout>

{Array.isArray(output) &&

output.map((result, i) => <div key={i}>{result}</div>)}

</OutputLayout>

</>

);

const renderUnauthenticatedContent = () => (

<div

style={{

display: "flex",

justifyContent: "center",

alignItems: "center",

height: "50vh",

flexDirection: "column",

}}

>

<h2>Please sign in to use the Code Editor</h2>

<GoogleSignIn />

<br />

<GithubSignIn />

</div>

);

return (

<div className="editor-container">

<Box

sx={[

(theme) => ({

height: "auto",

margin: "0.5rem",

paddingLeft: "0.5rem",

paddingRight: "0.5rem",

border: `2px solid ${theme.palette.divider}`,

borderRadius: "1rem",

}),

]}

>

<div style={styles.flex}>

<div style={{ display: "flex", alignItems: "center" }}>

<img

src="./images/custom-code-editor-rounded.svg"

alt="Custom Code Editor icon"

width={32}

style={{ marginLeft: "0.5rem" }}

/>

<span

style={{

backgroundClip: "text",

background: "linear-gradient(#2837BA 0%, #2F1888 100%)",

WebkitBackgroundClip: "text",

color: "transparent",

marginLeft: "0.5rem",

fontWeight: "bold",

fontSize: "1.5em",

}}

>

Custom Code Editor

</span>

</div>

<div className="flex-container">

<div className="flex items-center space-x-2">

{currentUser ? (

<>

<WelcomeText>

Welcome, {currentUser.displayName}

</WelcomeText>

<Avatar

src={currentUser.photoURL}

alt={currentUser.displayName}

sx={{

width: 32,

height: 32,

marginLeft: "0.5rem",

marginRight: "0.5rem",

}}

/>

<div className="signout-container">

<button

onClick={handleSignOut}

className="signout-button"

>

<span>Logout</span>

</button>

</div>

</>

) : (

<>

<GoogleSignIn />

<GithubSignIn />

</>

)}

</div>

<ToggleTheme />

<Stars />

</div>

</div>

</Box>

{currentUser

? renderAuthenticatedContent()

: renderUnauthenticatedContent()}

<div className="footer">

<Footer />

</div>

</div>

);

}

export default EditorComponent;