import React, { useState, useEffect } from 'react';
import { Box, Button, Typography, CircularProgress } from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';
import AceEditor from 'react-ace';

// Import Ace Editor modes and themes
import 'ace-builds/webpack-resolver';

const CodeViewer = ({ filePath, fileType, editorTheme }) => {
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(filePath)
      .then((response) => response.text())
      .then((data) => {
        setCode(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error fetching the code file:', error);
        setLoading(false);
      });
  }, [filePath]);

  const downloadFile = () => {
    const blob = new Blob([code], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filePath.split('/').pop(); // Extract file name from path
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">Code Viewer</Typography>
      {loading ? (
        <CircularProgress sx={{ my: 2 }} />
      ) : (
        <AceEditor
          mode={fileType}
          theme={editorTheme}
          value={code}
          readOnly
          fontSize={14}
          width="100%"
          height="400px"
          setOptions={{ useWorker: false }}
        />
      )}
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        onClick={downloadFile}
        sx={{ mt: 2 }}
      >
        Download Code
      </Button>
    </Box>
  );
};

export default CodeViewer;