import React from 'react';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import ace from 'react-ace';
import { config } from 'ace-builds/src-noconflict/ace';
import TestResults from '../TestResults';

import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-solarized_light';

// Cuando se hace el build con esbuild (`npm start`) el módulo de ace exporta
// un objeto con la propiedad `default` que es una función. Cuando se hace el
// build con rollup (`npm run build`) el módulo de ace exporta directamente.
const AceEditor = typeof ace?.default === 'function' ? ace.default : ace;

config.setModuleUrl('ace/mode/javascript_worker', '/ace/worker-javascript.js');

const intl = {
  es: {
    'solution': 'Solución',
    'help-text': `
      En el siguiente editor de texto deberás desarrollar el código de tu
      solución. Para probar si lo que desarrollaste está correcto puedes
      hacer clic en el botón "Ejecutar pruebas", este te mostrará el
      resultado de tu código a través de mensajes de éxito y/o error, los
      mensajes podrás verlos bajo el botón. No te preocupes si tienes
      mensajes de error, puedes editar tu código y dar clic al botón las
      veces que sean necesarias hasta que pases todas las pruebas con
      mensaje de éxito.
    `,
    'run-tests': 'Ejecutar pruebas',
  },
  pt: {
    'solution': 'Solução',
    'help-text': `
      No seguinte editor de texto você terá que desenvolver o código da sua
      solução. Para verificar se o que você desenvolveu está correto, você pode
      clicar no botão “Executar testes”. Isso mostrará o resultado do seu
      código através de mensagens de sucesso e/ou erro, sendo que as mensagens
      podem ser vistas abaixo do botão Executar Testes. Não se preocupe se
      receber mensagens de erro. Você poderá editar seu código e clicar no
      botão quantas vezes precisar até passar em todos os testes com uma
      mensagem de sucesso.Veja abaixo as mensagens de sucesso e/ou erro.
    `,
    'run-tests': 'Executar testes',
  },
};

const CodeInput = ({
  challenge,
  lang,
  editorValue,
  setEditorValue,
  runAndSave,
  testResults,
}) => {
  return (
    <>
      <Typography variant="h2" sx={{ mt: 4, mb: 2 }}>
        {intl[lang].solution}
      </Typography>
      <Typography variant="body">
        {intl[lang]['help-text']}
      </Typography>
      <AceEditor
        style={{ width: '100%', marginBottom: 30, marginTop: 30 }}
        mode={challenge.env === 'dom' ? 'html' : 'javascript'}
        theme="solarized_light"
        onChange={text => setEditorValue(text)}
        name={`${challenge.slug}-code`}
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          autoScrollEditorIntoView: true,
          maxLines: 20,
        }}
        value={editorValue}
        tabSize={2}
        fontSize={18}
      />
      <div>
        <Button
          variant="contained"
          color="primary"
          onClick={runAndSave}
        >
          {intl[lang]['run-tests']}
        </Button>
      </div>
      {testResults && (
        <TestResults results={testResults} lang={lang} />
      )}
    </>
  );
};

export default CodeInput;