import * as React from 'react';
import Box from "@mui/material/Box";
import 'handsontable/dist/handsontable.full.min.css';
//import 'handsontable/styles/ht-theme-main.min.css';
import { HandsonTable } from 'handsontable/base';
import {HotTable} from "@handsontable/react";
//import { registerAllModules } from 'handsontable/registry';
import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
//import { registerPlugin, NestedRows } from 'handsontable/plugins';
//registerPlugin(NestedRows);
import { textRenderer, registerRenderer } from 'handsontable/renderers';
import useWebSocket, { ReadyState } from 'react-use-websocket';

import Zjcs from './Zjcs';
import Djcs from './Djcs';
import Service from './Service';
import {useNavigate, useLocation} from "react-router";
//registerAllModules();



export default function Home() {

  const { sendMessage, lastMessage, readyState } = useWebSocket('ws://127.0.0.1:8000/ws', {
    shouldReconnect: (closeEvent) => true
  });



  function coverRenderer(_instance, td, _row, _col, _prop, value, _cellProperties) {
     
    
         const button = document.createElement('button');
         button.innerText="打开";
         if (_col == 2) {
          button.innerText="解析";
         }
         //img.src = value;
         /*button.addEventListener('click', (event) => {
              console.log(hotRef.current?.hotInstance?.getData()[selectedRow.current]);
              hotRef.current?.hotInstance?.alter('remove_row', selectedRow.current, 1);
              //console.log(plugin);
             event.preventDefault();
         });*/
         button.addEventListener('mousedown', (event) => {
          
              
              //console.log(plugin);
             event.preventDefault();
         });
         td.innerText = '';
         td.appendChild(button);
    
    

    return td;
  }


    const hotRef = React.useRef(null);
    const navigate = useNavigate();
    let location = useLocation();
    const [detail, setDetail] = React.useState([["File Name"]]);
    React.useEffect(
      () => {
         Service.generateFiles().then(x=>{
           setDetail(x);
         });
      }, []
    );

    React.useEffect(() => {
      console.log(lastMessage);
    }, [lastMessage]);

    registerRenderer('highlightRowRenderer', (hotInstance, TD, row, column, ...rest) => {
      
           coverRenderer(hotInstance, TD, row, column, ...rest);
      
    });

    return (

            <HotTable nestedRows={false}
                    data={detail
                    }
                    ref={hotRef}
                    afterSelection={(row, column)=>{
                      console.log(row);
                      let selected = hotRef.current?.hotInstance?.getData()[row];
                      console.log(selected[0]);
                      if (column == 1) {
                         //navigate("/qingdan", {state: {name: selected[0]}});
                      } else {
                         //sendMessage(selected[0]);
                      }
                      
                    }}
                    rowHeaders={true}
                    colHeaders={false}
                    height="800"
                    readOnly={true}
                    autoWrapRow={false}
                    autoWrapCol={false}
                    /*cells={(row, col, prop) => {
                      if (col >= 1) {
                        return {
                          // row options, which apply to each cell of the second row
                          // and to each cell of the fifth row
                          renderer: "highlightRowRenderer"
                        };
                      }
                    }
                 }*/
                    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                  />
    );
  }