import React from "react";
import Editor from "@monaco-editor/react";
import { FiFolder } from "react-icons/fi";
import { getLanguage } from "../helpers/fileTree";

interface CodeEditorProps {
  filePath: string;
  content: string;
  onChange: (content: string) => void;
}

export const CodeEditor: React.FC<CodeEditorProps> = ({
  filePath,
  content,
  onChange,
}) => {
  return (
    <div
      style={{
        height: "100%",
        display: "flex",
        flexDirection: "column",
        backgroundColor: "#1e1e1e",
      }}
    >
      <div style={{ flex: 1 }}>
        {filePath ? (
          <Editor
            height="100%"
            language={getLanguage(filePath)}
            value={content}
            onChange={(value) => onChange(value || "")}
            theme="vs-dark"
            options={{
              minimap: { enabled: false },
              fontSize: 14,
              fontFamily: "'Cascadia Code', 'Fira Code', monospace",
              tabSize: 4,
              wordWrap: "on",
              lineNumbers: "on",
              automaticLayout: true,
              renderWhitespace: "selection",
              smoothScrolling: true,
            }}
          />
        ) : (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: "100%",
              color: "#858585",
              textAlign: "center",
            }}
          >
            <div>
              <div
                style={{
                  marginBottom: "24px",
                  display: "flex",
                  justifyContent: "center",
                  opacity: 0.5,
                }}
              >
                <FiFolder size={64} />
              </div>
              <div
                style={{
                  fontSize: "18px",
                  marginBottom: "12px",
                  color: "#cccccc",
                }}
              >
                Welcome to Web VS Code
              </div>
              <div style={{ fontSize: "13px", marginBottom: "8px" }}>
                Right-click on a folder to create files
              </div>
              <div style={{ fontSize: "12px", color: "#0e639c" }}>
                Or right-click anywhere in the explorer
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};