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

/*
     _          _   ____  
    / \   _ __ | |_|  _ \ 
   / _ \ | '_ \| __| | | |
  / ___ \| | | | |_| |_| |
 /_/   \_\_| |_|\__|____/ 
                           
*/
import { Input, notification } from "antd";

/*
  ____          _              ____  _        _            
 |  _ \ ___  __| |_   ___  __ / ___|| |_ __ _| |_ ___  ___ 
 | |_) / _ \/ _` | | | \ \/ / \___ \| __/ _` | __/ _ \/ __|
 |  _ <  __/ (_| | |_| |>  <   ___) | || (_| | ||  __/\__ \
 |_| \_\___|\__,_|\__,_/_/\_\ |____/ \__\__,_|\__\___||___/
                                                           
*/
import { useSelector, useDispatch } from "react-redux";
import {
  updateReadFileContent,updateBlocklyCode
} from "../../states/global";
import { AppState } from "../../states/global";
import CodeMirror from '@uiw/react-codemirror';
import { python } from '@codemirror/lang-python';

interface FileManagerReadFileProps {
  setEditable?: boolean;
}
const FileManagerReadFile: React.FC<FileManagerReadFileProps> = (props: any) => {
  const dispatch = useDispatch();
  const storeCode = useSelector((state: AppState) => state.blocklyCode);
  const [value, setValue] = useState("");
  // const [value, setValue] = useState("print('Hello World!')");
  const [api, contextHolder] = notification.useNotification();

  const isReadingFile = useSelector((state: AppState) => state.isReadingFile);
  const readFileContent = useSelector(
    (state: AppState) => state.readFileContent,
  );
  useEffect(() => {
    setValue(storeCode);
  }, [storeCode]);
  const onChange = (val: any, viewUpdate: any) => {
    setValue(val);
    dispatch(updateBlocklyCode(val));
  };
  
  return (
    <div style={{ textAlign: "left",height: "100%" }}>
      <CodeMirror style={{ height: "100%" }} editable={props.setEditable} value={value} height="100%" 
      extensions={[python()]} onChange={onChange} />
    </div>
  );
};

export default FileManagerReadFile;
